React函数组件连续三次调用setCount仅让计数器加1的原因

你的判断是对的，核心原因是React函数组件的state在单次渲染周期内是闭包绑定的固定快照值，不会在同一次执行的同步逻辑里随set调用实时变化。
具体执行逻辑是这样的：

• 点击按钮触发incrementThreeTimes时，整个回调运行在当前组件渲染对应的闭包中，这个闭包里的count值是固定的，初始场景下就是0。
• 三次执行incrementCount时，每一次读到的count都是同一个0，相当于连续调用了三次setCount(0 + 1)。
• React默认会对同一事件回调里的state更新做批处理，三次传入的新值都是1，最终只会触发一次更新，count结果就是1，不会累加。

要拿到连续更新时的最新值，需要用setCount的函数式更新写法，入参是上一次更新完成后的最新state值，不会受当前闭包快照的影响：

const incrementCount = () => {
  setCount(prevCount => prevCount + 1);
};

改完之后三次调用会依次拿到前一次更新的结果：第一次prev是0返回1，第二次prev是1返回2，第三次prev是2返回3，最终就能实现点击加3的预期效果。

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