聊聊 useState 的批处理更新机制
结论:同一时机触发的多次
setState会进入同一个更新队列并被批处理为一次渲染;React 18 默认自动批处理覆盖更多异步边界,减少重复 render/commit。
1. 批处理发生在哪里
- dispatch:把 update 追加到
queue.pending(环形链表) - 调度:把多次触发合并到一次 root schedule(常通过 microtask 聚合)
2. 计算 state 的位置
- render 时合并
pending与baseQueue - 按优先级依次应用 update,得到本次
memoizedState
3. 常见追问
- “连续两次 setState 都会生效吗?”:会,取决于 action 是否基于 prev(函数式更新更安全)
- “如何强制立即刷新?”:
flushSync(慎用)