在 React 函数组件中，useState 是最基础的状态管理手段。但当多个更新在异步或并发场景下连续触发时，直接传入新值常常无法累积生效，这一现象让不少业务出现数据偏差。
一、失效问题的直观表现
假设我们有一个计数器，希望在一次点击中连续加三。如果采用普通的值更新方式，结果可能只增加了一次。
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
const handleClick = () => {
// 错误示范：基于闭包中的旧值连续设置
setCount(count + 1);
setCount(count + 1);
setCount(count + 1);
};
return (
<button onClick={handleClick}>当前计数：{count}</button>
);
}
上述代码中，三次 setCount 都读取了同一个渲染闭包里的 count（值为 0），因此最终只执行了 0+1，界面显示为 1 而非 3。
二、为什么异步并发下会失效
React 在事件处理函数中对状态更新进行批处理，多个 setState 不会立即生效，而是合并到下一次渲染。若更新函数依赖外部变量（如闭包中的 count），所有调用拿到的都是本次渲染的旧快照，后面的写入直接覆盖前面的结果。
| 更新方式 | 依赖来源 | 并发安全性 |
|---|---|---|
| 值更新 setCount(x+1) | 渲染闭包变量 | 低，易被覆盖 |
| 函数式更新 setCount(prev => prev+1) | 队列中的前一个状态 | 高，顺序累积 |
三、函数式更新解决方案
将更新改写为接收上一个状态并返回新状态的函数，React 会按顺序把最新状态传给回调，从而避免快照错位。
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
const handleClick = () => {
// 正确示范：使用函数式更新
setCount(prev => prev + 1);
setCount(prev => prev + 1);
setCount(prev => prev + 1);
};
return (
<button onClick={handleClick}>当前计数：{count}</button>
);
}
此时三次调用分别接收到 0、1、2，最终得到 3。即便在异步请求回调中多次更新，只要使用函数式写法，也能保证状态连续正确。
四、实际开发中的注意点
- 在 setTimeout、Promise.then 等异步上下文中更新状态，同样推荐函数式写法。
- 如果新状态完全不依赖旧状态，使用值更新不会有问题，但统一用函数式更新可降低认知成本。
- 多个相互独立的字段应拆成不同的 useState，避免在一个状态对象里手工合并导致遗漏。
函数式更新不是性能优化技巧，而是并发下状态正确性的基本保障。
五、小结
useState 的异步并发失效源于闭包快照共享，函数式更新通过把旧值作为参数传入，使每次计算都基于队列中的真实前态。掌握这一写法，能有效规避计数器、表单批量赋值等场景中的数据丢失问题。