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)