Notes

Fiber 树初始构建过程

一句话结论:初次挂载(mount)会从 HostRoot 开始生成 workInProgress 树,完成后进入 commit 把 DOM 创建/插入;之后的更新则在“复用 Fiber + diff”中完成。

1. 从 createRoot/render 开始

  • 创建 root(FiberRootNode)并生成 HostRoot Fiber
  • render(<App />) 触发一次更新:把 ReactElement 放进更新队列并调度

2. render 阶段:构建 workInProgress

  • workLoop 深度优先遍历:
    • beginWork:根据 element/props/state 生成子 Fiber(reconcile)
    • completeWork:为 Host 组件准备宿主节点、收集 flags

3. commit 阶段:一次性落地

  • 创建/插入 DOM、更新属性、挂载 ref
  • 触发生命周期与 Effect(Layout/Passive)

关联阅读

cd ..