React 是如何将 Virtual DOM 树转换成 Fiber 树的

yogalin1993
210 阅读3分钟

React 在处理更新和渲染时，会将 Virtual DOM 树 转换为 Fiber 树。Fiber 树是 React 16 引入的核心架构，用于实现高效、可中断的渲染。

下面详细解释 React 是如何将 Virtual DOM 树转换成 Fiber 树的：

一、Fiber 树的基本概念

Fiber 是什么？

  • Fiber 是 React 中的一种数据结构，它是对每个 Virtual DOM 节点的轻量表示。

  • 每个 Fiber 节点（FiberNode）包含以下关键信息：

    • 类型信息（如 div、span 或 React 组件）。
    • 状态信息（如 props、state）。
    • 指针（连接父、子、兄弟节点，形成树结构）。
    • 优先级（用于调度任务）。

Fiber 树是 React 内部用于管理组件和更新的树结构，它对 Virtual DOM 树进行了扩展，适配了 React 的调度机制。

二、从 Virtual DOM 到 Fiber 树的转换过程

  1. 初次渲染：创建 Fiber 树

    • 当 React 解析 JSX（或 Virtual DOM）时，会创建一棵 Fiber 树。
    • React 遍历 Virtual DOM 树中的每个节点，为每个节点生成一个对应的 FiberNode。
    • FiberNode 中包含指向父、子、兄弟节点的指针，形成一个链表结构，便于快速遍历和操作。

Fiber 树的生成过程：

  • React 使用一个递归的构建流程，将 Virtual DOM 树逐步转换为 Fiber 树。

  • 对于每个 Virtual DOM 节点：

    1. 检查节点类型（如原生标签、组件、Fragment 等）。
    2. 根据节点类型创建 FiberNode，并保存必要的信息（如 type 和 props）。
    3. 为当前节点的子节点递归创建对应的 FiberNode。
    4. 连接父、子和兄弟 Fiber 节点。

示例代码：

function App() {
  return (
    <div>
      <h1>Hello, Fiber!</h1>
      <p>This is a demo.</p>
    </div>
  );
}

生成的 Virtual DOM：

{
  type: "div",
  props: {
    children: [
      { type: "h1", props: { children: "Hello, Fiber!" } },
      { type: "p", props: { children: "This is a demo." } },
    ]
  }
}

生成的 Fiber 树（简化版）：

FiberNode(type: "div")
├── child -> FiberNode(type: "h1")
│           ├── child -> FiberNode(type: "Hello, Fiber!")
├── sibling -> FiberNode(type: "p")
              ├── child -> FiberNode(type: "This is a demo.")

  1. 更新时：复用 Fiber 树

    • 在更新过程中，React 并不会重新创建整个 Fiber 树，而是尝试复用现有的 Fiber 节点。

    • React 使用两个 Fiber 树：

      • Current Fiber 树： 当前渲染的树。
      • Work-in-progress Fiber 树： 更新时正在构建的新树。

更新步骤：

  1. Diff 比较 Virtual DOM：

    • React 将新 Virtual DOM 树与当前 Fiber 树进行对比（通过 Diff 算法）。
    • 如果节点相同（例如类型和 key 相同），React 复用旧的 Fiber 节点，只更新需要变化的属性。
    • 如果节点不同，React 创建新的 Fiber 节点。

  2. 构建 Work-in-progress Fiber 树：

    • React 使用 Current Fiber 树作为基础，构建更新后的 Fiber 树。
    • 这个过程是增量的，可以随时暂停和恢复。

三、Fiber 树的结构与特点

  1. 链表形式的树结构：

    • 每个 FiberNode 包含 child、sibling 和 return 指针：

      • child 指向第一个子节点。
      • sibling 指向下一个兄弟节点。
      • return 指向父节点。

    • 这种结构使得 React 能以深度优先遍历的方式高效遍历树，并方便插入和删除节点。

  2. 任务优先级：

    • 每个 FiberNode 包含一个优先级字段（如 lane），表示任务的重要性。
    • React Scheduler 会根据优先级决定任务的执行顺序。

四、从 Virtual DOM 到 Fiber 树的优化点

  1. 渐进式渲染：

    • Fiber 架构支持任务切片，可以暂停低优先级任务，处理用户输入等高优先级任务。

  2. 复用：

    • 在更新中，React 尽量复用旧 Fiber 树中的节点，减少不必要的创建和销毁操作。

  3. 最小化 DOM 操作：

    • React 通过 Fiber 树追踪变更范围，生成最小化的 DOM 操作集合。

总结

React 将 Virtual DOM 转换为 Fiber 树的过程：

  1. 初次渲染： React 遍历 Virtual DOM，递归生成 Fiber 树。
  2. 更新渲染： React 使用 Diff 算法比较 Virtual DOM 和 Fiber 树，复用旧节点并构建新的 Work-in-progress Fiber 树。
  3. Fiber 的优势： 通过链表结构、任务优先级和渐进式更新，React 实现了高效、可中断的渲染。

Fiber 架构是 React 的内核，了解其工作机制能帮助开发者更好地优化性能和排查问题。

avatar
文章
阅读
粉丝