React Overview

95 阅读1分钟

先梳理一个大纲,后续再完善细节。

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