React 渲染两阶段：Render vs Commit（总览）

一句话结论：React 更新可以拆成两个阶段：Render（计算要改什么） 与 Commit（把变更落到 DOM/宿主环境）；并发能力主要发生在 Render 阶段（可中断/可重做/可丢弃），而 Commit 阶段必须一次性完成（不可中断）。

1. Render 阶段：算“要做什么”

• 输入：state/props 变化
• 过程：遍历 Fiber 树，执行组件函数/生命周期，进行 diff/reconcile
• 输出：一棵 workInProgress Fiber 树 + effect/flags（描述“要如何提交”）

关键性质：

• 可中断：时间切片在这里发生
• 可重做：更高优先级更新到来时，当前 render 可能被丢弃并重来
• 不会触碰真实 DOM：因此用户看不到“半完成”状态

2. Commit 阶段：做“真正的修改”

• 把 Render 阶段计算出的变更一次性提交到宿主环境（DOM）
• 在特定时机执行 effects（layout/passive）

关键性质：

• 不可中断：一旦开始提交，就必须保证一致性
• 影响用户可见结果：DOM 变更、ref 更新、layout effect 等

3. 为什么这个划分对架构师重要？

• 解释并发：为什么可以“中断渲染但不出现中间态”
• 解释 StrictMode：为什么 DEV 下会模拟 mount/unmount（逼你写可重入副作用）
• 解释 Transition/Suspense：为什么某些更新可以延后、某些会 fallback

关联阅读

• 时间切片：../03-concurrent-mode/10-time-slicing.md
• Fiber 树初始构建：../04-fiber/04-initial-mount-build.md
• commitRoot：../05-hooks/14-commitRoot.md