beginWork 与 completeWork 的内部职责分工

一、引言

1.1 从 JSX 到 DOM 挂载

初次渲染是 "无旧 DOM 可复用" 的全新构建过程，整体流程可分为三步：

初始化 Fiber 根节点：React 从 ReactDOM.createRoot 或 ReactDOM.render 触发，创建根 Fiber 节点（FiberRoot），作为整个 Fiber 树的入口；
构建 workInProgress Fiber 树：通过 beginWork 自上而下遍历，为每个组件创建对应的 workInProgress Fiber 节点；再通过 completeWork 自下而上处理，生成 DOM 节点并绑定属性；
提交 DOM 挂载：构建完 workInProgress 树后，React 进入 "提交阶段"，将 workInProgress 树对应的 DOM 节点挂载到页面，同时将 current 树指向新树，完成渲染闭环。

1.2 beginWork 与 completeWork 的核心职责定位

beginWork 与 completeWork 是 Fiber 构建阶段的 "左右护法"，职责分工明确且互补：

beginWork：负责 "向下探索"，从根 Fiber 开始，递归（迭代）为每个组件创建 workInProgress Fiber 节点，核心是 "生成 Fiber 结构、处理组件逻辑、确定子节点类型"；
completeWork：负责 "向上收尾"，从叶子节点开始，逐步向上归并，核心是 "创建 DOM 节点、赋值 DOM 属性、收集副作用、关联父子 DOM"；

二者通过 "工作单元链表" 衔接：beginWork 处理完一个 Fiber 节点后，工作循环通过 performUnitOfWork 推进到下一个 Fiber（child/sibling/return），当遍历到叶子节点后，自动进入 completeWork 阶段。

二、beginWork：Fiber 树的向下构建与任务分解

beginWork 是 Fiber 构建阶段的 "前置引擎"，其核心逻辑是 "基于旧 Fiber 节点（若存在）或组件类型，创建新的 workInProgress Fiber 节点，并确定子节点的处理方式"。在初次渲染中，由于没有旧 current 树，beginWork 会直接基于组件类型初始化 Fiber 节点。

2.1 beginWork 的触发时机与入参说明

触发位置：工作循环在每个"工作单元（Fiber）"上调用 performUnitOfWork，其中第一步就是执行 beginWork(current, workInProgress, renderLanes)，返回"下一个要处理的子 Fiber"。
入参与角色：

current：当前已提交树中的对应 Fiber（更新时存在；首屏挂载时可能为 null）。
workInProgress：本次渲染要构建的 Fiber 节点（WIP 树）。
renderLanes：当前渲染的优先级集合（决定是否跳过或继续展开）。

输出：返回子 Fiber（或 null），供工作循环继续向下深入。

2.2 不同类型 Fiber 节点的 beginWork 处理逻辑

2.2.1 重点节点速览

共性流程：根据 fiber.tag 分发到不同的更新函数，产出"下一步要渲染的子元素集合"，再调用"对比/构建子 Fiber（reconcileChildren）"。

常见类型与处理要点（简化版）：

FunctionComponent：renderWithHooks 执行函数组件，跑 hooks，拿到 nextChildren；随后 reconcileChildren。
ClassComponent：updateClassComponent 处理实例与 processUpdateQueue，计算新 state，调用 render() 得到 nextChildren；随后 reconcileChildren。
HostRoot（根）：处理根上的更新队列（如 updateContainer 的结果），得到 nextChildren；随后 reconcileChildren。
HostComponent（原生节点，如 div）：不在此阶段做 DOM 变更；只根据 props.children 调用 reconcileChildren。
HostText（文本）：无子节点，通常返回 null。
Suspense/Offscreen：根据数据可用性与可见性策略，决定展开主内容或 fallback，再 reconcileChildren。
Memo/ForwardRef/SimpleMemoComponent：按其包装逻辑判断是否需要重渲染，否则可部分跳过。

简化示例（伪代码）：

javascript 复制代码

function beginWork(current, workInProgress, renderLanes) {
  switch (workInProgress.tag) {
    case FunctionComponent:
      const Component = workInProgress.type;
      const unresolvedProps = workInProgress.pendingProps; // 未解析默认值的 props
      // 解析函数组件的默认 props（若禁用默认 props 则直接使用 unresolvedProps）
      const resolvedProps =
        disableDefaultPropsExceptForClasses ||
        workInProgress.elementType === Component
          ? unresolvedProps
          : resolveDefaultPropsOnNonClassComponent(Component, unresolvedProps);
      // 处理函数组件的更新/挂载（执行函数、处理 Hooks、生成子节点）
      return updateFunctionComponent(
        current,
        workInProgress,
        Component,
        resolvedProps,
        renderLanes
      );

    case ClassComponent:
      const Component = workInProgress.type;
      const unresolvedProps = workInProgress.pendingProps; // 未解析默认值的 props
      // 解析类组件的默认 props（static defaultProps）
      const resolvedProps = resolveClassComponentProps(
        Component,
        unresolvedProps,
        workInProgress.elementType === Component
      );
      return updateClassComponent(
        current,
        workInProgress,
        Component,
        resolvedProps,
        renderLanes
      );

    case HostRoot: {
      // 处理根节点的更新/挂载（管理全局状态、初始化上下文、协调子树）
      return updateHostRoot(current, workInProgress, renderLanes);
    }

    case HostComponent: {
      // 处理 DOM 元素的更新/挂载（对比 props、生成 DOM 属性、协调子节点）
      return updateHostComponent(current, workInProgress, renderLanes);
    }

    case HostText:
      return updateHostText(current, workInProgress);

    // ... 其他类型（Suspense、Offscreen、Fragment、ContextProvider 等）
  }
}

2.2.2 updateFunctionComponent 源码精读

在函数组件的 beginWork 阶段，updateFunctionComponent 负责"调用组件函数 + 驱动 Hooks 执行 + 产出子节点 + 协调子 Fiber"。它与 renderWithHooks 搭档工作：前者决定是否需要继续向下构建子树（以及是否可以直接跳过），后者负责在一次渲染里正确地运行 Hooks 并返回最新的子节点。

执行顺序总览：

读取上下文（prepareToReadContext），为组件执行铺路；
调用 renderWithHooks，运行 Hooks 并拿到 nextChildren（JSX）；
若是更新且未接收变化（current !== null && !didReceiveUpdate），走"跳过路径"，复用旧子树； didReceiveUpdate 来自更上层的变更判断（如 props/context 是否变化、更新优先级是否匹配）。当它为 false 时表示"本次无需对这个节点及其子树做工作，可直接重用旧 Fiber 和副作用信息"，于是会调用：
否则标记 PerformedWork 并调用 reconcileChildren，为子节点生成/更新子 Fiber。

renderWithHooks 的职责与关键点

渲染前重置当前 Fiber 的 Hooks 相关状态：memoizedState、updateQueue、lanes，并设置全局渲染环境（currentlyRenderingFiber、renderLanes）。
根据是否首屏挂载选择调度器：

HooksDispatcherOnMount: 首次渲染，负责初始化如 useState 的初始值。
HooksDispatcherOnUpdate: 更新渲染，负责读取旧状态并应用队列里的更新。

运行组件函数得到 children；如果在执行过程中触发了"渲染阶段更新"（didScheduleRenderPhaseUpdateDuringThisPass），则使用 HooksDispatcherOnRerender 进行一次或多次"立即重渲染"，直到状态稳定或达到 RE_RENDER_LIMIT 上限。

这类更新的典型特征是"在函数组件执行过程中触发了自身状态的再次变更"，React 会尝试在同一渲染通道内收敛到稳定值，避免把不稳定的 UI 结果提交出去。

清理并完成 Hooks 的渲染（finishRenderingHooks），将最终的 Hooks 状态和副作用信息落到 workInProgress 上，并返回稳定的 children 给上层做协调。

javascript 复制代码

// 处理函数组件的更新逻辑
function updateFunctionComponent(
  current: null | Fiber, // 旧 Fiber 节点（更新时存在，初次渲染为 null）
  workInProgress: Fiber, // 当前正在构建的 Fiber 节点
  Component: any, // 函数组件本身
  nextProps: any, // 新的 props
  renderLanes: Lanes // 当前渲染的优先级
) {
  let context;
  // 获取上下文（简化处理，省略 legacy 上下文兼容逻辑）
  if (!disableLegacyContext) {
    const unmaskedContext = getUnmaskedContext(workInProgress, Component, true);
    context = getMaskedContext(workInProgress, unmaskedContext);
  }

  let nextChildren;
  // 准备读取上下文
  prepareToReadContext(workInProgress, renderLanes);
  // 执行函数组件，通过 Hooks 处理状态和副作用，获取返回的子节点（JSX）
  nextChildren = renderWithHooks(
    current,
    workInProgress,
    Component,
    nextProps,
    context,
    renderLanes
  );

  // 如果是更新且组件未发生变化，直接复用旧节点（跳过子树更新）
  if (current !== null && !didReceiveUpdate) {
    bailoutHooks(current, workInProgress, renderLanes);
    return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
  }

  // 标记组件已执行工作
  workInProgress.flags |= PerformedWork;
  // 协调子节点（创建/更新子 Fiber 树）
  reconcileChildren(current, workInProgress, nextChildren, renderLanes);
  // 返回第一个子 Fiber 节点，继续构建子树
  return workInProgress.child;
}

// 函数组件核心渲染逻辑：执行组件并处理 Hooks
export function renderWithHooks(
  current: Fiber | null, // 旧 Fiber 节点（更新时存在，初次渲染为 null）
  workInProgress: Fiber, // 当前构建中的 Fiber 节点
  Component: (p: Props, arg: SecondArg) => any, // 目标函数组件
  props: Props, // 组件接收的新 props
  secondArg: SecondArg, // 额外参数（如上下文，函数组件通常为 context）
  nextRenderLanes: Lanes // 当前渲染优先级
): any {
  // 1. 初始化渲染相关全局状态
  renderLanes = nextRenderLanes; // 记录当前渲染优先级
  currentlyRenderingFiber = workInProgress; // 标记当前正在渲染的 Fiber

  // 2. 重置当前 Fiber 的 Hooks 相关状态（清空旧状态/队列）
  workInProgress.memoizedState = null; // 清空 Hooks 状态存储
  workInProgress.updateQueue = null; // 清空 Hooks 更新队列
  workInProgress.lanes = NoLanes; // 重置优先级标记

  // 3. 选择 Hooks 调度器（区分初次渲染/更新）
  // - 初次渲染（current 为 null 或无旧 Hooks 状态）：用挂载阶段调度器
  // - 更新阶段（有旧 Hooks 状态）：用更新阶段调度器
  ReactSharedInternals.H =
    current === null || current.memoizedState === null
      ? HooksDispatcherOnMount // 挂载时的 Hooks 实现（如 useState 初始化）
      : HooksDispatcherOnUpdate; // 更新时的 Hooks 实现（如 useState 读取旧状态）

  // 4. 执行函数组件，获取返回的子节点（JSX）
  // 此时组件内的 Hooks（如 useState、useEffect）会通过上面的调度器执行
  let children = Component(props, secondArg);

  // 5. 处理渲染阶段更新（若组件内触发了 setState 等导致状态变化）
  if (didScheduleRenderPhaseUpdateDuringThisPass) {
    // 重新执行组件，确保状态稳定后再返回子节点
    children = renderWithHooksAgain(
      workInProgress,
      Component,
      props,
      secondArg
    );
  }

  // 6. 完成 Hooks 渲染：清理全局状态、记录最终 Hooks 信息
  finishRenderingHooks(current, workInProgress, Component);

  // 7. 返回组件渲染结果（子节点），用于后续 Fiber 子树协调
  return children;
}

2.2.3 updateClassComponent 源码精读

在 beginWork 阶段，类组件通过 updateClassComponent 完成"实例构造/更新决策 + 调用 render 产出子节点 + 协调子 Fiber"。与函数组件不同，类组件不使用 Hooks；更新是否继续由 shouldUpdate 决策，来源于 mountClassInstance/resumeMountClassInstance/updateClassInstance。

执行顺序总览

上下文与错误边界预处理：

如果是 legacy 上下文提供者，先 pushLegacyContextProvider，避免上下文栈失配；

实例与更新决策：

instance === null 首次挂载：constructClassInstance → mountClassInstance → shouldUpdate = true；
current === null 恢复挂载（如挂起后恢复）：resumeMountClassInstance → 返回 shouldUpdate；
否则常规更新：updateClassInstance → 返回 shouldUpdate。

渲染与子树协调（finishClassComponent）：

若 !shouldUpdate && !didCaptureError，直接走"跳过路径"并可能失效上下文提供者；
否则调用 instance.render() 产出 nextChildren，根据是否处于错误恢复决定 forceUnmountCurrentAndReconcile 或常规 reconcileChildren；
最后将 instance.state 挂到 memoizedState 并在提供者场景下 invalidateContextProvider。

javascript 复制代码

// 处理类组件的更新逻辑
function updateClassComponent(
  current: Fiber | null, // 旧 Fiber 节点（更新时存在）
  workInProgress: Fiber, // 当前构建中的 Fiber 节点
  Component: any, // 类组件本身（构造函数）
  nextProps: any, // 新的 props
  renderLanes: Lanes // 当前渲染优先级
) {
  let hasContext = false;
  // 处理上下文提供者（若为上下文提供者组件）
  if (isLegacyContextProvider(Component)) {
    hasContext = true;
    pushLegacyContextProvider(workInProgress); // 入栈上下文提供者
  }

  // 准备读取上下文
  prepareToReadContext(workInProgress, renderLanes);

  const instance = workInProgress.stateNode; // 类组件实例（this）
  let shouldUpdate; // 是否需要更新

  if (instance === null) {
    // 1. 组件未实例化（初次挂载）
    constructClassInstance(workInProgress, Component, nextProps); // 创建实例（new Component()）
    mountClassInstance(workInProgress, Component, nextProps, renderLanes); // 初始化实例（调用 componentWillMount 等）
    shouldUpdate = true; // 初次挂载必更新
  } else if (current === null) {
    // 2. 恢复挂载（如从 Suspense 恢复）
    shouldUpdate = resumeMountClassInstance(
      workInProgress,
      Component,
      nextProps,
      renderLanes
    );
  } else {
    // 3. 组件已存在（更新阶段）
    // updateClassInstance通过处理新旧 props/context、执行状态更新队列、调用相关生命周期方法（如 componentWillReceiveProps、
    // shouldComponentUpdate），最终判断组件是否需要重新渲染，并更新实例的 props/state/context
    shouldUpdate = updateClassInstance(
      current,
      workInProgress,
      Component,
      nextProps,
      renderLanes
    );
  }

  // 完成类组件处理，返回下一个工作单元
  const nextUnitOfWork = finishClassComponent(
    current,
    workInProgress,
    Component,
    shouldUpdate,
    hasContext,
    renderLanes
  );

  return nextUnitOfWork;
}

// 完成类组件的渲染处理
function finishClassComponent(
  current: Fiber | null,
  workInProgress: Fiber,
  Component: any,
  shouldUpdate: boolean,
  hasContext: boolean,
  renderLanes: Lanes
) {
  // 处理 ref 引用
  markRef(current, workInProgress);

  // 检查是否捕获到错误
  const didCaptureError = (workInProgress.flags & DidCapture) !== NoFlags;

  // 若无需更新且无错误捕获，直接复用旧节点（跳过子树更新）
  if (!shouldUpdate && !didCaptureError) {
    if (hasContext) {
      invalidateContextProvider(workInProgress, Component, false); // 失效上下文
    }
    return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
  }

  const instance = workInProgress.stateNode; // 类组件实例
  let nextChildren; // 渲染的子节点（JSX）

  if (didCaptureError && !Component.getDerivedStateFromError) {
    // 错误捕获且无错误处理方法时，子节点为空
    nextChildren = null;
  } else {
    // 执行 render 方法获取子节点
    nextChildren = instance.render();
  }

  // 标记组件已执行工作
  workInProgress.flags |= PerformedWork;

  // 协调子节点（创建/更新子 Fiber 树）
  if (current !== null && didCaptureError) {
    // 错误恢复场景：强制卸载旧子树并重新协调
    forceUnmountCurrentAndReconcile(
      current,
      workInProgress,
      nextChildren,
      renderLanes
    );
  } else {
    // 正常场景：协调子节点
    reconcileChildren(current, workInProgress, nextChildren, renderLanes);
  }

  // 保存当前状态到 Fiber 节点
  workInProgress.memoizedState = instance.state;

  if (hasContext) {
    invalidateContextProvider(workInProgress, Component, true); // 更新上下文
  }

  // 返回第一个子 Fiber 节点，继续构建子树
  return workInProgress.child;
}

2.3 子 Fiber 节点的创建与链表连接

两套对比器（核心区别在"有没有旧树可复用"）：

首次挂载：mountChildFibers（从 null 构建新子 Fiber 链）。
更新：reconcileChildFibers（对比 current.child 链与新的 nextChildren：复用/插入/删除）。

链表结构与指针：

fiber.child：第一个子节点。
fiber.sibling：兄弟节点（单链向右）。
fiber.return：父节点（便于回溯完成与向上合并副作用）。

jsx 复制代码

// JSX

  
  


// Fiber 链（简化）
MyPanel (return: parent)
  └─ child → Title (return: MyPanel)
       └─ sibling → Content (return: MyPanel)

关键点：beginWork 只"产出子树的结构与下一步任务"，不做 DOM；DOM 的创建与属性设置在 completeWork，插入/更新在"提交阶段"。

2.4 工作单元的分解与优先级处理

单元分解（DFS）：

工作循环优先深入 child；child 完成后转向 sibling；最后回到 return。
每个 Fiber 的 begin/complete 构成一个"工作单元"，渲染可切片、可中断。

优先级（Lanes）：

renderLanes 决定当前渲染的优先级集合；若该 Fiber 在此优先级下无待处理工作，可"跳过"（复用旧树）。
出口条件（简化理解）：没有更高优先级的变更、props/state 未变、更不需要上下文更新 → bailout，直接返回可能的 child 或 null。

概念串联：

beginWork：决定"需要渲染哪些子元素"，并产生/对齐子 Fiber。
completeWork：在向上回溯时创建宿主实例、收集副作用。
提交阶段：统一执行副作用（commitPlacement/commitUpdate 等），把渲染结果应用到 DOM。

jsx 复制代码

// 例子：点击后新增一个 <li>
function List({items}) {
  return (
    <ul>
      {items.map((i) => (
        <li>{i}</li>
      ))}
    </ul>
  );
}

// 点击 setState 入队 → 渲染阶段：
// beginWork(List) → nextChildren = [..., <li>]
// reconcileChildren 对比老的 <li> 列表：复用旧的、创建新的 Fiber
// completeWork(new <li>)：准备 DOM 实例与属性
// 提交阶段：commitPlacement(new <li>) 插入到真实 DOM

三、completeWork：Fiber 树的向上归并与 DOM 生成

当 beginWork 遍历到叶子节点（无 child 的 Fiber 节点）后，performUnitOfWork 会切换到 completeWork 阶段。completeWork 从叶子节点开始向上归并，核心是 "将 Fiber 节点转换为实际 DOM，并完成挂载前的准备"。

3.1 completeWork 的触发时机与执行条件

触发时机：工作循环在某个 Fiber 的子树已展开完毕、beginWork 返回 null 后，会回溯到该 Fiber 并执行 completeWork(current, workInProgress, renderLanes)。这是一段"向上归并"的过程。
作用概览：

为宿主节点（HostComponent/HostText）创建或对齐实例（不插入 DOM）。
为"更新"生成变更负载（payload），以便提交阶段执行。
向上合并（bubble）子树的副作用标志（subtreeFlags），为提交阶段收敛出一条待执行的效果链。

示意（伪代码）：

javascript 复制代码

function completeUnitOfWork(unitOfWork: Fiber): void {
  let completedWork: Fiber = unitOfWork;
  do {
    const current = completedWork.alternate;
    const returnFiber = completedWork.return;
    let next;

    // 执行完成工作的核心逻辑
    next = completeWork(current, completedWork, entangledRenderLanes);

    // 若生成新工作单元，切换到新工作单元并返回
    if (next !== null) {
      workInProgress = next;
      return;
    }

    // 若有兄弟节点，切换到兄弟节点并返回
    const siblingFiber = completedWork.sibling;
    if (siblingFiber !== null) {
      workInProgress = siblingFiber;
      return;
    }

    // 否则返回父节点继续处理
    completedWork = returnFiber;
    workInProgress = completedWork;
  } while (completedWork !== null);
}

3.2 不同类型 Fiber 节点的 completeWork 处理逻辑

与 beginWork 类似，completeWork 也会根据 Fiber 节点的 tag 执行差异化逻辑，核心类型如下：

HostComponent（如 div）：

首次挂载：创建宿主实例 createInstance(type, props, rootContainer, hostContext)，appendAllChildren(instance, wip) 把已创建的子实例挂到该实例上（仍在内存结构里），然后 setInitialProperties(instance, props) 设置初始属性。
更新：对比新旧 props，prepareUpdate(instance, type, oldProps, newProps, rootContainer, hostContext) 返回变更负载；若非空，给 Fiber 标记 Update 并挂载负载，留给提交阶段执行。

HostText（文本节点）：

首次挂载：createTextInstance(text, rootContainer, hostContext) 创建文本实例，挂到 fiber.stateNode。
更新：若文本变了，标记 Update，提交阶段会调用 commitHostTextUpdate 实际更新内容。

FunctionComponent / Fragment / Context 等非宿主节点：

不创建 DOM 实例；completeWork 主要做"副作用合并"和 Ref 变更判断（若 ref 变化会标记 Ref）。

ClassComponent：

不直接创建 DOM；常在 completeWork 阶段标记 Ref（实例 ref 变化）与合并子树效果。

Suspense / Offscreen：

根据可见性/回退策略在 begin 阶段已决定子树展开；complete 阶段继续合并 flags，并可能标记 Visibility 相关效果。

3.3 DOM 节点的创建、属性赋值与子节点挂载

核心要点：

completeWork"生成/准备"宿主实例与属性，不做真实 DOM 插入；真实插入发生在提交阶段的 commitPlacement。
子节点挂载通过 appendAllChildren(instance, wip) 把子实例树挂到当前实例的内部结构（即 stateNode 的子列表），为后续 commitPlacement 一次性插入打好基础。

javascript 复制代码

// （挂载 vs 更新）
function completeWork(current, wip) {
  switch (wip.tag) {
    case ActivityComponent:
    case LazyComponent:
    case SimpleMemoComponent:
    case FunctionComponent:
    case ForwardRef:
    case Fragment:
    case Mode:
    case Profiler:
    case ContextConsumer:
    case MemoComponent:
      // 这些类型的组件不需要创建DOM节点
      // 冒泡当前节点的属性（如 subtreeFlags、lanes）到父节点
      bubbleProperties(workInProgress);
      return null; // 无后续处理，返回 null
    case HostComponent: {
      // ...首次客户端渲染逻辑

      // 更新宿主容器（如 DOM 容器）的状态
      updateHostContainer(current, workInProgress);
      // 冒泡属性到父节点（根节点无父节点，此处主要是处理自身 subtreeFlags）
      bubbleProperties(workInProgress);
      return;
    }

    case HostText: {
      const newText = wip.pendingProps;
      if (current && workInProgress.stateNode != null) {
        const oldText = current.memoizedProps; // 上一次渲染的文本内容
        // 调用文本节点更新逻辑（对比新旧文本，生成更新队列）
        updateHostText(current, workInProgress, oldText, newText);
      } else {
        // 客户端挂载：创建文本实例（如 DOM 中的 Text 节点）
        const rootContainerInstance = getRootHostContainer();
        const currentHostContext = getHostContext();
        markCloned(workInProgress);
        // 创建文本实例（如 DOM 中的 Text 节点）
        workInProgress.stateNode = createTextInstance(
          newText,
          rootContainerInstance,
          currentHostContext,
          workInProgress
        );
      }
      bubbleProperties(workInProgress);
      return;
    }

    // ... 其他类型以"合并副作用"为主
  }
}

3.4 副作用的收集与标记

Flags（部分常见）：

Placement：表示需要插入（新增节点）。
Update：属性或文本变更，提交阶段读取 Fiber 的变更负载执行。
Deletion：删除节点。
Ref：ref 变更，提交阶段会附加/清理 ref。
Visibility / Passive：可见性与副作用相关标记。合并与传播：
每个 Fiber 在 complete 阶段会把自身与子树的 flags 合并到 subtreeFlags，以便根在提交阶段一次性遍历需要执行的效果。

合并示意：

javascript 复制代码

// 功能：在 Fiber 树归并阶段，向上汇总子节点的优先级、副作用等关键信息
function bubbleProperties(completedWork: Fiber) {
  // 判断是否&#34;跳过更新&#34;（子树无变化）：存在旧节点且新旧子节点引用相同
  const didBailout =
    completedWork.alternate !== null &&
    completedWork.alternate.child === completedWork.child;

  let newChildLanes: Lanes = NoLanes; // 合并后的子树优先级
  let subtreeFlags = NoFlags; // 合并后的子树副作用标记

  if (!didBailout) {
    // 【子树有更新】：全量收集子节点信息
    let child = completedWork.child;
    while (child !== null) {
      // 合并子节点自身及子树的优先级
      newChildLanes = mergeLanes(
        newChildLanes,
        mergeLanes(child.lanes, child.childLanes)
      );
      // 合并子节点自身及子树的所有副作用
      subtreeFlags |= child.subtreeFlags | child.flags;
      // 修正子节点的父引用，确保链表关系正确
      child.return = completedWork;

      child = child.sibling; // 遍历下一个兄弟节点
    }

    // 将合并的子树副作用标记到当前节点
    completedWork.subtreeFlags |= subtreeFlags;
  } else {
    // 【子树无更新】：仅收集静态信息（过滤动态副作用）
    let child = completedWork.child;
    while (child !== null) {
      // 合并子节点自身及子树的优先级（未处理的优先级仍需传递）
      newChildLanes = mergeLanes(
        newChildLanes,
        mergeLanes(child.lanes, child.childLanes)
      );
      // 仅合并静态副作用（如静态DOM属性，动态副作用无需传递）
      subtreeFlags |=
        (child.subtreeFlags & StaticMask) | (child.flags & StaticMask);
      // 修正子节点的父引用
      child.return = completedWork;

      child = child.sibling;
    }

    completedWork.subtreeFlags |= subtreeFlags;
  }

  // 保存合并后的子树优先级到当前节点
  completedWork.childLanes = newChildLanes;

  // 返回是否跳过更新的标志，供上层节点判断
  return didBailout;
}

例子：文本更新的标记与提交

jsx 复制代码

function TextExample() {
  const [text, setText] = useState(&#34;hello&#34;);
  useEffect(() => {
    setTimeout(() => setText(&#34;world&#34;), 100);
  }, []);
  return <div>{text}</div>;
}
// 1. 初次挂载：生成 `HostText(&#34;hello&#34;)`，提交后运行 `useEffect`（被动副作用）。
// 2. 更新调度：`setTimeout` 触发 `setText(&#34;world&#34;)`，通过 `scheduleUpdateOnFiber` 为根打上待处理的 `Lane` 并触发下一次渲染。
// 3. render 阶段：
// - `BeginWork` 进入 `HostText` 的更新路径。
// - `CompleteWork` 的 `case HostText` 中调用 `updateHostText(current, workInProgress, oldText, newText)`。
// - 若 `oldText !== newText`，执行 `markUpdate(workInProgress)`，在该 Fiber 的 `flags` 中设置 `Update`。
// - 随后 `bubbleProperties` 汇总子树标志到父节点的 `subtreeFlags`，便于提交阶段快速定位变化。
// 4. 提交阶段（mutation effects）:
// - 扫描到该 `HostText` 带有 `Update`，调用 `commitHostTextUpdate(stateNode, oldText, newText)` 实际更新 DOM 文本为 &#34;world&#34;。

结论（把 complete 与提交阶段区分清楚）

completeWork 是"向上归并与准备"：创建/对齐宿主实例、设置初始属性或生成变更负载、合并副作用标记。
真实 DOM 变更（插入/更新/删除）在提交阶段完成：如 commitPlacement、commitHostTextUpdate 等。
这保证渲染阶段能被时间切片与优先级打断，而提交阶段在确定的效果列表上一次性执行，提升稳定性与可控性。

四、beginWork 与 completeWork 的协同机制

beginWork 的 "向下构建" 与 completeWork 的 "向上归并" 并非独立流程，而是通过 "工作单元链表" 和 "双缓存机制" 紧密协同，共同完成初次渲染的 Fiber 树构建与 DOM 生成。

4.1 自上而下构建与自下而上归并的流程闭环

流程主线：

向下构建（beginWork）：根据 fiber.tag 选择处理器，计算 nextChildren，并通过 mountChildFibers/reconcileChildFibers 生成/复用子 Fiber 链，返回 fiber.child 继续深入。
向上归并（completeWork）：当子树展开完毕（beginWork 返回 null）回溯到父节点，创建/对齐宿主实例（HostComponent/HostText）、准备更新负载，并合并副作用标记（bubbleProperties）。
提交阶段（commit）：在统一的效果列表上执行宿主副作用，将变更应用到 DOM（如 commitPlacement、commitHostTextUpdate）。

javascript 复制代码

// 简化伪码
function performUnitOfWork(wip) {
  // 向下：展开当前节点的子树
  const next = beginWork(wip.alternate, wip, renderLanes);
  wip.memoizedProps = wip.pendingProps;

  // 有子，继续向下；无子，开始向上
  if (next !== null) return next;

  // 向上：准备实例/负载并合并副作用
  do {
    completeWork(wip.alternate, wip, renderLanes);
    bubbleProperties(wip); // 合并 flags / subtreeFlags
    if (wip.sibling !== null) return wip.sibling;
    wip = wip.return;
  } while (wip !== null);

  // 根收敛后，进入提交阶段
  return null;
}

4.2 双缓存 Fiber 树切换中的职责配合

双缓存（current ↔ workInProgress）：

渲染阶段构建的是 WIP 树（指针 workInProgress.alternate === current）；旧树 current 仍代表"已提交"的 UI。
commit 阶段将 root.current 切换为本次完成的 finishedWork（WIP 树），使其成为新的"已提交"树。

职责分工：

beginWork：读取 current 的已有信息（如 memoizedProps/state），决定是否复用（bailout）或生成新的子 Fiber。
completeWork：在 WIP 节点上创建/对齐宿主实例、设置初始属性或生成更新负载，并合并副作用。
commit：读取 WIP 树上的 Flags/负载，进行 DOM 插入/更新/删除，并完成 ref 和 effect 的附加/清理。

插入位置明确：

宿主实例的"创建与属性准备"在 complete 阶段完成；
真实插入 DOM 的操作在提交阶段 commitPlacement 执行。

五、最后

Fiber 架构下的渲染，本质是通过 beginWork 与 completeWork 的双向协作，完成从组件逻辑到 DOM 实例的高效转化 ------ 二者如同 "分工明确的工程队"：beginWork 负责 "规划蓝图"（构建 Fiber 树结构、分解渲染任务、处理组件逻辑），completeWork 负责 "落地施工"（创建 DOM 实例、准备属性与更新负载、收集副作用），最终通过双缓存机制与提交阶段，实现视图的稳定挂载。理解 beginWork 与 completeWork 的核心分工后，可进一步拆解 React 渲染的关键细节，形成完整的知识体系：

子 Fiber 构建的核心：reconcileChildren 逻辑：深入 mountChildFibers（初次挂载）与 reconcileChildFibers（更新）的内部实现，理解 React 如何通过 "key 比对""类型判断" 实现子节点的复用、插入与删除，掌握 Diff 算法的核心规则；
宿主节点的差异化处理：聚焦 HostComponent（原生 DOM 节点）与 HostText（文本节点）的完整生命周期，包括 createInstance/createTextInstance 的 DOM 创建细节、setInitialProperties 的属性初始化逻辑，以及更新时 prepareUpdate 的变更计算规则；
提交阶段的副作用执行：从 completeWork 收集的副作用标记出发，学习提交阶段如何通过 commitMutationEffects（执行 DOM 变更）、commitLayoutEffects（执行布局相关副作用）等流程，将 workInProgress 树的准备结果最终应用到页面；