React中this.setState()是同步还是异步？附代码疑问求解

嘿，我来帮你搞清楚这个问题～

首先看你的代码，你连续调用了两次setState，但最终count总是被设置为3，这其实和React的批量更新机制以及你使用函数式更新的方式直接相关。

核心原因拆解 #

1. React的批量更新策略：在事件处理函数（比如你的handleReset）这类同步场景下，React会把多次setState调用合并成一次批量更新。也就是说，不会每次调用setState就立刻修改this.state，而是先收集所有更新操作，最后一次性应用。
2. 你的函数式更新没有依赖前序状态：你第二个setState的回调函数直接返回了{ count: 3 }，完全没有基于前一次的更新结果来计算新状态。哪怕第一个setState把count设为1，第二个更新也会直接覆盖这个值，所以最终count就是3。

如果你原本的需求是基于前一次更新后的状态来修改（比如先把count设为1，再在这个基础上调整到3），那你需要在函数式更新里使用prevState参数——它会传入当前待合并的最新状态值，而不是this.state（因为this.state在批量更新完成前还是旧值）。

修正后的代码示例 #

比如要实现“先设为1，再基于1加2得到3”的逻辑，可以这么写：

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

  handleReset() {
    this.setState(() => {
      return { count: 1 }
    });
    // 使用prevState获取上一次更新后的状态
    this.setState((prevState) => {
      return { count: prevState.count + 2 }
    });
  }

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

ReactDOM.render(<Counter />, document.getElementById('app'));

如果你的需求就是直接把count从0改成3（不管中间的1），那当前代码的结果是符合预期的——因为第二个setState直接覆盖了第一个的更新。但如果你疑惑为什么没法在第二个setState里拿到第一个更新后的this.state.count，那记住：在批量更新完成前，this.state始终是更新前的旧值，只有函数式更新的prevState参数能拿到最新的待合并状态。

内容的提问来源于stack exchange，提问作者Prem