浅析 React 中的 setState 同步还是异步？

2023-11-28 08:40:25

React 中的 setState 是同步还是异步？

在 React 中，setState 是一个用来更新组件状态的方法。当调用 setState 时，React 会将新的状态对象与当前的状态对象进行合并，并重新渲染组件。

通常情况下，setState 是异步的。这意味着当调用 setState 时，React 不会立即更新组件的状态，而是会将更新的状态对象放入一个队列中，并在稍后更新组件的状态。这种异步行为可以提高 React 的性能，因为如果在短时间内对组件的状态进行多次更新，React 只会进行一次重新渲染。

但是，在某些情况下，setState 也会是同步的。当组件处于服务器端渲染时，或者当组件使用 getSnapshotBeforeUpdate 生命周期方法时，setState 就会是同步的。

如何判断 setState 是同步还是异步？

要判断 setState 是同步还是异步，可以根据以下几点：

如果组件处于服务器端渲染，则 setState 是同步的。
如果组件使用 getSnapshotBeforeUpdate 生命周期方法，则 setState 是同步的。
如果在短时间内对组件的状态进行多次更新，则 setState 是异步的。

setState 是同步还是异步的示例代码

以下是一个示例代码，演示了 setState 是如何工作的：

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

  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
    this.setState({ count: this.state.count + 1 });
    console.log(this.state.count); // 0
  };

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