1. 背景与问题场景
1.1 React 异步并发更新的痛点
在现代前端开发中，React 的并发渲染能力给用户体验带来显著提升，但也带来新的挑战，特别是在异步并发更新场景下。当多个事件源同时更新同一个状态时，容易出现状态被覆盖的现象，导致 UI 显示的并非任一时刻的正确结果。理解这类问题的根源，是实现稳定界面的第一步。
随着应用规模的增大，竞态条件在多组件之间的状态传递中变得更加普遍。若一个更新依赖于之前的值，而之前的值在等待中被其他更新改变，后续更新就有可能建立在过时的快照之上，从而产生错乱的行为。
本节要点在于认识到：在异步并发更新场景中，单纯依赖初始状态进行拼接的做法容易导致不可预期的结果。因此，本文将通过函数式更新与相关模式，展示如何“由内而外”地解决这一问题，达到彻底而稳健的效果。
2. 函数式更新的核心思想
2.1 函数式更新的定义与原理
所谓<强>函数式更新，指将 setState 的参数从直接的状态值改为一个更新函数，该函数接收prevState，返回新的状态值。通过这种方式，更新始终以当前最近的状态为基础进行计算，有效避免由于闭包缓存的旧值而导致的状态错乱。
在 React 的并发渲染模型中，多个更新可能在几乎同一时间被排队执行，若仍旧使用直接对象拼接的方式，就容易出现“后更新覆盖先更新”的情况。将更新写成 prev => newState 的形式，可以确保每一次更新都以最新的 prevState为起点，维持状态的一致性。
实际场景中，泛用的做法是将需要基于旧状态计算的新值，统一改写为函数形式，例如：setState(prev => ({...prev, key: value}))，从而实现对多字段的安全更新。
3. 在 React 异步并发更新中应用函数式更新的实战
3.1 实战要点与实现步骤
要点一：识别所有基于前一个状态计算新值的更新点，将它们改写为函数形式，以确保每次更新都读取到最新的状态快照。
要点二：避免直接对对象进行浅拷贝后赋值，改为使用函数式更新来逐步合并变化，防止其他字段在并发更新中被覆盖。
要点三：如状态结构较为复杂，考虑使用 useReducer 来集中管理变更逻辑，并在分发事件时保持一致性。
// 错误示例：直接基于旧 state 拼接，可能导致覆盖
const [state, setState] = React.useState({ a: 0, b: 0 });function incA() {setState({ ...state, a: state.a + 1 });
}
function incB() {setState({ ...state, b: state.b + 1 });
}// 异步并发触发
setTimeout(incA, 0);
setTimeout(incB, 0);
通过将更新改写为函数式形式，可以确保每次更新都从当前最新的状态出发，避免覆盖与错位。
// 正确示例：使用函数式更新
const [state, setState] = React.useState({ a: 0, b: 0 });function incA() {setState(prev => ({ ...prev, a: prev.a + 1 }));
}
function incB() {setState(prev => ({ ...prev, b: prev.b + 1 }));
}// 异步并发触发
setTimeout(incA, 0);
setTimeout(incB, 0);
要点四：如果状态更新涉及多步复杂逻辑，优先考虑 useReducer，将变更逻辑集中在一个 reducer 中，进一步降低并发带来的不确定性。
3.2 使用 useReducer 的策略
当状态树较大、更新规则较复杂时，useReducer 能帮助你将更新逻辑抽象为纯函数，提升可维护性和可预测性。通过分发 action 来驱动状态演化，哪怕在异步更新中，派发的顺序与最终状态是一致的，从而避免了竞争条件带来的问题。
// 使用 useReducer 的策略示例
const initialState = { a: 0, b: 0 };function reducer(state, action) {switch (action.type) {case 'INCR_A':return { ...state, a: state.a + 1 };case 'INCR_B':return { ...state, b: state.b + 1 };default:return state;}
}function SampleComponent() {const [state, dispatch] = React.useReducer(reducer, initialState);function incA() { dispatch({ type: 'INCR_A' }); }function incB() { dispatch({ type: 'INCR_B' }); }// 可能在异步场景中触发setTimeout(incA, 0);setTimeout(incB, 0);return (A: {state.a}
B: {state.b}
);
}
综合来看，函数式更新为解决 React 异步并发更新中的状态覆盖提供了一条直接而高效的路径；在更复杂的场景下，useReducer 提供了更清晰的状态转移模型，减少了由原始 setState 组合带来的歧义。
