react beginwork

这是一个非常核心且深入的问题。beginWork 是 React Fiber 架构中最关键的函数之一。

简单来说，beginWork 是 React Render 阶段（协调阶段） 的"入场口"。React 在遍历 Fiber 树时，每到达一个节点，就会调用一次 beginWork。

它的主要任务是：根据新的 Props 和 State，计算出当前组件应该呈现什么样子（即新的子节点），并将这个新的结构与旧的结构进行对比（Reconciliation/diff），找出差异，最后返回第一个子节点以便继续向下遍历。

下面我们详细拆解 beginWork 所做的事情，最后我会梳理成一张流程图。

---

beginWork 的核心职责拆解

beginWork 的工作流程可以大致分为三个主要阶段：

阶段一：性能优化探测（Bailout 策略）

在动手做任何真正的渲染工作之前，React 会先尝试"偷懒"。这是 React 高性能的关键所在。

1. 检查是否需要更新：

   beginWork 会对比当前节点的旧状态 (current fiber) 和新状态 (workInProgress fiber)。它会检查以下几点：

   • Props 是否改变？ (旧 props !== 新 props)
   • Context 是否改变？ (对于使用了 Context 的组件)
   • 是否有足够优先级的更新任务？ (检查 renderLanes，看当前节点是否有需要在本次渲染中处理的更新)

2. 尝试复用 (Bailout)：

   如果上述检查发现什么都没变，并且当前节点本身没有高优先级的更新任务，React 就会认为这个节点及其子树可能不需要更新。

   • 完全跳过 (Full Bailout)： 如果连它的子树也没有任何更新任务 (检查 childLanes)，那么 beginWork 会直接返回 null。这意味着："这条分支到此为止，下面都不用看了"。
   • 浅层跳过 (Shallow Bailout)： 如果当前节点不用更新，但是它的子孙节点有更新任务，React 就不能完全停下。它会克隆当前的子节点，然后返回这个子节点，继续向下走，跳过当前组件的重渲染逻辑（比如不会重新执行函数组件体）。

总结：这一阶段的目标是尽量复用旧的 Fiber 节点，避免不必要的计算。

阶段二：根据组件类型执行渲染逻辑（The Switch Statement）

如果无法复用（Bailout 失败），说明当前节点确实需要更新。

beginWork 内部是一个巨大的 switch (workInProgress.tag) 语句。它会根据 Fiber 节点的类型（函数组件、类组件、原生 DOM 节点等），执行不同的处理逻辑。

以下是几种常见类型的处理方式：

1. FunctionComponent (函数组件):

   • 执行函数体： 调用你写的组件函数，例如 MyComponent(props)。
   • 处理 Hooks： 在执行函数体时，useState, useEffect 等 Hooks 会被按顺序执行，计算出最新的 State。
   • 产出结果： 函数的返回值（通常是 JSX 转换成的 React.createElement 调用结果），这就是新的子元素 (New Children Elements) 。

2. ClassComponent (类组件):

   • 更新实例： 处理 getDerivedStateFromProps，处理 State 更新队列，更新组件实例的 state 和 props。
   • 判断是否更新： 调用 shouldComponentUpdate（如果定义了）。
   • 调用 Render： 如果需要更新，调用实例的 render() 方法。
   • 产出结果： render() 方法的返回值，即新的子元素。

3. HostComponent (原生 DOM 节点，如 <div>):

   • 原生节点本身没有业务逻辑运行。
   • 它的主要任务是准备处理它的子节点。React 会查看它的新 children prop。
   • 注意：原生节点的属性 diff（比如 style 变了）并不在 beginWork 做，而是在 completeWork 阶段做。

4. 其他类型 (Fragment, ContextProvider, Suspense 等):

   • 各自有特定的处理逻辑，但最终目的都是为了确定新的子元素 是什么。例如 ContextProvider 会将新的 value 推入 Context 栈。

总结：这一阶段的目标是运行组件代码，拿到组件最新的"图纸"（新的 React Elements）。

阶段三：协调子节点 (Reconciliation / Diffing)

这是 beginWork 最核心的一步，也是"Virtual DOM Diff"算法真正发生的地方。

不管阶段二是什么类型的组件，最终都拿到了一组新的子元素 (New Elements) 。现在的任务是把这些新元素和旧的子 Fiber 节点 (Current Child Fibers) 进行对比。

React 调用 reconcileChildren(current, workInProgress, nextChildren) 函数来完成这项工作：

1. 对比 (Diffing)：

   • 它会遍历新的 Elements 数组，并尝试与旧的 Fiber 链表进行匹配。
   • Key 的作用： 优先使用 key 进行匹配。如果 key 相同且类型相同，就复用旧的 Fiber 节点。
   • 类型对比： 如果 key 不同或者类型不同（比如 <div> 变成了 <span>），则标记旧节点为删除，创建新节点的 Fiber。

2. 创建新的 WIP Fiber：

   • 根据对比结果，生成新的 Fiber 结构，连接到 workInProgress.child 上。

3. 标记副作用 (Flags / Side Effects)：

   • 在创建新 Fiber 的过程中，如果发现需要进行 DOM 操作，就会在新 Fiber 上打上标记（flags）。
   • 例如：新插入的节点打上 Placement 标记；需要更新属性的节点打上 Update 标记；需要删除的旧节点打上 Deletion 标记，并添加到父节点的副作用列表中。

总结：这一阶段生成了新的 Fiber 子树结构，并找出了新旧之间的差异，打上了标记，为 Commit 阶段的 DOM 操作做好了准备。

函数返回

完成协调后，beginWork 的工作就完成了。它会返回 workInProgress.child（即新生成的第一个子 Fiber 节点）。

React 的工作循环会拿到这个返回值，将指针移动到这个子节点上，然后对它再次调用 beginWork，从而实现深度优先遍历（DFS）。

---

梳理图 (React beginWork 流程图)

这张图梳理了 beginWork 的决策路径。

代码段

graph TD Start["Start beginWork"] --> Input["输入: current Fiber, workInProgress Fiber, renderLanes"] Input --> CheckBailout{"1. 性能优化检查
Props/Context变了吗?
有高优更新吗?"} CheckBailout -- 否 --> CheckChildLanes{"检查子树 Lanes
子孙有更新吗?"} CheckChildLanes -- 无 --> BailoutEnd["全量 Bailout
返回 null, 停止分支遍历"] CheckChildLanes -- 有 --> CloneChild["浅层 Bailout
克隆子节点 Fiber"] CloneChild --> ReturnChild["结束
返回 workInProgress.child
继续向下遍历"] CheckBailout -- 是 --> SwitchTag{"2. 根据 Tag 处理
switch WIP.tag"} SwitchTag -- FunctionComp --> ExecFC["执行函数组件体
运行 Hooks useState等"] ExecFC --> GetChildrenFC["得到新的 Children Elements"] SwitchTag -- ClassComp --> UpdateClass["更新 Class 实例
处理 State, 调用 render"] UpdateClass --> GetChildrenCC["得到新的 Children Elements"] SwitchTag -- HostComp --> ProcessHost["处理原生节点
如 div, span"] ProcessHost --> GetChildrenHost["从 props 获取 Children Elements"] SwitchTag -- Other --> ProcessOther["处理 Context Fragment 等"] ProcessOther --> GetChildrenOther["得到新的 Children Elements"] GetChildrenFC --> Reconcile["3. 协调子节点 Diffing
调用 reconcileChildren"] GetChildrenCC --> Reconcile GetChildrenHost --> Reconcile GetChildrenOther --> Reconcile Reconcile --> Diffing["对比旧子Fibers 和 新子Elements"] Diffing --> CreateWIP["创建/复用 Fiber
构建新的 WIP 子 Fiber 树"] CreateWIP --> MarkFlags["标记副作用 Flags
Placement, Update, Deletion"] MarkFlags --> ReturnChild style Start fill:#f9f,stroke:#333,stroke-width:2px style BailoutEnd fill:#eee,stroke:#333,stroke-dasharray: 5 5 style ReturnChild fill:#cce5ff,stroke:#004085,stroke-width:2px style Reconcile fill:#d4edda,stroke:#28a745,stroke-width:2px