深入浅出 React 源码解读：Fiber 树构建基础准备

React 源码解读：Fiber 树构建（基础准备）

Fiber 树构建是 React 16 中引入的核心概念，它彻底重写了 React 的渲染机制。本系列文章将带你深入剖析 Fiber 树构建的源码，逐层拆解其原理和实现。

宏观视角：Fiber 树构建的定位

从宏观角度来看，Fiber 树构建在 React 体系中占据着举足轻重的地位，与任务调度循环相互依存，共同构建了 React 的执行机制。

任务调度循环

任务调度循环是 React 执行流程的基石。它负责监听浏览器事件、更新状态、触发渲染等一系列操作。在任务调度循环中，每当状态更新时，都会触发一次 Fiber 树构建流程。

Fiber 树构造循环

Fiber 树构建循环是 React 在状态更新后执行的一系列任务。它从根节点开始，逐层遍历虚拟 DOM 树，创建或更新 Fiber 节点，最终生成一棵完整的 Fiber 树。

Fiber 节点是 React 用来表示虚拟 DOM 节点的轻量级结构。它包含了虚拟 DOM 节点的属性、状态等信息，为后续的协调过程提供了基础。

准备工作：搭建环境

在深入源码之前，我们需要做好必要的准备工作：

1. 安装 React 和 ReactDOM。
2. 创建一个 React 项目，并在其中导入 ReactDOM。
3. 创建一个简单的组件，作为 Fiber 树构建的起点。

源码剖析：任务调度循环和 Fiber 树构建循环

任务调度循环

任务调度循环的主体函数是 scheduleUpdateOnFiber，它会在状态更新后被调用。该函数负责：

• 创建一个新的 update 对象，并将其添加到组件的 pendingUpdates 数组中。
• 标记组件为需要更新。
• 调度一个宏任务（setTimeout），执行 performWorkOnRoot 函数，开始 Fiber 树构建。

Fiber 树构建循环

Fiber 树构建循环的主体函数是 performWorkOnRoot。它负责：

• 创建根 Fiber 节点，并将其添加到 workInProgress 数组中。
• 循环遍历 workInProgress 数组，为每个 Fiber 节点执行以下操作：
  • 调和 Fiber 节点及其子节点。
  • 创建或更新子 Fiber 节点。
  • 将子 Fiber 节点添加到 workInProgress 数组中。
• 当 workInProgress 数组为空时，停止循环。

通过上述流程，React 实现了 Fiber 树的构建，为后续的协调过程奠定了基础。

总结

本文作为 Fiber 树构建系列的第一篇，从宏观视角介绍了 Fiber 树构建在 React 体系中的定位，并搭建了源码剖析的环境。后续文章将深入剖析 Fiber 树构建的具体实现，敬请期待。