在 React 中，一次状态更新并不是立即同步到组件并触发重渲染的。React 内部会维护一个更新队列（Update Queue），将连续的状态更新收集起来，然后在合适的时机批量处理这些更新，最终计算出最新的状态并一次性触发重渲染。理解这套机制对避免常见的状态陷阱和性能问题至关重要。
6.3.1 一次 setState 调用到底发生了什么？
无论是类组件的 this.setState 还是函数组件的 useState 返回的 setter 函数，调用它们并不会立刻改变当前状态值，而是创建一个待处理的更新对象，放入对应 Hook 或组件实例的更新队列中。在 React 的调度机制下，这些更新会在下一次渲染阶段被串行处理。
function Counter() {
const [count, setCount] = useState(0);
const handleClick = () => {
setCount(count + 1);
console.log(count); // 还是旧值
};
}在同一个事件处理函数中，count 会一直保持当前渲染帧的快照值，不会因为 setCount 的调用而立即变化。
6.3.2 更新队列的处理过程
每个状态 Hook 对应一条单向链表结构的更新队列。当多次调用 setter 时，更新对象会被依次挂在链表尾部。在组件重新渲染时，React 会遍历该链表，依次计算出新的状态。
对于如下代码：
function Counter() {
const [count, setCount] = useState(0);
const handleClick = () => {
setCount(count + 1); // 更新对象：{ action: 1 }
setCount(count + 1); // 更新对象：{ action: 1 }
};
}在 handleClick 内部，两次 setCount(count + 1) 都基于组件当前渲染时的 count 值（0）来计算。它们各自产生的更新对象链表如下：
baseState: 0
更新1: 0 + 1 = 1
更新2: 0 + 1 = 1
最终状态: 1最终 count 会变成 1，而不是 2。这是因为两次更新的 action 都是具体的值 1，而不是依赖前一个状态的更新函数。
6.3.3 函数式更新：突破闭包限制
如果你希望每次更新都基于前一个更新处理后的最新状态来计算，应该使用函数式更新语法：
setCount(prevCount => prevCount + 1);React 在遍历更新队列时，会将上一次计算出的状态作为 prevCount 传入下一个更新函数：
baseState: 0
更新1: prev => prev + 1 → 0 + 1 = 1
更新2: prev => prev + 1 → 1 + 1 = 2
最终状态: 2这样两次更新就能正确累加。建议：当新状态依赖于旧状态时，始终使用函数式更新，避免闭包过期带来的不可预测结果。
6.3.4 批量更新（Batching）机制
React 会对同一个执行上下文中的多次状态更新进行批量处理，只触发一次重渲染。在 React 17 及之前，这种批处理主要发生在合成事件（如 onClick、onChange）和生命周期钩子中，而在 setTimeout、Promise、原生事件等异步回调中则不会自动批处理，导致额外的重渲染。
React 18 引入了 自动批处理（Automatic Batching）：无论是在合成事件、setTimeout、Promise 还是原生事件中，多次状态更新都会被自动合并成一次重渲染。
function App() {
const [count, setCount] = useState(0);
const [flag, setFlag] = useState(false);
const handleClick = () => {
setTimeout(() => {
// React 18 中，即使放在 setTimeout 里，也会自动批处理
setCount(c => c + 1);
setFlag(f => !f);
// 只会触发一次重渲染
}, 1000);
};
}这在以前需要手动包裹 unstable_batchedUpdates（React 17）才能实现。React 18 默认启用了 createRoot，自动获得此能力，极大简化了性能优化。
6.3.5 状态合并规则
在类组件中，this.setState 会浅合并新的状态对对象到当前状态中：
this.state = { user: 'Alice', age: 25 };
this.setState({ age: 26 }); // 最终 state: { user: 'Alice', age: 26 }函数组件的 useState 则不会自动合并，需要用展开运算符手动合并，或者将相关状态拆分成多个独立的 useState：
// 不会自动合并
const [state, setState] = useState({ user: 'Alice', age: 25 });
setState({ age: 26 }); // 结果：{ age: 26 }，user 丢失
// 正确做法：手动合并
setState(prev => ({ ...prev, age: 26 }));通常更推荐将状态拆分为多个独立的 useState（或使用 useReducer），避免对象合并带来的心智负担。
6.3.6 更新优先级与中断
在并发模式下，更新可以被标记为不同的优先级。React 使用 Lane 模型管理优先级，低优先级的更新可能会被高优先级更新打断并重新排队。这使得更新队列的处理不总是连续一次性完成，但有统一的规则来保证最终状态的一致性。开发者通常不需要关心底层细节，只需理解：同一合成事件中的所有更新会被视为同一批且不可中断。
小结
setState/useState更新不是同步生效，而是加入更新队列。- 更新队列用链表存储，按顺序依次计算新状态。
- 使用具体的值会依赖渲染快照；依赖旧值时应使用函数式更新。
- React 18 自动批量处理所有异步上下文中的状态更新，减少不必要的重渲染。
useState不自动合并对象，需要手动处理或拆分状态。
理解这些规则可以帮助你写出行为可预测且高性能的 React 组件。