Fiber 节点的本质：为什么 React 需要将虚拟 DOM 转换为具备双向链表结构的 Fiber 树？

各位同仁、技术爱好者们，大家好！

今天，我们来深入探讨 React 核心机制中的一个至关重要的概念：Fiber。我们将聚焦于一个核心问题：为什么 React 需要将我们熟悉的虚拟 DOM 转换为一种具备双向链表结构的 Fiber 树？这不仅仅是一个数据结构的选择，它深刻地影响了 React 渲染的性能、用户体验以及未来发展方向。

一、引言：React 性能优化的挑战与 Fiber 的诞生背景

在 Fiber 架构出现之前，React 的协调器（Reconciler）是基于“栈”（Stack）模型的。这个模型在处理组件树更新时，采用的是一种递归遍历的方式。让我们先回顾一下这种传统模型所面临的挑战。

1.1 传统虚拟 DOM 协调器的局限性 (Stack Reconciler)

想象一下，当你的 React 应用状态发生变化时，虚拟 DOM 会被重新生成，然后旧的虚拟 DOM 树和新的虚拟 DOM 树进行对比（即 Diff 算法）。这个对比过程，以及随后将差异应用到真实 DOM 的过程，在 Stack Reconciler 中是同步且不可中断的。

• 同步、不可中断的更新： 一旦更新开始，React 会一口气遍历整个组件树，计算出所有需要变更的部分，直到完成所有工作。这意味着，如果组件树非常庞大，或者某个组件的渲染逻辑非常复杂，这个同步过程可能会持续数百毫秒甚至更久。
• 长时间任务阻塞主线程： JavaScript 是单线程的。当 React 在执行这种长时间的同步更新任务时，它会完全霸占主线程。此时，浏览器无法响应用户的输入（点击、滚动）、无法执行动画、无法处理网络请求回调，导致页面出现明显的卡顿、无响应，用户体验急剧下降。
• 动画卡顿，用户体验下降： 动画通常需要在每一帧（大约 16ms）内完成更新，以保证流畅性。如果一个 React 更新任务耗时超过 16ms，它就会导致动画掉帧，看起来非常不流畅。
• 缺乏优先级调度能力： 在 Stack Reconciler 中，所有的更新都被视为同等重要。一个不重要的背景数据更新，可能会和用户输入、动画等高优先级任务抢占主线程，从而导致关键的用户交互体验受损。例如，用户正在输入文本，同时后台数据更新触发了一个大型组件树的重渲染，用户的输入可能会因此延迟。

为了解决这些根本性的问题，React 团队不得不对协调算法进行彻底的重写，这就是 Fiber 诞生的核心驱动力。

二、Fiber 的核心理念：可中断的工作与增量渲染

Fiber 是 React 协调器（Reconciler）的全新实现。它不是一个全新的概念，而是对现有调和算法的底层重构，旨在解决 Stack Reconciler 的所有痛点。

2.1 什么是 Fiber？对协调算法的彻底重写

从字面意义上看，"Fiber" 指的是“纤维”或“纤程”，它代表了 React 内部的一个工作单元。每一个 Fiber 节点都对应着一个 React 元素（或组件），但它比虚拟 DOM 节点包含了更多的信息，并且能够被 React 调度器管理。

Fiber 架构的核心目标是：

• 实现时间切片 (Time Slicing)： 将一个大的渲染任务拆分成许多小的、可中断的工作单元。这样，React 可以在执行一部分工作后，将控制权交还给浏览器，让浏览器处理高优先级的任务（如用户输入、动画），然后再恢复 React 的工作。
• 优先级调度 (Prioritization)： 允许 React 为不同的更新任务分配不同的优先级。高优先级的任务（如用户输入）可以打断低优先级的任务（如后台数据更新），优先完成渲染，从而确保关键用户体验的流畅性。
• 并发模式 (Concurrent Mode)： 这是 Fiber 最终要实现的目标，允许 React 在后台同时准备多个版本的 UI，而不会阻塞主线程。

2.2 如何解决旧有问题：将工作拆分为小单元，按需执行

Fiber 架构将整个渲染过程分解为两个主要阶段：

1. 渲染/协调阶段 (Render/Reconciliation Phase)： 这个阶段是可中断的。React 会遍历组件树，执行组件的 render 方法，计算出新的虚拟 DOM 树，并与旧的树进行对比，找出差异。这个过程不会直接修改 DOM，而是构建一个“副作用列表”（Effect List），标记出需要对 DOM 进行哪些操作（添加、删除、更新）。
2. 提交阶段 (Commit Phase)： 这个阶段是不可中断的。React 会遍历在渲染阶段生成的副作用列表，将所有变更一次性应用到真实 DOM 上。

通过这种两阶段设计，React 能够在渲染阶段灵活地暂停和恢复工作，从而实现了时间切片和优先级调度。而这一切的基础，正是 Fiber 节点独特的数据结构。

三、Fiber 节点的数据结构：构建可遍历的树与链表

Fiber 不仅仅是虚拟 DOM 的简单映射，它是一个工作单元，包含了组件的所有相关信息以及调度信息。每个 Fiber 节点都代表了 React 树中的一个“元素”——它可以是一个 DOM 元素（如 <div>）、一个类组件实例、一个函数组件调用等等。

3.1 Fiber 节点的核心属性

一个 Fiber 节点包含了大量的属性，这些属性共同构建了 Fiber 树，并支撑了协调器的运作。以下是一些关键属性：

属性名称	类型/描述	作用
tag	number	标记 Fiber 节点的类型，例如：FunctionComponent (0), ClassComponent (1), HostRoot (3, 应用的根节点), HostComponent (5, DOM 元素如 div), HostText (6, 文本节点)。调度器根据此 tag 决定如何处理该 Fiber。
type	any (function, string, object)	对应 React 元素的 type 属性，即组件类型（如 MyComponent 函数/类）或 DOM 标签字符串（如 'div'）。
stateNode	any (DOM element, component instance, null)	存储与 Fiber 关联的实例。对于 HostComponent，它指向真实的 DOM 元素；对于 ClassComponent，它指向组件实例；对于 FunctionComponent，它通常为 null。
return	Fiber	指向当前 Fiber 节点的父 Fiber 节点。这个指针是实现“向上遍历”的关键，它允许协调器在处理完所有子节点后返回到父节点，而无需依赖 JavaScript 的调用栈。
child	Fiber	指向当前 Fiber 节点的第一个子 Fiber 节点。这是“向下遍历”的起点。
sibling	Fiber	指向当前 Fiber 节点的下一个兄弟 Fiber 节点。这是“向右遍历”的关键，它将同一父节点下的所有子节点链接成一个单向链表。
pendingProps	object	从 React 元素中接收到的新 props。
memoizedProps	object	上一次渲染成功后，用于生成输出的 props。用于比较 pendingProps，判断是否需要更新。
updateQueue	object	存储与该 Fiber 相关的状态更新（如 setState）和副作用（如 useEffect 的清理函数）。
effectTag	number	一个位掩码 (bitmask)，标记该 Fiber 节点需要执行的副作用类型（例如：Placement 表示需要插入 DOM，Update 表示需要更新 DOM，Deletion 表示需要删除 DOM）。在 Commit 阶段，React 会根据 effectTag 来执行相应的 DOM 操作。
nextEffect	Fiber	在 Commit 阶段，所有带有 effectTag 的 Fiber 节点会被链接成一个单向链表（Effect List）。nextEffect 指向链表中的下一个有副作用的 Fiber 节点。这个链表只包含有副作用的节点，大大提高了 Commit 阶段的遍历效率。
alternate	Fiber	指向“当前树”（current tree）中对应的 Fiber 节点（如果当前 Fiber 节点属于“工作树”）。或者指向“工作树”（workInProgress tree）中对应的 Fiber 节点（如果当前 Fiber 节点属于“当前树”）。它在 current 和 workInProgress 树之间提供桥梁，用于在更新过程中比较新旧节点，并最终交换树。
lanes	number	优先级信息，用于调度器的任务优先级管理。

3.2 代码示例：简化版 FiberNode 结构

为了更好地理解，我们可以用一个简化版的 JavaScript 类来表示 Fiber 节点：

// 定义 Fiber 节点的类型常量
const FunctionComponent = 0;
const ClassComponent = 1;
const HostRoot = 3; // 应用的根节点，通常是 ReactDOM.render 的目标
const HostComponent = 5; // DOM 元素，如 div, span
const HostText = 6; // 文本节点

// 定义副作用类型常量（位掩码）
const Placement = 0b001; // 插入
const Update = 0b010;    // 更新
const Deletion = 0b100;  // 删除

class FiberNode {
    constructor(tag, pendingProps, key) {
        // 结构信息
        this.tag = tag;             // Fiber 节点的类型 (e.g., FunctionComponent, HostComponent)
        this.key = key;             // React 元素的 key 属性
        this.type = null;           // 对应组件的类型或 DOM 标签 (e.g., MyComponent, 'div')

        // 连接到父、子、兄弟节点，形成树和链表结构
        this.return = null;         // 指向父 Fiber 节点
        this.child = null;          // 指向第一个子 Fiber 节点
        this.sibling = null;        // 指向下一个兄弟 Fiber 节点

        // 状态信息
        this.pendingProps = pendingProps; // 新的 props
        this.memoizedProps = null;  // 上一次渲染的 props
        this.stateNode = null;      // 真实 DOM 节点或组件实例

        // 更新和副作用信息
        this.updateQueue = null;    // 存储更新队列
        this.effectTag = 0;         // 副作用标记 (Placement, Update, Deletion等)
        this.nextEffect = null;     // 指向下一个有副作用的 Fiber 节点 (Effect List)

        // 优先级信息
        this.lanes = 0;

        // 双缓冲机制：指向在另一棵树中对应的 Fiber 节点
        this.alternate = null;
    }
}

// 示例：创建一个 HostComponent Fiber 节点
// const divFiber = new FiberNode(HostComponent, { className: 'container' });
// divFiber.type = 'div';

// 示例：创建一个 FunctionComponent Fiber 节点
// const MyComponent = () => <div>Hello</div>;
// const funcFiber = new FiberNode(FunctionComponent, { name: 'World' });
// funcFiber.type = MyComponent;

从这个结构中，我们可以清晰地看到 return、child、sibling 这三个指针，它们是构建 Fiber 树和链表结构的关键。

四、为什么需要 child, sibling, return 构成的“双向链表”结构？

这是我们今天讨论的核心。这三个指针，连同 alternate 指针，共同构成了 Fiber 架构的骨架。它们不仅仅是简单的树结构连接，更是实现可中断、可恢复、无栈（stackless）遍历算法的基石。

4.1 替代调用栈：传统递归遍历的弊端与迭代遍历的优势

在 Stack Reconciler 中，React 使用 JavaScript 的函数调用栈来遍历组件树。当你调用 render 函数处理一个父组件时，它会递归地调用其子组件的 render 函数。这种递归在逻辑上很直观，但它有一个致命的缺点：一旦递归开始，就无法中断。浏览器主线程被深度嵌套的函数调用栈所阻塞，直到最深层的子组件渲染完成并逐层返回。

Fiber 架构的目标是实现可中断的渲染。要做到这一点，就不能依赖于不可中断的 JS 调用栈。Fiber 采用了一种迭代的、基于指针的遍历方式，它将“遍历”和“处理工作”解耦。

• child 指针：向下遍历

  • 当一个 Fiber 节点被处理时，协调器会首先尝试通过 child 指针找到它的第一个子节点，并将其作为下一个工作单元。
  • 这就像从树的根部开始，沿着左侧分支一直向下。

• sibling 指针：向右遍历

  • 当一个 Fiber 节点的所有子节点都被处理完毕后，协调器会尝试通过 sibling 指针找到它的下一个兄弟节点。
  • 这就像在一个层级中，从左到右处理同级的元素。

• return 指针：向上追溯，完成工作

  • 这是最关键的指针之一。当一个 Fiber 节点没有子节点，也没有兄弟节点时，意味着这个节点及其所有子树的工作已经完成。
  • 此时，协调器会通过 return 指针回到它的父节点，告诉父节点：“我的子树工作已经完成，你可以继续处理我的兄弟节点，或者如果我是最后一个子节点，你也可以完成你自己的工作了。”
  • return 指针使得协调器能够在不依赖 JavaScript 调用栈的情况下，向上回溯到父节点，从而实现了“无栈”的迭代遍历。

这三个指针共同构成了一个可以自由向上、向下、向右移动的结构，从而模拟了递归遍历的行为，但又提供了中断和恢复的能力。我们可以把它想象成一个由这些指针连接起来的“工作链表”，协调器在这个链表上移动，每次处理一个 Fiber 单元。

4.2 实现工作单元的切换：nextUnitOfWork 机制

在 Fiber 调度器中，有一个核心变量叫做 nextUnitOfWork。它始终指向下一个需要处理的 Fiber 节点。

整个渲染阶段的工作流程可以概括为：

1. 从 nextUnitOfWork 开始处理一个 Fiber 节点。
2. 处理完当前 Fiber 节点后，根据 child、sibling、return 指针更新 nextUnitOfWork，指向下一个要处理的 Fiber。
3. 重复这个过程，直到 nextUnitOfWork 为 null（表示所有工作完成），或者时间切片用尽（此时将控制权交还给浏览器，等待下次调度）。

这个迭代过程，完全依赖于 Fiber 节点之间的这些指针连接，实现了“深度优先搜索”的遍历，但又可以随时中断。

4.3 工作树 (Work-in-Progress Tree)：alternate 指针的作用

Fiber 架构引入了“双缓冲”（Double Buffering）机制。在任何时候，内存中都会存在两棵 Fiber 树：

1. Current Tree (当前树)： 对应于浏览器中当前渲染的 UI。
2. Work-in-Progress Tree (工作树)： 在渲染阶段，React 会在后台构建或更新这棵树。它是一个“草稿”版本，反映了即将要渲染的 UI。

alternate 指针在 current 树和 workInProgress 树之间建立了一一对应的关系。

• 当 React 开始一个新的渲染周期时，它会从 current 树的根节点开始，为每个 current 节点创建（或复用）一个对应的 workInProgress 节点。
• current.alternate 会指向对应的 workInProgress 节点，反之亦然。
• 在渲染阶段，所有的计算、Diff、副作用标记都是在 workInProgress 树上进行的。
• 只有当 workInProgress 树完全构建并准备好后，它才会在提交阶段（Commit Phase）与 current 树进行交换：workInProgress 树成为新的 current 树，然后被渲染到真实 DOM。

这个双缓冲机制保证了 UI 的原子性更新。用户永远只能看到一个完整的、一致的 UI 状态，而不会看到中间的、不完整的渲染过程。

4.4 总结“双向链表”的意义

虽然 Fiber 树从宏观上看是棵树，但其内部的遍历机制，特别是 child、sibling、return 指针的组合，使其具备了链表的特性。

• child 和 sibling 将同一层级的节点连接成一个单向链表，同时也连接了父子关系。
• return 指针则提供了从子节点向上回溯到父节点的能力。
• 这种向上（return）、向下（child）、向右（sibling）的自由移动能力，使得 Fiber 树的遍历可以不依赖于 JavaScript 的调用栈。这正是实现时间切片和优先级调度的关键，因为我们可以随时暂停当前的工作，保存 nextUnitOfWork 的状态，然后在需要时恢复。

五、Fiber 协调器的核心算法流程：渲染与提交两阶段

理解 Fiber 节点结构后，我们来看看它是如何在实际的协调算法中运作的。整个过程分为渲染（Reconciliation）和提交（Commit）两个主要阶段。

5.1 阶段一：渲染/协调阶段 (Render/Reconciliation Phase)

这个阶段的主要目标是构建 workInProgress Fiber 树，并标记出所有需要执行的副作用 (effectTag)。它是可中断的，也是实现时间切片和优先级调度的关键。

5.1.1 可中断、可暂停：核心特性

React 会在一个循环中处理 Fiber 节点，这个循环被称为“工作循环”（Work Loop）。每次循环处理一个 nextUnitOfWork。

// 简化的工作循环伪代码
let nextUnitOfWork = rootFiber; // 从根 Fiber 开始

function workLoop(deadline) { // deadline 参数来自 requestIdleCallback 或 Scheduler
    // 检查是否有更高优先级的任务，或者时间切片是否用尽
    while (nextUnitOfWork !== null && deadline.timeRemaining() > 0) {
        nextUnitOfWork = performUnitOfWork(nextUnitOfWork);
    }

    // 如果还有未完成的工作
    if (nextUnitOfWork !== null) {
        // 请求浏览器在空闲时再次调用 workLoop
        requestIdleCallback(workLoop); // 或使用 React 自己的 Scheduler
    } else {
        // 所有工作完成，进入 Commit 阶段
        commitRoot(rootFiber.alternate); // 提交 workInProgress 树
    }
}

// 启动工作循环
// requestIdleCallback(workLoop); // 通常由 React 内部的 Scheduler 管理

在这个 workLoop 中，deadline.timeRemaining() 是关键。React 会在每个时间切片内（例如 5ms）尽可能多地处理 Fiber 节点。如果时间用尽，它就会暂停，将控制权交还给浏览器。当浏览器再次空闲时，React 会从上次中断的地方继续 nextUnitOfWork。

5.1.2 主要任务：构建 workInProgress Fiber 树，标记副作用

每个 Fiber 节点在渲染阶段都会经历两个主要过程：beginWork 和 completeWork。

• beginWork(current, workInProgress, renderLanes)：向下阶段

  • 作用： 处理当前的 workInProgress Fiber 节点，并创建/复用其子 Fiber 节点。
  • 工作内容：
    1. 比较 current 和 workInProgress 节点的 props 和 state，判断是否需要更新。
    2. 根据 workInProgress.tag 执行不同的逻辑：
       • 对于类组件，会实例化或更新组件，调用 shouldComponentUpdate、render 等生命周期方法。
       • 对于函数组件，会执行函数体，计算出新的子元素。
       • 对于 HostComponent（如 div），会根据 props 差异标记 Update 副作用。
    3. 执行 Diff 算法，协调当前 Fiber 的子元素，为它们创建对应的 workInProgress 子 Fiber 节点，并设置它们的 child 和 sibling 指针。
    4. 如果当前 Fiber 有子节点，beginWork 会返回第一个子 Fiber 节点，作为下一个 nextUnitOfWork。
    5. 如果当前 Fiber 没有子节点，或者子节点已经处理完毕，则表示该 Fiber 的“向下阶段”完成，它会尝试进入“向上阶段”（通过 completeWork）。

• completeWork(current, workInProgress, renderLanes)：向上阶段

  • 作用： 在所有子节点都处理完毕后，处理当前的 workInProgress Fiber 节点，并收集其副作用。
  • 工作内容：
    1. 对于 HostComponent（如 div），会创建真实的 DOM 元素（如果 stateNode 不存在），更新其属性，并将其子 DOM 元素附加到它上面。
    2. 对于所有类型的 Fiber，都会将子节点中带有 effectTag 的节点，以及自身带有 effectTag 的节点，通过 nextEffect 指针链接起来，形成一个副作用链表 (Effect List)，并将其挂载到父 Fiber 的 firstEffect 和 lastEffect 上。这个副作用链表只包含有实际 DOM 变更的节点，大大提高了 Commit 阶段的遍历效率。
    3. 执行一些生命周期方法，如 componentDidMount 或 useEffect 的清理函数。
    4. completeWork 返回 null。这意味着当前 Fiber 节点的工作已完成，performUnitOfWork 逻辑会通过 return 指针回溯到父节点，然后尝试处理父节点的下一个兄弟节点，或者完成父节点自身的 completeWork。

5.1.3 调度器 (Scheduler)：如何与浏览器协同

React 内部实现了一个调度器，它比 requestIdleCallback 更加强大和灵活（requestIdleCallback 优先级太低，且浏览器支持不一）。React 的调度器会模拟 requestIdleCallback 的行为，并利用 MessageChannel 或其他机制在帧的空闲时间执行任务。

调度器会根据任务的优先级来安排执行顺序。高优先级的任务（如用户输入）会被优先处理，甚至可以中断当前正在进行的低优先级任务。

5.1.4 优先级 (Lanes)：如何影响调度的顺序

React 使用一个称为“Lanes”（车道）的位掩码系统来表示更新的优先级。不同的更新（如同步更新、批处理更新、用户输入、动画）会被分配到不同的车道。调度器会优先处理位于高优先级车道的任务。当一个高优先级任务到达时，调度器可以中止当前正在进行的低优先级渲染，转而处理高优先级任务。

5.1.5 代码示例：performUnitOfWork 简化逻辑

// 简化的 performUnitOfWork 逻辑
function performUnitOfWork(workInProgress) {
    // 1. beginWork 阶段：处理当前 Fiber，并返回其第一个子 Fiber
    // current 是 workInProgress.alternate，即旧树中对应的 Fiber
    const current = workInProgress.alternate;
    let next = beginWork(current, workInProgress);

    // 如果 beginWork 返回了子 Fiber，说明有子节点需要处理
    if (next !== null) {
        return next; // 将子 Fiber 作为下一个工作单元
    }

    // 如果 beginWork 没有返回子 Fiber（或者子 Fiber已经处理完毕）
    // 说明当前 Fiber 节点没有子节点，或者其子树已经处理完成，
    // 此时需要向上回溯，执行 completeWork 阶段
    let node = workInProgress;
    while (node !== null) {
        // 2. completeWork 阶段：处理当前 Fiber，收集副作用
        completeWork(node);

        // 如果当前节点有兄弟节点，则处理兄弟节点
        if (node.sibling !== null) {
            return node.sibling; // 将兄弟 Fiber 作为下一个工作单元
        }

        // 如果没有兄弟节点，则回到父节点，继续处理父节点的 completeWork
        node = node.return;
    }

    // 所有工作完成，返回 null
    return null;
}

这个 performUnitOfWork 函数展示了 child、sibling、return 指针如何协同工作，实现了一个迭代的、深度优先的遍历算法，完全替代了传统的递归调用栈。

5.2 阶段二：提交阶段 (Commit Phase)

一旦渲染阶段成功完成，并且 workInProgress 树构建完毕，React 就会进入提交阶段。这个阶段是不可中断的，必须一次性完成所有 DOM 操作，以确保 UI 的一致性。

5.2.1 不可中断、同步执行：确保 UI 一致性

提交阶段是同步的，这意味着一旦开始，它就会一直运行直到所有 DOM 变更完成。这是因为 DOM 操作通常是昂贵的，并且为了避免用户看到不完整的 UI 状态，所有的 DOM 更新必须原子性地发生。

5.2.2 主要任务：将副作用 (effectTag) 应用到真实 DOM

在渲染阶段，所有需要对 DOM 进行操作的 Fiber 节点（带有 effectTag 的节点）都被收集到一个副作用链表（Effect List）中。提交阶段会遍历这个副作用链表，并执行相应的 DOM 操作。

提交阶段主要分为三个子阶段：

1. commitBeforeMutationEffects：DOM 变更前

   • 在此阶段，React 会遍历副作用链表，执行那些需要在 DOM 实际变更之前发生的副作用。
   • 例如，调用 getSnapshotBeforeUpdate 生命周期方法（在类组件中），该方法允许组件在 DOM 实际更新之前捕获一些信息（如滚动位置）。

2. commitMutationEffects：执行 DOM 变更

   • 这是进行实际 DOM 操作的阶段。React 会再次遍历副作用链表，根据每个 Fiber 节点的 effectTag 执行相应的 DOM 操作：
     • Placement：将 Fiber 对应的 DOM 节点插入到正确的位置。
     • Update：更新 Fiber 对应的 DOM 节点的属性（如 className、style 等）。
     • Deletion：删除 Fiber 对应的 DOM 节点。
   • 在这个阶段，组件的 componentWillUnmount 生命周期方法也会被调用。

3. commitLayoutEffects：DOM 变更后

   • 在这个阶段，所有的 DOM 变更已经完成，并且浏览器已经完成了布局和绘制。
   • React 会再次遍历副作用链表，执行那些需要在 DOM 变更之后发生的副作用。
   • 例如，调用 componentDidMount、componentDidUpdate 生命周期方法，以及执行 useLayoutEffect 和 useEffect 的回调函数。

5.2.3 current 指针更新：workInProgress 成为新的 current 树

在 commitRoot 函数的最后，一旦所有 DOM 操作和生命周期方法都执行完毕，React 会将根 Fiber 节点的 current 指针指向 workInProgress 树。此时，workInProgress 树就正式成为了新的 current 树，代表了当前 UI 的最新状态。旧的 current 树则成为“旧树”，等待下一次更新时被复用或回收。

六、Fiber 带来的关键优势

通过上述对 Fiber 结构和算法的深入剖析，我们可以清晰地看到它为 React 带来了革命性的提升：

• 时间切片 (Time Slicing)： 将渲染任务分解为小单元，并允许浏览器在渲染过程中中断 React 的工作，执行高优先级任务（如用户输入、动画），从而显著提升了应用的响应性和用户体验。
• 优先级调度 (Prioritization)： 不同的更新可以被分配不同的优先级。高优先级的更新可以抢占低优先级的更新，确保关键的用户交互能够立即得到响应。
• 并发模式 (Concurrent Mode)： 这是 Fiber 架构的最终目标。它允许 React 在后台同时准备多个 UI 版本，而不会阻塞用户界面。例如，在一个组件加载数据时，用户仍然可以与 UI 的其他部分进行交互，直到数据加载并渲染完成。
• 错误边界 (Error Boundaries)： Fiber 使得 React 能够更好地捕获和处理组件树中的错误。当子树中发生错误时，父级错误边界组件可以捕获到它，并渲染一个备用 UI，而不是让整个应用崩溃。

七、Fiber 的深远影响

Fiber 架构是 React 迈向更强大、更灵活 UI 渲染的关键一步。它通过其独特的链表结构和两阶段工作流程，解决了传统虚拟 DOM 协调器的核心痛点，使得 React 能够提供更流畅、更响应的用户体验。

Fiber 的引入，为 React 带来了时间切片、优先级调度和并发模式等能力，不仅提升了现有应用的性能，更为 React 未来的功能扩展和创新（如 Suspense）打下了坚实的基础。理解 Fiber，就是理解现代 React 引擎的脉搏。