React源码解析-第三部分：协调与提交

图 6：reconcileChildren 子节点比对细节（单节点与多节点）

📝 解析 ：

reconcileChildren 是整个协调阶段最核心的函数。对于单节点 ，比较 type 和 key 决定复用还是替换。对于多节点（数组） ，是否使用 key 导致算法分叉：有 key 时采用三阶段优化算法 （移动、新增、删除），时间复杂度 O(n)；无 key 时则退化到按索引遍历，容易因顺序错乱导致大量子组件重新挂载。

图 7：提交阶段（Commit Phase）的三个子阶段

📝 解析 ：

提交阶段被拆分为三个严格的同步子阶段，不可中断：

1. Before Mutation：在 DOM 变更前读取状态（如滚动位置），此阶段可安全访问旧的 DOM。

2. Mutation ：执行所有 DOM 操作（增删改），并将 ref 更新为指向新 DOM。

3. Layout ：立即执行 useLayoutEffect 和类组件的 componentDidMount/Update。

   这三个阶段保证了副作用执行的确定性，且 useLayoutEffect 的同步阻塞特性使其适用于读取布局尺寸。

图 8：类组件生命周期 & 函数组件 Hooks 的执行时序

📝 解析 ：

这张图厘清了类组件与函数组件的时序等价关系 。

关键区别 ：useEffect 的回调在浏览器绘制之后异步执行 （不阻塞屏幕更新），而 useLayoutEffect 与类组件的 componentDidMount 在绘制前同步执行 。getSnapshotBeforeUpdate 返回的值会作为 componentDidUpdate 的第三个参数，常用于记录滚动位置。