Fiber 的深度优先遍历：为什么 React 先向下搜索（beginWork）再向上回溯（completeWork）？

各位技术同仁，大家好。

今天，我们将深入探讨 React 核心机制中一个至关重要的部分：Fiber 架构下的深度优先遍历。具体来说，我们将聚焦于一个核心问题——为什么 React 在其渲染阶段会先执行向下搜索（beginWork），然后再执行向上回溯（completeWork）？理解这一机制，是理解 React 如何实现并发模式、优化性能以及构建健壮用户界面的关键。

1. 从旧的痛点说起：React 的早期与“卡顿”

在 Fiber 架构诞生之前，React 使用的是一个基于递归的“栈协调器”（Stack Reconciler）。它的工作方式相对直观：当组件状态发生变化时，React 会递归地遍历整个组件树，计算出需要对真实 DOM 进行的更改。

这个过程是同步且不可中断的。想象一下，如果你的应用有一个非常庞大的组件树，或者某个组件的 render 方法执行了复杂的计算，那么整个协调过程将一口气执行完成，期间 JavaScript 主线程会被完全阻塞。这意味着用户无法与页面进行交互，动画会卡顿，页面会变得无响应。这在用户体验上是灾难性的。

这就是 React 团队面临的核心挑战：如何将一个可能耗时很长的更新工作，拆分成多个小块，并允许浏览器在这些小块之间进行其他更高优先级的任务（比如响应用户输入、执行动画帧），从而实现更流畅的用户体验？答案就是 Fiber。

2. Fiber 登场：并发模式的基石

Fiber 是 React 协调算法的全新实现。它的核心目标是将耗时的渲染工作分解成可中断的单元。为了实现这一点，Fiber 放弃了传统的、基于 JavaScript 调用栈的递归，转而使用了一种基于链表的、可以在必要时暂停和恢复的自定义栈（或者更准确地说，是工作单元队列）。

每一个 Fiber 节点代表一个“工作单元”。它是一个 JavaScript 对象，包含了关于组件类型、状态、属性以及与父子兄弟节点关系的所有信息。Fiber 树是 Virtual DOM 树在工作过程中的一种表示形式，它与真实 DOM 树一一对应，但又独立于浏览器环境。

Fiber 节点的关键属性：

属性	类型	描述
tag	number	表示 Fiber 节点的类型（如函数组件、类组件、HostComponent 等）。
type	function 或 string	对于组件，是其构造函数；对于 DOM 元素，是其标签名（如 ‘div’）。
stateNode	Object 或 HTMLElement	对于 HostComponent，指向真实的 DOM 节点；对于类组件，指向组件实例。
return	Fiber	指向父级 Fiber 节点，用于向上回溯。
child	Fiber	指向第一个子 Fiber 节点，用于向下遍历。
sibling	Fiber	指向下一个兄弟 Fiber 节点，用于横向遍历。
pendingProps	Object	组件最新接收的 props。
memoizedProps	Object	上一次渲染完成时使用的 props。用于比较 props 是否变化。
memoizedState	Object	上一次渲染完成时组件的状态（对于类组件是 state，对于函数组件是 Hook 状态链表）。
updateQueue	Object	存储组件的更新队列（如 setState 调用的回调函数）。
effectTag	number	描述此 Fiber 节点需要执行的副作用（如插入、更新、删除 DOM 节点）。
expirationTime / lanes	number / number	表示此 Fiber 节点更新的截止时间或优先级，用于并发调度。
alternate	Fiber	指向“替身”Fiber 节点，用于实现“双缓冲”机制，即 current 树和 workInProgress 树的切换。

其中，child、sibling、return 这三个属性构成了 Fiber 树的骨架，它们将原本的递归调用栈变成了可以手动控制的链表结构。

3. Fiber 协调的两大阶段：渲染与提交

React 的 Fiber 协调过程分为两大主要阶段：

1. 渲染阶段 (Render Phase / Work Phase)：

   • 这个阶段的主要任务是计算和规划所有必要的更新。
   • 它是一个可中断的阶段，React 可以在浏览器空闲时执行工作，如果浏览器需要响应用户输入，React 可以暂停当前工作，稍后再恢复。
   • 在这个阶段，React 会遍历 Fiber 树，执行组件的 render 方法，调用 getDerivedStateFromProps 等生命周期方法，并对比新旧 Fiber 节点（即所谓的 "diffing"），生成副作用（effectTag）。
   • 这个阶段不会进行任何实际的 DOM 操作。所有 DOM 更改都只是被标记在 Fiber 节点上，并收集到一个副作用列表中。

2. 提交阶段 (Commit Phase)：

   • 这个阶段是不可中断的。一旦开始，它会同步地执行所有 DOM 操作。
   • 它会遍历渲染阶段生成的副作用列表，将所有 effectTag 标记的更改（如插入、更新、删除 DOM 节点）应用到真实 DOM 上。
   • 在这个阶段，React 还会调用 getSnapshotBeforeUpdate、componentDidMount、componentDidUpdate、`useLayoutEffect 等生命周期方法和 Hook。

我们的核心问题——beginWork 和 completeWork——都发生在第一个阶段：渲染阶段。

4. 渲染阶段的核心：深度优先遍历与 beginWork / completeWork

Fiber 架构在渲染阶段采用了一种深度优先遍历的策略。你可以将其想象成一个“工作循环”（Work Loop），不断地从根 Fiber 节点开始，向下处理子节点，直到叶子节点，然后向上回溯，直到根节点。

这个遍历过程由两个核心函数驱动：performUnitOfWork（内部包含了 beginWork 和 completeWork 的调用逻辑）和 workLoop。

4.1. 向下搜索：beginWork 的职责

当 nextUnitOfWork 指针指向一个 Fiber 节点时，首先执行的是 beginWork 函数。beginWork 的职责是：

1. 克隆或创建 workInProgress Fiber 节点：如果 current Fiber 节点（即上一次渲染的节点）存在且可以复用，beginWork 会克隆它并更新其属性，作为当前正在构建的 workInProgress 树的一部分。否则，它会创建一个新的 workInProgress Fiber 节点。
2. 执行组件逻辑：
   • 对于类组件，它会实例化组件（如果尚未实例化），调用 static getDerivedStateFromProps，检查 shouldComponentUpdate，并调用 render 方法获取新的 JSX。
   • 对于函数组件，它会直接调用该函数，并执行其中的 Hooks（如 useState, useEffect）。
   • 对于HostComponent（如 div, span 等原生 DOM 元素），它会准备好要更新的属性。
3. 调和子节点 (Reconcile Children)：这是 beginWork 最重要的任务之一。它会将组件 render 方法返回的 JSX 元素（或 HostComponent 的子元素列表）与当前 Fiber 节点的 child 链表进行对比（即 diffing 算法），生成新的子 Fiber 节点，并标记必要的副作用（如 Placement 插入、Update 更新、Deletion 删除）。
4. 返回下一个工作单元：beginWork 的返回值是当前 Fiber 节点的第一个子节点。这意味着，如果一个 Fiber 节点有子节点，工作循环会立即向下深入到子节点进行处理。如果它没有子节点（即它是叶子节点），beginWork 会返回 null，这告诉工作循环，当前节点已经处理完毕，可以开始向上回溯了。

简化的 beginWork 伪代码：

function beginWork(current, workInProgress, renderLanes) {
    // 1. 尝试复用或创建 workInProgress 节点
    // ...

    // 2. 根据 Fiber 节点的类型执行不同的逻辑
    switch (workInProgress.tag) {
        case FunctionComponent:
            // 调用函数组件，执行 Hooks
            // 得到新的子元素描述（JSX）
            break;
        case ClassComponent:
            // 实例化组件，调用生命周期方法 (getDerivedStateFromProps, shouldComponentUpdate)
            // 调用 render 方法，得到新的子元素描述（JSX）
            break;
        case HostComponent: // e.g., 'div', 'p'
            // 准备更新 DOM 元素的属性
            break;
        // ... 其他类型
    }

    // 3. 调和子节点：将新的子元素描述与 existing child Fiber 进行 diffing
    //    生成新的 child Fiber 链表，并标记 effectTag
    workInProgress.child = reconcileChildren(
        workInProgress,
        current ? current.child : null,
        newChildrenJSX, // 来自 render 方法或 HostComponent 的子元素
        renderLanes
    );

    // 4. 返回下一个要处理的子节点，继续向下遍历
    return workInProgress.child;
}

4.2. 向上回溯：completeWork 的职责

当 beginWork 返回 null（表示当前节点没有子节点）或者一个 Fiber 节点的所有子节点都已处理完毕并完成 completeWork 后，工作循环会向上回溯到父节点，并对当前父节点执行 completeWork。

completeWork 的职责是：

1. 完成当前 Fiber 节点的工作：
   • 对于HostComponent（如 div），这是创建真实 DOM 节点的地方。如果 stateNode 不存在（首次挂载），它会调用 document.createElement 创建 DOM 元素，并将其子节点（这些子节点已经在之前的 completeWork 中处理完毕并生成了 DOM 元素）插入到这个新创建的 DOM 元素中。如果 stateNode 已经存在（更新），它会对比 memoizedProps 和 pendingProps，收集需要更新的 DOM 属性（如 style, className 等），并将这些更新指令添加到当前 Fiber 节点的 updateQueue 中。
   • 对于类组件，它会准备调用 componentDidMount 或 componentDidUpdate（这些会在提交阶段执行），并处理 getSnapshotBeforeUpdate。
   • 对于函数组件，它会处理 useEffect 和 useLayoutEffect 的回调函数，这些回调的实际执行也发生在提交阶段。
2. 收集副作用 (Effect Tags)：completeWork 会将当前 Fiber 节点以及其所有子节点（如果子节点有副作用）上标记的 effectTag 收集起来，形成一个单向链表，挂载到当前 Fiber 节点的 firstEffect 和 lastEffect 属性上。这个链表最终会一直冒泡到根 Fiber 节点，在提交阶段统一处理。这是 Fiber 能够高效批量处理 DOM 更新的关键。
3. 返回下一个工作单元：completeWork 函数通常返回 null。这表示当前节点的工作已经“完成”，工作循环会通过 workInProgress.return 指针继续向上回溯到父节点，并尝试处理父节点的下一个兄弟节点（如果存在），或者继续向上回溯到祖父节点。

简化的 completeWork 伪代码：

function completeWork(current, workInProgress, renderLanes) {
    const newProps = workInProgress.pendingProps;

    // 1. 根据 Fiber 节点的类型完成工作
    switch (workInProgress.tag) {
        case FunctionComponent:
            // 安排 useEffect/useLayoutEffect 回调
            break;
        case ClassComponent:
            // 安排 componentDidMount/Update 等生命周期方法
            break;
        case HostComponent: // e.g., 'div'
            const instance = workInProgress.stateNode;
            if (instance == null) { // 首次挂载
                // 创建真实的 DOM 元素
                const newInstance = createInstance(workInProgress.type, newProps, rootContainerInstance, workInProgress);
                // 将所有已处理的子 DOM 元素附加到这个新创建的 DOM 元素中
                appendAllChildren(newInstance, workInProgress);
                workInProgress.stateNode = newInstance;
            } else { // 更新
                // 比较新旧 props，收集需要更新的 DOM 属性到 updateQueue
                updateHostComponent(instance, workInProgress.type, workInProgress.memoizedProps, newProps, workInProgress);
            }
            break;
        // ... 其他类型
    }

    // 2. 向上冒泡副作用（effectTags）
    // 将当前 Fiber 及其子 Fiber 的 effectTags 收集到父 Fiber 的 effect 链表中
    bubbleProperties(workInProgress);

    // 3. 返回 null，表示当前节点工作完成，向上回溯
    return null;
}

4.3. 工作循环的 Choreography：beginWork 与 completeWork 的交织

整个渲染阶段的工作循环可以概括为：

1. 从根 Fiber 节点（hostRootFiber）开始，设置 nextUnitOfWork = hostRootFiber。
2. 进入循环：
   • 如果 nextUnitOfWork 存在：
     • 执行 beginWork(nextUnitOfWork.current, nextUnitOfWork, renderLanes)。
     • 如果 beginWork 返回一个子节点，将 nextUnitOfWork 更新为该子节点，继续向下。
     • 如果 beginWork 返回 null（当前节点没有子节点）：
       • 循环向上回溯：不断执行 completeWork，直到找到一个有兄弟节点的父节点，或者回到根节点。
       • 在向上回溯过程中，如果遇到一个 Fiber 节点有兄弟节点，则将 nextUnitOfWork 更新为该兄弟节点，继续横向遍历。
       • 如果向上回溯到根节点，并且没有更多的工作，则退出循环。
   • 如果 nextUnitOfWork 为 null，表示当前分支已处理完毕，尝试从 workInProgressRoot.firstEffect 中获取下一个待处理的副作用。

这个过程可以用一个具体的 Fiber 树遍历来形象化：

假设我们有如下组件结构：

App (A)
├── Header (B)
│   └── Nav (D)
│       └── Link (E)
└── Main (C)
    ├── Section (F)
    │   └── Article (G)
    └── Footer (H)

Fiber 树的遍历顺序（beginWork -> completeWork）：

1. A (beginWork) -> child (B)
2. B (beginWork) -> child (D)
3. D (beginWork) -> child (E)
4. E (beginWork) -> null (E 是叶子节点)
5. E (completeWork) -> return (D)
6. D (completeWork) -> return (B)
7. B (completeWork) -> sibling (C) // B 的所有子节点都完成了，现在处理 B 的兄弟 C
8. C (beginWork) -> child (F)
9. F (beginWork) -> child (G)
10. G (beginWork) -> null (G 是叶子节点)
11. G (completeWork) -> return (F)
12. F (completeWork) -> sibling (H) // F 的所有子节点都完成了，现在处理 F 的兄弟 H
13. H (beginWork) -> null (H 是叶子节点)
14. H (completeWork) -> return (C)
15. C (completeWork) -> return (A)
16. A (completeWork)

整个过程遵循“深度优先”原则：先深入到最底层，再逐层回溯。

5. 为什么是先向下 beginWork，再向上 completeWork？

现在我们回到核心问题：为什么 React Fiber 要采用这种“先向下搜索（beginWork）再向上回溯（completeWork）”的深度优先遍历模式？这并非随意设计，而是基于 UI 渲染的本质、性能考量和并发模式的需求。

5.1. UI 的层级依赖性：子节点决定父节点

用户界面的结构是天然的层级嵌套。一个父组件通常需要依赖其子组件的渲染结果才能最终确定自己的状态或外观。

• DOM 构建： 一个 <div> 元素要被完整地构造出来，它的所有子元素（文本、其他 <span>、<p> 等）必须已经存在并被附加到它上面。如果 completeWork 是在 beginWork 之前或同时进行的，那么父元素在 completeWork 时将无法获取到其子元素的 DOM 实例并进行正确的附加。

  • 在 beginWork 阶段，我们向下遍历，目的是执行组件的 render 方法，生成其子元素的描述（JSX）。
  • 在 completeWork 阶段，我们向上回溯，此时子节点已经完成了自身的 completeWork，即它们可能已经创建了真实的 DOM 节点。因此，当父节点执行 completeWork 时，它就可以安全地将这些已创建的子 DOM 节点附加到自己身上。

  // 假设在 completeWork(Parent) 时，Child 已经完成了 completeWork
  // 并且 Child.stateNode 已经是真实的 DOM 元素
  function completeWorkForHostComponent(workInProgress) {
      const instance = workInProgress.stateNode; // Parent 的 DOM 节点
      if (instance == null) {
          instance = createInstance(workInProgress.type, ...);
          // 关键：在这里将 Child.stateNode 附加到 Parent.stateNode
          // 只有当 Child 已经完成 completeWork 并创建了 DOM 元素后，这才能发生
          appendAllChildren(instance, workInProgress);
          workInProgress.stateNode = instance;
      }
      // ...
  }

• 属性计算与传递： 某些父组件的属性可能需要根据子组件的状态或尺寸来计算。虽然 React 的单向数据流原则鼓励父组件将数据传递给子组件，但在某些高级场景或第三方库中，父组件可能需要在子组件“完成”后才能最终确定自己的某些属性。completeWork 在子节点完成后执行，为这种可能性提供了逻辑上的时机。

5.2. 副作用的收集与冒泡

Fiber 架构的一个核心机制是“副作用”（Effects）的收集。在渲染阶段，React 不会直接操作 DOM，而是通过在 Fiber 节点上标记 effectTag 来记录需要进行的 DOM 操作（如 Placement 插入、Update 更新、Deletion 删除）。

• beginWork 标记副作用： beginWork 在调和子节点时，会根据 diff 结果在子 Fiber 节点上设置 effectTag。例如，如果一个新组件被插入，它的 Fiber 节点就会被标记为 Placement。

• completeWork 收集副作用： completeWork 是将这些分散的 effectTag 收集起来，形成一个高效的副作用链表的理想时机。当一个子 Fiber 节点完成 completeWork 后，它会将其自身的 effectTag 以及它所有子节点收集到的 effectTags（通过 firstEffect 和 lastEffect 链表）向上冒泡，合并到其父 Fiber 节点的 firstEffect 和 lastEffect 链表中。这样，当根 Fiber 节点最终完成 completeWork 时，它的 firstEffect 链表就包含了所有需要执行的副作用。

  // 简化的 bubbleProperties 逻辑
  function bubbleProperties(workInProgress) {
      let effectList = workInProgress.firstEffect;
      let child = workInProgress.child;
      while (child !== null) {
          // 将子节点的副作用链表合并到当前节点的副作用链表中
          if (child.firstEffect !== null) {
              if (effectList === null) {
                  effectList = child.firstEffect;
              } else {
                  workInProgress.lastEffect.nextEffect = child.firstEffect;
              }
              workInProgress.lastEffect = child.lastEffect;
          }
          // 如果子节点本身有副作用，也要添加到链表
          if ((child.effectTag & Placement) !== NoEffect) { // 假设 Placement 是一个示例 effect
              if (effectList === null) {
                  effectList = child;
              } else {
                  workInProgress.lastEffect.nextEffect = child;
              }
              workInProgress.lastEffect = child;
          }
          child = child.sibling;
      }
      workInProgress.firstEffect = effectList;
      // ... 其他属性的冒泡
  }

  这种自底向上的收集方式，确保了在提交阶段，React 可以高效地遍历这个副作用链表，而不是遍历整个 Fiber 树，从而只对需要更新的部分进行 DOM 操作。

5.3. 错误边界的实现

React 的错误边界（Error Boundaries）机制也受益于这种遍历模式。当一个组件在 render 或生命周期方法中抛出错误时，React 需要能够“捕获”这个错误，并且在 UI 树中找到最近的错误边界组件来处理它。

在 completeWork 向上回溯的过程中，如果一个子树中发生了错误，completeWork 可以检测到这个错误，并沿着 return 链向上寻找具有 componentDidCatch 方法的父 Fiber 节点。一旦找到，它就可以截断当前错误子树的渲染，转而渲染错误边界组件的后备 UI。这种机制在深度优先的向上回溯中非常自然。

5.4. 并发模式与可中断性

尽管 beginWork 和 completeWork 共同构成了深度优先遍历，但这种两阶段、可中断的设计是实现并发模式的关键。

• 中断点： beginWork 可以在处理完一个 Fiber 节点后，通过返回其 child 来继续向下。如果此时时间切片用尽，或者有更高优先级的任务，React 可以在这里暂停。当恢复时，它知道应该从哪个 nextUnitOfWork 继续。
• 纯净性： 渲染阶段的 beginWork 和 completeWork 大多是“纯”计算，不涉及 DOM 操作，这意味着它们可以被重复执行而不会产生副作用（除了 useEffect 等 Hook 的调度）。这种纯净性是并发模式的基础，因为一个任务可能被暂停、恢复，甚至被丢弃重做。
• 构建 workInProgress 树： 渲染阶段的工作是在一个全新的 workInProgress Fiber 树上进行的，与当前显示在屏幕上的 current Fiber 树是分离的。这意味着即使渲染阶段被中断、暂停或甚至因为更高优先级的更新而完全废弃，用户看到的界面仍然是完整的，不会出现半成品 UI。只有当 workInProgress 树完全构建并准备好后，它才会在提交阶段一次性切换到 current 树并更新 DOM。

6. 总结：Fiber 的精妙之处

React Fiber 架构采用的“先向下 beginWork 再向上 completeWork”的深度优先遍历模式，是其实现高效、可中断和并发渲染的核心机制。

• beginWork 负责向下遍历，执行组件逻辑、调度 Hooks，并进行子节点的调和（diffing）。
• completeWork 负责向上回溯，完成节点的构建（如创建 DOM 元素）、收集副作用，并准备好提交阶段所需的数据。

这种分阶段的设计完美地契合了 UI 渲染的层级依赖性，使得 DOM 元素的创建和子节点的附加得以有序进行；它提供了一个高效的副作用收集机制，确保了提交阶段的 DOM 操作能够被批量、精确地执行；同时，它也是 React 实现错误边界和最关键的并发模式的基础，让 React 应用能够提供更流畅、更响应的用户体验。Fiber 不仅仅是对 Virtual DOM 算法的优化，更是对整个 React 渲染哲学的一次深刻革新。