Notes

聊聊 useState 的批处理更新机制

结论:同一时机触发的多次 setState 会进入同一个更新队列并被批处理为一次渲染;React 18 默认自动批处理覆盖更多异步边界,减少重复 render/commit。

1. 批处理发生在哪里

  • dispatch:把 update 追加到 queue.pending(环形链表)
  • 调度:把多次触发合并到一次 root schedule(常通过 microtask 聚合)

2. 计算 state 的位置

  • render 时合并 pendingbaseQueue
  • 按优先级依次应用 update,得到本次 memoizedState

3. 常见追问

  • “连续两次 setState 都会生效吗?”:会,取决于 action 是否基于 prev(函数式更新更安全)
  • “如何强制立即刷新?”:flushSync(慎用)

关联阅读

cd ..