为何两段React计数增量代码效果不同？状态更新机制解析

问题场景 #

你写了两段React代码，目标是触发方法后让count增加2，但第一段代码达不到预期，第二段可以：

第一段代码（无效） #

const [count, setCount] = useState(0);

const handleIncrement = () => {
  setCount(count + 1);
  setCount(count + 1);
};

第二段代码（有效） #

const handleIncrement = () => {
  setCount((prevState) => prevState + 1);
  setCount((prevState) => prevState + 1);
};

原因解析 #

第一段代码失效的核心 #

React函数组件里的状态变量是闭包捕获的值，在单次渲染周期内是固定不变的。比如初始渲染时count=0，当你连续调用两次setCount(count+1)，这两次调用里的count都是当前渲染的旧值0，相当于两次都把状态设置为0+1=1。

同时，React会对同一事件循环内的多次状态更新做批量合并，最终只会把状态更新到最后一次的结果（也就是1），所以看起来只加了1。

第二段代码生效的原因 #

当你给setCount传入一个回调函数（函数式更新）时，这个函数不会立即执行，而是会在React准备处理状态更新时被调用，并且自动传入当前最新的状态值作为参数（也就是prevState）：

• 第一次调用回调时，prevState是0，返回0+1=1；
• 第二次调用回调时，prevState已经是刚更新后的1，返回1+1=2；

这两次更新会基于最新状态依次执行，最终count就会增加2。

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