先梳理一个大纲,后续再完善细节。
- 创建 Update 和 Lane
- 从当前 fiber 向上合并 Lane 到各层级 fiber.childLanes,以及将 Lane 合并到 root.pendingLanes 中。
- 将 Update 入队到当前 fiber.updateQueue
- 随着 Schedule 调度,进入 Render/Commit 阶段
- Render 阶段,遍历 fiber tree 构建 workInProgress tree
- “捕获”阶段(performUnitOfWork):update → state → ReactElement → fiber
- “冒泡”阶段(completeUnitOfWork):对于 HostComponent 创建 DOM 放到 fiber.stateNode 或者计算变化的属性 放到 fiber.updateQueue 中。
- Commit 阶段,执行 DOM 更新,这里也是一个“捕获/冒泡”的过程。
- 向下“捕获”,并在“捕获”的过程中,对 fiber.deletions.length > 0 的 fiber 执行子节点删除操作。
- 当 fiber.subtreeFlags & MutationMask === NoFlags 时,结束“捕获”进入“冒泡”执行 DOM 更新操作。