React 中执行 setState 时如何保证取到的上一次 state 是正确的？

2024-01-08 03:17:33

了解如何在 React 中执行 setState 时保证取到的上一次 state 是正确的，对于构建健壮且可预测的 React 应用程序至关重要。在这篇文章中，我将深入探讨这个问题，并提供一些最佳实践和代码示例来帮助你掌握这一技巧。

理解 setState 的工作原理

setState 是 React 中一个内置的方法，用于更新组件的状态。它允许你在组件的生命周期内修改组件的状态，从而触发重新渲染。当调用 setState 时，React 会将新的状态与先前的状态合并，然后根据合并后的状态重新渲染组件。

并发setState

重要的是要记住，setState 是一个异步操作。这意味着当调用 setState 时，新的状态不会立即应用到组件中。相反，React 会将新的状态放入一个队列中，并在稍后将其应用到组件中。

这种异步行为可能会导致问题，特别是当你试图在同一组件中执行多个 setState 调用时。例如，考虑以下代码：

class MyComponent extends React.Component {
  state = {
    count: 0
  };

  incrementCount() {
    this.setState({ count: this.state.count + 1 });
    this.setState({ count: this.state.count + 1 });
  }

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

在这个例子中，incrementCount 方法被调用两次，每次都调用 setState 来增加 count 状态。但是，由于 setState 是异步的，所以新的状态不会立即应用到组件中。因此，当组件重新渲染时，count 状态仍然是 0。

为了解决这个问题，我们需要确保在应用新的状态之前等待先前的 setState 调用完成。我们可以通过使用回调函数来实现这一点。回调函数将在先前的 setState 调用完成后执行，从而确保新的状态已应用到组件中。

修改后的代码如下：

class MyComponent extends React.Component {
  state = {
    count: 0
  };

  incrementCount() {
    this.setState(prevState => ({ count: prevState.count + 1 }), () => {
      // 此回调函数将在先前的 setState 调用完成后执行
      this.setState({ count: this.state.count + 1 });
    });
  }

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