commitRoot

一句话结论：commitRoot 把 render 的计算结果一次性提交到宿主环境，并按顺序执行“DOM 变更 + Layout Effect + Passive Effect”；commit 不可中断，保证 UI 一致性。

1. commit 的三个关键阶段（直觉）

• Before Mutation：读取 DOM 的前置工作（如 getSnapshotBeforeUpdate）
• Mutation：创建/插入/删除 DOM，更新属性与 ref
• Layout：同步执行 useLayoutEffect 与部分生命周期

2. Passive Effect（useEffect）为什么单独处理

• 避免阻塞绘制：通常在 commit 后异步调度执行
• 需要先执行上一次的 destroy，再执行本次的 create

3. 与并发的边界

• render 可重做/可丢弃；commit 只发生在“确定要展示”的那一次
• 这也是并发下 UI 不会出现半成品的原因

关联阅读

• 附录：flags
• useEffect 与 useLayoutEffect 的区别