【图】React源码解析-第三部分:协调与提交

99 阅读1分钟

React源码解析 宏观架构 (3).png

reconcileChildren 子节点比对细节(单节点与多节点)

deepseek_mermaid_20260706_fcd09e.png

reconcileChildren 是整个协调阶段最核心的函数。

  • 对于单节点,比较 type 和 key 决定复用还是替换。
  • 对于多节点(数组) ,是否使用 key 导致算法分叉:有 key 时采用三阶段优化算法(移动、新增、删除),时间复杂度 O(n);无 key 时则退化到按索引遍历,容易因顺序错乱导致大量子组件重新挂载。

提交阶段(Commit Phase)的三个子阶段

deepseek_mermaid_20260706_8abaff.png

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

  1. Before Mutation:在 DOM 变更前读取状态(如滚动位置),此阶段可安全访问旧的 DOM。
  2. Mutation:执行所有 DOM 操作(增删改),并将 ref 更新为指向新 DOM。
  3. Layout:立即执行 useLayoutEffect 和类组件的 componentDidMount/Update

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

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

deepseek_mermaid_20260706_4b723a.png

这张图厘清了类组件与函数组件的时序等价关系
关键区别useEffect 的回调在浏览器绘制之后异步执行(不阻塞屏幕更新),而 useLayoutEffect 与类组件的 componentDidMount 在绘制前同步执行getSnapshotBeforeUpdate 返回的值会作为 componentDidUpdate 的第三个参数,常用于记录滚动位置。