使用useState钩子时计数器未按预期递增的原因咨询

这其实是React状态更新的批量性和闭包捕获值共同作用的结果，咱们一步一步拆解清楚：

1. 同步事件里的批量更新机制 #

React在合成事件（比如onClick这类由React接管处理的事件）中，会把多次状态更新合并成一次批量执行。也就是说，当你在handleSyncUpdate里连续调用两次setCount1时，React不会立刻更新状态并触发重新渲染，而是先把这两个更新任务暂存起来，最后一次性处理。

2. 闭包捕获的是旧状态值 #

你代码里的count1是组件当前渲染周期里的闭包值——也就是初始的0。两次setCount1的计算都是基于这个旧值：

• 第一次setCount1(count1 + 2) → 基于0计算，得到2
• 第二次setCount1(count1 + 1) → 还是基于0计算，得到1

因为是批量更新，后面的更新会覆盖前面的，所以最终状态会被设置成1，这就是你看到<h2>里显示1的原因。

3. 函数式更新为什么能解决问题？ #

当你把更新写成setCount1(count => count + 1)这种函数式的形式时，React会把当前最新的状态值作为参数传给这个回调函数。也就是说：

• 第一次setCount1(count => count + 2) → 拿到当前状态0，更新为2
• 第二次setCount1(count => count + 1) → 拿到刚更新后的状态2，更新为3

这种方式不会依赖闭包里的旧值，而是每次都基于最新的状态计算，所以最终能得到你预期的3。

另外补充一句：React 18之后，自动批处理覆盖了更多场景（包括异步函数、定时器里的更新），所以不管是同步还是异步按钮，只要用普通的状态更新写法，都会遇到类似的闭包问题，而函数式更新是通用的解决方案。

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