React 17/18 setState原理浅析

2024-01-17 07:40:24

前言

React 中的 setState 方法是用于更新组件状态的核心函数。它在 React 应用程序中扮演着至关重要的角色，控制着组件状态的变更。然而，setState 的原理可能并不是那么直观，尤其对于新手开发者来说。本文将从原理层面深入剖析 setState 的实现机制，帮助你全面理解 React 状态管理。

函数式组件与类组件中的 `setState`

在 React 中，存在两种类型的组件：函数式组件和类组件。函数式组件使用 JavaScript 函数编写，而类组件则继承于 React.Component 类。这两类组件在使用 setState 时存在一些差异。

函数式组件

函数式组件中，setState 方法通常被写成这样：

const MyComponent = (props) => {
  const [state, setState] = useState(initialState);

  // ...

  const handleClick = () => {
    setState((prevState) => ({
      ...prevState,
      count: prevState.count + 1,
    }));
  };

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

在这个例子中，useState 钩子函数被用来管理组件状态。useState 接受一个初始状态值作为参数，并返回一个包含状态值和 setState 方法的数组。当调用 setState 时，它会触发组件重新渲染。

类组件

在类组件中，setState 方法的用法略有不同：

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

    this.state = {
      count: 0,
    };
  }

  // ...

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

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