React 组件的3大属性: state

一、理解

1. 组件被称为"状态机", 页面的显示是根据组件的state 属性的数据来显示。
   state 是一个用于存储和管理组件内部数据的机制。
   它是一种在组件中跟踪状态变化的方式，以便在数据发生变化时，React 可以更新用户界面以反映这些变化。state 的使用在构建交互式和动态的用户界面中非常重要。

2. state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)

二、用途

1. 数据驱动的 UI 更新： state 允许你在组件中存储数据，并在数据发生变化时自动更新用户界面。当 state 发生变化时，React 会自动重新渲染相关的组件部分，以便显示最新的数据。

2. 响应用户交互： 通过使用 state，你可以追踪用户与组件的交互，例如点击按钮、输入文本等。当用户执行操作时，你可以更新 state 以反映这些交互，然后触发 UI 的更新。

3. 动态数据呈现： 当你需要根据不同的条件或数据情况呈现不同的 UI，state 可以帮助你管理这些动态变化。你可以根据 state 的值来决定显示什么内容，从而实现动态的界面。

4. 表单处理： 在处理表单元素时，比如输入框、复选框等，你可以使用 state 存储用户输入的值，并根据需要进行验证和处理。这使得表单的交互和数据管理更加方便。

5. 组件间通信： 如果你的应用中有多个组件需要共享一些数据，你可以将这些数据存储在共同的祖先组件的 state 中，并通过 props 将数据传递给子组件。这样，你可以保持数据的同步性。

使用 state 需要遵循一些规则，例如，你应该避免直接修改 state，而是应该使用 setState 方法来更新它。这是因为 React 需要知道何时更新组件并重新渲染界面。此外，由于 state 的改变可能是异步的，你需要小心处理多个 setState 调用之间的状态变化。

三、使用

3.1、类初始化

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);

    // 初始化 state
    this.state = {
      count: 0,
      text: 'Hello, React!',
    };
  }

  render() {
    return (
      <div>
        <p>{this.state.text}</p>
        <p>Count: {this.state.count}</p>
      </div>
    );
  }
}

export default MyComponent;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

3.2、函数初始化

需要注意的是，自 React 16.8 版本引入的 Hooks 之后，你也可以在函数组件中使用 useState 来初始化和管理状态。以下是使用 useState 进行状态初始化的示例：

import React, { useState } from 'react';

function MyComponent() {
  // 初始化 state 使用 useState
  const [count, setCount] = useState(0);
  const [text, setText] = useState('Hello, React!');

  return (
    <div>
      <p>{text}</p>
      <p>Count: {count}</p>
    </div>
  );
}

export default MyComponent;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

四、状态读更

4.1、组件内部状态管理和数据更新

使用 state 来管理组件的内部状态，当状态变化时，React 会重新渲染组件以反映最新的数据。你可以使用 setState 方法来更新 state。

import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  incrementCount = () => {
    this.setState((prevState) => ({
      count: prevState.count + 1,
    }));
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.incrementCount}>Increment</button>
      </div>
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

1. 读取显示:
   this.state.count
2. 更新状态–>更新界面 :
   this.setState({count : newValue})

4.2、state 和 props 一起使用

state 一般使用props 内的参数做初始化。

演示了在子组件中不使用自己的 state，而是直接使用父组件传递的 props：

import React, { Component } from 'react';

class ParentComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: props.initialCount,
    };
  }

  incrementCount = () => {
    this.setState((prevState) => ({
      count: prevState.count + 1,
    }));
  };

  render() {
    return (
      <div>
        <p>Parent Count: {this.state.count}</p>
        <ChildComponent count={this.state.count} incrementCount={this.incrementCount} />
      </div>
    );
  }
}

function ChildComponent(props) {
  return (
    <div>
      <p>Child Count from Parent: {props.count}</p>
      <button onClick={props.incrementCount}>Increment Parent Count</button>
    </div>
  );
}

class App extends Component {
  render() {
    return <ParentComponent initialCount={5} />;
  }
}

export default App;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

ChildComponent 直接使用从父组件传递的 count，并通过 props 调用 incrementCount 方法来更新父组件的状态。
这种方式更加简洁和清晰，适用于子组件只需要访问父组件传递的数据而不需要维护独立状态的情况。