在 React 中，组件的 state 属性用于管理组件内部的可变数据。

• state 是组件对象最重要的属性，值是对象（可以包含多个 key-value的组合)；
• 组件被称为”状态机”，通过更新组件的 state 来更新对应的页面显示（重新渲染组件）
• 状态数据，不能直接修改或更新。

在 React 中，state 属性用于管理组件的本地状态，setState 方法用于更新这个状态。它们的定义和使用通常依赖于组件的类型（类组件还是函数组件）和状态管理的需求。

1. 类组件

a. 定义 state

在类组件中，state 通常在构造函数中进行初始化。构造函数是定义组件 state 的唯一位置。

import React from 'react';

class MyClassComponent extends React.Component {
     constructor(props) {
         super(props);
         // 在构造函数中初始化 state
         this.state = {
             count: 0
         };
     }
    
    
    // 更新状态的一个方法
    incrementCount = () => {
        // prevState 是一个参数，代表当前组件的状态在调用 setState 之前的值
        // prevState 包含了组件在调用 setState 之前的完整状态对象
        this.setState(prevState => ({
            // 在当前状态的count 的基础上将 count 增加 1
            count: prevState.count + 1
        }));
    };

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

export default MyClassComponent;

简写形式：（在构造器中的固定值，可以直接写）

import React from 'react';

class MyClassComponent extends React.Component {

    state = {count:0}
    
    // 更新状态的一个方法
    incrementCount = () => {
        // prevState 是一个参数，代表当前组件的状态在调用 setState 之前的值
        // prevState 包含了组件在调用 setState 之前的完整状态对象
        this.setState(prevState => ({
            // 在当前状态的count 的基础上将 count 增加 1
            count: prevState.count + 1
        }));
    };

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

export default MyClassComponent;

b. 使用 setState

• 位置：setState 可以在组件的任何方法中调用，例如事件处理程序、生命周期方法等。通常在用户交互（例如按钮点击）或异步操作（例如 API 调用）之后使用 setState 来更新状态。

handleButtonClick = () => {
    this.setState({ count: this.state.count + 1 });
};

2. 函数组件

在函数组件中，使用 useState 钩子来定义和管理状态。

a. 定义 state

useState 类似于 state 的定义和初始化。

import React, { useState } from 'react';

const MyFunctionComponent = () => {
    // 使用 useState 来定义组件的 state
    const [count, setCount] = useState(0);

    // 更新状态的一个方法
    const incrementCount = () => {
        setCount(prevCount => prevCount + 1);
    };

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={incrementCount}>Increment</button>
        </div>
    );
};

export default MyFunctionComponent;

b. 使用 setState

• 使用时机：在函数组件中，setCount 函数（由 useState 返回的更新状态的函数）可以在组件的任何地方调用，通常是在事件处理函数中或异步操作的回调中。

const handleButtonClick = () => {
    setCount(prevCount => prevCount + 1);
};

总结

• 定义 state：
  • 类组件：在构造函数中定义和初始化 state。
  • 函数组件：使用 useState 钩子在组件的顶部定义。
• 使用 setState：
  • 类组件：可以在事件处理方法、生命周期方法及其他自定义方法中调用 this.setState()。
  • 函数组件：在组件的任意地方调用由 useState 返回的 setter 函数（例如 setCount）。