React快速连续点击会不会导致状态更新错误？

本文共计666个文字，预计阅读时间需要3分钟。

当然可以，请您提供需要改写的原文，我会按照您的要求进行修改。

在 React 函数组件中，使用 useState 更新状态时，若直接依赖当前 state 值（如 setCount(count + 1)），看似存在“竞态风险”：当用户极快连续点击按钮，两次 onClick 回调可能都基于渲染时的旧 count 值（例如均为 0），从而导致最终状态只增加 1 而非 2。

但实际运行中，该代码完全安全，不会出现计数错误。原因在于 React 的 自动批处理（Automatic Batching） 机制（自 React 18 起默认启用，且对事件处理器中的状态更新全面覆盖）：

• 所有在同一个浏览器事件循环内触发的 setState 调用（包括多次 setCount）会被 React 自动合并为一次批量更新；
• React 不会立即应用每个 setCount(count + 1)，而是收集所有更新，基于最新 state 计算最终值（即：先读取初始 count = 0，再执行两次 +1，得到 2）；
• 最终仅触发一次 re-render，UI 正确显示 "You clicked 2 times"。

✅ 正确写法（推荐，显式声明更新逻辑，不依赖闭包）：

<button onClick={() => setCount(prev => prev + 1)}> Click me </button>

此写法使用函数式更新（prev => prev + 1），明确表达“基于上一次状态计算新值”，即使在非批处理环境（如原生事件、setTimeout 中）也绝对安全。