React 更新机制概述
一句话结论:一次更新从“调度(schedule)→ 渲染(render/reconcile)→ 提交(commit)”走完;Diff 主要发生在 render 阶段,用于生成新的 Fiber 树与副作用标记。
1. 三段式流水线
- schedule:分配 lane,标记 root/pendingLanes,安排回调(可能批处理)
- render:构建 workInProgress 树,执行 reconcile(Diff),收集 flags
- commit:根据 flags 一次性更新 DOM,并执行 layout/passive effects
2. Diff 到底在比什么
- 比较“同一层级的子节点集合”是否能复用旧 Fiber
- 复用的前提:key 与 type(以及一些形态)匹配
3. 并发下的关键边界
- render 可中断/可重做:Diff 的中间结果可能被丢弃
- commit 才是最终对外可见的更新点