Notes

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 才是最终对外可见的更新点

关联阅读

cd ..