最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
【图】React源码解析-第三部分：协调与提交
时间：2026-09-04 19:19:48 编辑：袖梨 来源：一聚教程网
在前端开发内容学习中，【图】React源码解析-第三部分：协调与提交是常见主题。很多人在阅读时会遇到概念分散、步骤不清和注意点难以归纳的问题。本文按照基础概念、操作流程和关键细节，对相关内容进行整理。
reconcileChildren 子节点比对细节（单节点与多节点）
reconcileChildren 是整个协调阶段最核心的函数。
- 对单节点，比较
type和key决定复用还是替换。 - 对多节点（数组） ，是否使用
key导致算法分叉：有key时采用三阶段优化算法（移动、新增、删除），时间复杂度 O(n)；无key时则退化到按索引遍历，容易因顺序错乱导致大量子组件重新挂载。
提交阶段（Commit Phase）的三个子阶段
提交阶段被拆分为三个严格的同步子阶段，不可中断：
- Before Mutation：在 DOM 变更前读取状态（如滚动位置），此阶段可安全访问旧的 DOM。
- Mutation：执行所有 DOM 操作（增删改），并将
ref更新为指向新 DOM。 - Layout：立即执行
useLayoutEffect和类组件的componentDidMount/Update。
这三个阶段保证了副作用执行的确定性，且 useLayoutEffect 的同步阻塞特性使其适用于读取布局尺寸。
类组件生命周期 & 函数组件 Hooks 的执行时序
这张图厘清了类组件与函数组件的时序等价关系。
关键区别：useEffect 的回调在浏览器绘制之后异步执行（不阻塞屏幕更新），而 useLayoutEffect 与类组件的 componentDidMount 在绘制前同步执行。getSnapshotBeforeUpdate 返回的值会作为 componentDidUpdate 的第三个参数，常用于记录滚动位置。