beginWork “递”阶段 ​

beginWork 主要工作是根据传入的 Fiber 节点 创建或复用 子 Fiber 节点

beginWork 流程图

beginWork 的入参 ​

源码地址 beginWork | react-reconciler/src/ReactFiberBeginWork.old.js

    function beginWork(
      current: Fiber | null,
      workInProgress: Fiber,
    
      // 优先级相关（先不管这个参数）
      renderLanes: Lanes,
    ): Fiber | null {
      // ... 省略函数体
    }

在之前解读 performUnitOfWork 时说过 current 和 workInProgress 这两个重要变量，这里再重复一下：

• current 表示当前页面正在使用的 Fiber 节点，即 workInProgress.alternate
• workInProgress 表示当前正在构建的 Fiber 节点

beginWork 工作的两部分 ​

在 Fiber 双缓存的构建 时说过，除 rootFiber 以外组件 mount 时 current === null，而组件 update 时，由于已经 mount 过了，所以 current !== null（即 current === null ? mount : update）

根据这个特性可以将 beginWork 的工作分为两部分：

• update 时：如果 current 存在且满足一定的条件时，可以复用 current 的 Fiber 节点（即上一次更新的 Fiber 节点）
• mount 时：根据 fiber.tag 进入不同的处理函数，然后调用 reconcileChildren 创建 子 Fiber 节点

    function beginWork(current: Fiber | null, workInProgress: Fiber, renderLanes: Lanes): Fiber | null {
      /* update 时，如果 current 存在可能存在优化路径，可以复用上一次更新的 Fiber 节点 */
      if (current !== null) {
        const oldProps = current.memoizedProps
        const newProps = workInProgress.pendingProps
    
        if (
          oldProps !== newProps ||
          hasLegacyContextChanged() ||
          // Force a re-render if the implementation changed due to hot reload:
          (__DEV__ ? workInProgress.type !== current.type : false)
        ) {
          // If props or context changed, mark the fiber as having performed work.
          // This may be unset if the props are determined to be equal later (memo).
          // 当 props 或 context 发生变化时将 Fiber 标记为需要更新
          didReceiveUpdate = true
        } else {
          // checkScheduledUpdateOrContext 函数用于检查是否有挂起的更新或 context 变化
          const hasScheduledUpdateOrContext = checkScheduledUpdateOrContext(current, renderLanes)
          if (
            !hasScheduledUpdateOrContext &&
            // If this is the second pass of an error or suspense boundary, there
            // may not be work scheduled on `current`, so we check for this flag.
            (workInProgress.flags & DidCapture) === NoFlags
          ) {
            // 当没有挂起的更新或 context 时，复用 current 的节点
            didReceiveUpdate = false
            return attemptEarlyBailoutIfNoScheduledUpdate(current, workInProgress, renderLanes)
          }
          if ((current.flags & ForceUpdateForLegacySuspense) !== NoFlags) {
            // This is a special case that only exists for legacy mode.
            // See https://github.com/facebook/react/pull/19216.
            // legacy 模式强制更新
            didReceiveUpdate = true
          } else {
            // An update was scheduled on this fiber, but there are no new props
            // nor legacy context. Set this to false. If an update queue or context
            // consumer produces a changed value, it will set this to true. Otherwise,
            // the component will assume the children have not changed and bail out.
            // 在这个 Fiber 节点上安排了一个更新，但由于 props 和 context 都没有发生变化，将其设置为 false
            // 如果更新队列或 context 消费者生成了更改的值，则将其设置为 true。否则该组件会设置 children 没有更新并退出
            didReceiveUpdate = false
          }
        }
      } else {
        /* mount 时，根据 tag 创建不同类型的子 Fiber 节点 */
        didReceiveUpdate = false
    
        if (getIsHydrating() && isForkedChild(workInProgress)) {
          // Check if this child belongs to a list of muliple children in
          // its parent.
          //
          // In a true multi-threaded implementation, we would render children on
          // parallel threads. This would represent the beginning of a new render
          // thread for this subtree.
          //
          // We only use this for id generation during hydration, which is why the
          // logic is located in this special branch.
          const slotIndex = workInProgress.index
          const numberOfForks = getForksAtLevel(workInProgress)
          pushTreeId(workInProgress, numberOfForks, slotIndex)
        }
      }
    
      // Before entering the begin phase, clear pending update priority.
      // TODO: This assumes that we're about to evaluate the component and process
      // the update queue. However, there's an exception: SimpleMemoComponent
      // sometimes bails out later in the begin phase. This indicates that we should
      // move this assignment out of the common path and into each branch.
      workInProgress.lanes = NoLanes
    
      // 根据 tag 进入不同的处理函数，然后调用 reconcileChildren 创建 Fiber 节点
      switch (workInProgress.tag) {
        // ... 省略其他 case
    
        // 函数组件
        case FunctionComponent: {
          const Component = workInProgress.type
          const unresolvedProps = workInProgress.pendingProps
          const resolvedProps =
            workInProgress.elementType === Component
              ? unresolvedProps
              : resolveDefaultProps(Component, unresolvedProps)
          return updateFunctionComponent(current, workInProgress, Component, resolvedProps, renderLanes)
        }
        // 类组件
        case ClassComponent: {
          const Component = workInProgress.type
          const unresolvedProps = workInProgress.pendingProps
          const resolvedProps =
            workInProgress.elementType === Component
              ? unresolvedProps
              : resolveDefaultProps(Component, unresolvedProps)
          return updateClassComponent(current, workInProgress, Component, resolvedProps, renderLanes)
        }
        // rootFiber
        case HostRoot:
          return updateHostRoot(current, workInProgress, renderLanes)
        // 普通 DOM 标签
        case HostComponent:
          return updateHostComponent(current, workInProgress, renderLanes)
        // 文本节点
        case HostText:
          return updateHostText(current, workInProgress)
    
        // ... 省略其他 case
      }
    
      // 当 switch 语句中没有匹配到任何类型时，抛出错误
      throw new Error(
        `Unknown unit of work tag (${workInProgress.tag}). This error is likely caused by a bug in ` +
          'React. Please file an issue.'
      )
    }

React 中的节点类型定义如下：

源码地址 react-reconciler/src/ReactWorkTags.js

    export const FunctionComponent = 0
    export const ClassComponent = 1
    export const IndeterminateComponent = 2 // Before we know whether it is function or class
    export const HostRoot = 3 // Root of a host tree. Could be nested inside another node.
    export const HostPortal = 4 // A subtree. Could be an entry point to a different renderer.
    export const HostComponent = 5
    export const HostText = 6
    export const Fragment = 7
    export const Mode = 8
    export const ContextConsumer = 9
    export const ContextProvider = 10
    export const ForwardRef = 11
    export const Profiler = 12
    export const SuspenseComponent = 13
    export const MemoComponent = 14
    export const SimpleMemoComponent = 15
    export const LazyComponent = 16
    export const IncompleteClassComponent = 17
    export const DehydratedFragment = 18
    export const SuspenseListComponent = 19
    export const ScopeComponent = 21
    export const OffscreenComponent = 22
    export const LegacyHiddenComponent = 23
    export const CacheComponent = 24
    export const TracingMarkerComponent = 25

updateHostComponent ​

updateHostComponent 函数用于处理普通 DOM 标签

源码地址 updateHostComponent | react-reconciler/src/ReactFiberBeginWork.old.js

    function updateHostComponent(current: Fiber | null, workInProgress: Fiber, renderLanes: Lanes) {
      pushHostContext(workInProgress)
    
      if (current === null) {
        tryToClaimNextHydratableInstance(workInProgress)
      }
    
      const type = workInProgress.type
      const nextProps = workInProgress.pendingProps
      const prevProps = current !== null ? current.memoizedProps : null
    
      let nextChildren = nextProps.children
      // 判断是否是纯文本或是否具有 dangerouslySetInnerHTML 属性（即内容不需要 React 来渲染）
      const isDirectTextChild = shouldSetTextContent(type, nextProps)
    
      // 如果是纯文本或具有 dangerouslySetInnerHTML 属性，那么将 nextChildren 设置为 null
      if (isDirectTextChild) {
        nextChildren = null
      } else if (prevProps !== null && shouldSetTextContent(type, prevProps)) {
        // 如果从纯文本节点切换到普通节点或空节点时，需要打上 ContentReset 标记
        workInProgress.flags |= ContentReset
      }
    
      markRef(current, workInProgress)
      // 调用 reconcileChildren 创建子 Fiber 节点
      reconcileChildren(current, workInProgress, nextChildren, renderLanes)
      return workInProgress.child
    }

shouldSetTextContent ​

源码地址 shouldSetTextContent | react-dom/src/client/ReactDOMHostConfig.js

    function shouldSetTextContent(type: string, props: Props): boolean {
      return (
        type === 'textarea' ||
        type === 'noscript' ||
        typeof props.children === 'string' ||
        typeof props.children === 'number' ||
        (typeof props.dangerouslySetInnerHTML === 'object' &&
          props.dangerouslySetInnerHTML !== null &&
          props.dangerouslySetInnerHTML.__html != null)
      )
    }

attemptEarlyBailoutIfNoScheduledUpdate ​

源码地址 attemptEarlyBailoutIfNoScheduledUpdate | react-reconciler/src/ReactFiberBeginWork.old.js

    function attemptEarlyBailoutIfNoScheduledUpdate(
      current: Fiber,
      workInProgress: Fiber,
      renderLanes: Lanes,
    ) {
      // 根据 tag 进入不同的处理函数
      switch (workInProgress.tag) {
        case HostRoot:
          pushHostRootContext(workInProgress)
          const root: FiberRoot = workInProgress.stateNode
          pushRootTransition(workInProgress, root, renderLanes)
    
          if (enableCache) {
            const cache: Cache = current.memoizedState.cache
            pushCacheProvider(workInProgress, cache)
          }
          resetHydrationState()
          break
        case HostComponent:
          pushHostContext(workInProgress)
          break
        case ClassComponent: {
          const Component = workInProgress.type
          if (isLegacyContextProvider(Component)) {
            pushLegacyContextProvider(workInProgress)
          }
          break
        }
    
        // ... 省略其他 case
      }
    
      // 调用 bailoutOnAlreadyFinishedWork 函数复用 Fiber 节点
      return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes)
    }

bailoutOnAlreadyFinishedWork ​

源码地址 bailoutOnAlreadyFinishedWork | react-reconciler/src/ReactFiberBeginWork.old.js

    function bailoutOnAlreadyFinishedWork(
      current: Fiber | null,
      workInProgress: Fiber,
      renderLanes: Lanes,
    ): Fiber | null {
      if (current !== null) {
        // 复用之前的依赖
        workInProgress.dependencies = current.dependencies
      }
    
      if (enableProfilerTimer) {
        // Don't update "base" render times for bailouts.
        stopProfilerTimerIfRunning(workInProgress)
      }
    
      markSkippedUpdateLanes(workInProgress.lanes)
    
      // 检查子节点是否有任何待处理的工作
      if (!includesSomeLane(renderLanes, workInProgress.childLanes)) {
        if (enableLazyContextPropagation && current !== null) {
          lazilyPropagateParentContextChanges(current, workInProgress, renderLanes)
          if (!includesSomeLane(renderLanes, workInProgress.childLanes)) {
            return null
          }
        } else {
          return null
        }
      }
    
      // 克隆子 Fiber
      cloneChildFibers(current, workInProgress)
      return workInProgress.child
    }

reconcileChildren ​

reconcileChildren 函数用于创建或更新 Fiber 树，会根据 current === null 的结果执行不同的逻辑

源码地址 reconcileChildren | react-reconciler/src/ReactFiberBeginWork.old.js

    export function reconcileChildren(
      current: Fiber | null,
      workInProgress: Fiber,
      nextChildren: any,
      renderLanes: Lanes,
    ) {
      if (current === null) {
        // If this is a fresh new component that hasn't been rendered yet, we
        // won't update its child set by applying minimal side-effects. Instead,
        // we will add them all to the child before it gets rendered. That means
        // we can optimize this reconciliation pass by not tracking side-effects.
        // mount 阶段，这是一个还未渲染过的全新组件，可以不用考虑对比最小副作用来更新它的子节点
        // 可以在它渲染前添加上所有的子节点，意味着我们可以不对比副作用来优化这个操作
        workInProgress.child = mountChildFibers(workInProgress, null, nextChildren, renderLanes)
      } else {
        // If the current child is the same as the work in progress, it means that
        // we haven't yet started any work on these children. Therefore, we use
        // the clone algorithm to create a copy of all the current children.
        // 如果 current 的子节点和 workInProgress 的子节点相同，意味着我们还没有开始对这些子节点进行任何操作
        // 因此，将使用克隆算法来创建当前子节点的副本
    
        // If we had any progressed work already, that is invalid at this point so
        // let's throw it out.
        // 如果 workInProgress 有 child，但是 current 没有 child，那么说明 workInProgress 的 child 是无效的，需要丢弃
    
        // update 时，current 为上一次渲染的 Fiber 节点
        workInProgress.child = reconcileChildFibers(
          workInProgress,
          current.child,
          nextChildren,
          renderLanes,
        )
      }
    }

    export const reconcileChildFibers = ChildReconciler(true)
    export const mountChildFibers = ChildReconciler(false)

TIP

reconcileChildFibers 和 mountChildFibers 最终都是 ChildReconciler 传递不同的参数返回的函数；在 ChildReconciler 函数中用 shouldTrackSideEffects 来判断是否需要跟踪副作用（即为对应的 Fiber 节点 添加 flags 属性），因此 reconcileChildFibers 和 mountChildFibers 的不同在于对副作用的处理不同

ChildReconciler ​

ChildReconciler 中定义了大量如 deleteXXX、placeXXX、updateXXX、reconcileXXX 的函数，这些函数覆盖了对 Fiber 节点 的创建、增加、删除、修改等操作，而这些函数将直接或间接地被 reconcileChildFibers 所调用

源码地址 ChildReconciler | react-reconciler/src/ReactChildFiber.old.js

    function ChildReconciler(shouldTrackSideEffects) {
      /* 以下函数省略函数体 */
      function deleteChild(returnFiber, childToDelete) {}
      function deleteRemainingChildren(returnFiber, currentFirstChild) {}
      function mapRemainingChildren(returnFiber, currentFirstChild) {}
      function useFiber(fiber, pendingProps) {}
      function placeChild(newFiber, lastPlacedIndex, newIndex) {}
      function placeSingleChild(newFiber) {}
      function updateTextNode(returnFiber, current, textContent, lanes) {}
      function updateElement(returnFiber, current, element, lanes) {}
      function updatePortal(returnFiber, current, portal, lanes) {}
      function updateFragment(returnFiber, current, fragment, lanes, key) {}
      function createChild(returnFiber, newChild, lanes) {}
      function updateSlot(returnFiber, oldFiber, newChild, lanes) {}
      function updateFromMap(existingChildren, returnFiber, newIdx, newChild, lanes) {}
      function warnOnInvalidKey(child, knownKeys, returnFiber) {}
      function reconcileChildrenArray(returnFiber, currentFirstChild, newChildren, lanes) {}
      function reconcileChildrenIterator(returnFiber, currentFirstChild, newChildrenIterable, lanes) {}
      function reconcileSingleTextNode(returnFiber, currentFirstChild, textContent, lanes) {}
      function reconcileSingleElement(returnFiber, currentFirstChild, element, lanes) {}
      function reconcileSinglePortal(returnFiber, currentFirstChild, portal, lanes) {}
    
      // This API will tag the children with the side-effect of the reconciliation
      // itself. They will be added to the side-effect list as we pass through the
      // children and the parent.
      function reconcileChildFibers(
        returnFiber: Fiber,
        currentFirstChild: Fiber | null,
        newChild: any,
        lanes: Lanes,
      ): Fiber | null {
        debugger
        // This function is not recursive.
        // If the top level item is an array, we treat it as a set of children,
        // not as a fragment. Nested arrays on the other hand will be treated as
        // fragment nodes. Recursion happens at the normal flow.
    
        // Handle top level unkeyed fragments as if they were arrays.
        // This leads to an ambiguity between <>{[...]}</> and <>...</>.
        // We treat the ambiguous cases above the same.
        // 判断最外层的 newChild 是否是 Fragment 组件
        const isUnkeyedTopLevelFragment =
          typeof newChild === 'object' &&
          newChild !== null &&
          newChild.type === REACT_FRAGMENT_TYPE &&
          newChild.key === null
        // 如果最外层是 Fragment 组件，那么将其 children 作为 newChild
        if (isUnkeyedTopLevelFragment) {
          newChild = newChild.props.children
        }
    
        // 判断 newChild 是否是对象
        if (typeof newChild === 'object' && newChild !== null) {
          switch (newChild.$$typeof) {
            // 处理 jsx 节点
            case REACT_ELEMENT_TYPE:
              return placeSingleChild(
                reconcileSingleElement(returnFiber, currentFirstChild, newChild, lanes),
              )
            // 处理 portal 节点
            case REACT_PORTAL_TYPE:
              return placeSingleChild(
                reconcileSinglePortal(returnFiber, currentFirstChild, newChild, lanes),
              )
            // 处理 lazy 节点
            case REACT_LAZY_TYPE:
              const payload = newChild._payload
              const init = newChild._init
              // TODO: This function is supposed to be non-recursive.
              return reconcileChildFibers(returnFiber, currentFirstChild, init(payload), lanes)
          }
    
          // 处理多个子节点
          if (isArray(newChild)) {
            return reconcileChildrenArray(returnFiber, currentFirstChild, newChild, lanes)
          }
    
          // 处理可迭代的子节点
          if (getIteratorFn(newChild)) {
            return reconcileChildrenIterator(returnFiber, currentFirstChild, newChild, lanes)
          }
    
          throwOnInvalidObjectType(returnFiber, newChild)
        }
    
        // 处理文本节点
        if ((typeof newChild === 'string' && newChild !== '') || typeof newChild === 'number') {
          return placeSingleChild(
            reconcileSingleTextNode(returnFiber, currentFirstChild, '' + newChild, lanes),
          )
        }
    
        // 删除剩余的子节点
        return deleteRemainingChildren(returnFiber, currentFirstChild)
      }
    
      return reconcileChildFibers
    }

flags 属性 ​

flags 属性用于标记 Fiber 节点 的状态，其值为二进制数，每一位代表一种状态，如下：

    export const Placement = /*                    */ 0b00000000000000000000000010
    export const Update = /*                       */ 0b00000000000000000000000100
    export const Deletion = /*                     */ 0b00000000000000000000001000
    export const ChildDeletion = /*                */ 0b00000000000000000000010000
    export const ContentReset = /*                 */ 0b00000000000000000000100000
    export const Callback = /*                     */ 0b00000000000000000001000000
    export const DidCapture = /*                   */ 0b00000000000000000010000000
    export const ForceClientRender = /*            */ 0b00000000000000000100000000
    export const Ref = /*                          */ 0b00000000000000001000000000
    export const Snapshot = /*                     */ 0b00000000000000010000000000
    export const Passive = /*                      */ 0b00000000000000100000000000
    export const Hydrating = /*                    */ 0b00000000000001000000000000
    export const Visibility = /*                   */ 0b00000000000010000000000000
    export const StoreConsistency = /*             */ 0b00000000000100000000000000

在通知 Renderer 将 Fiber 节点 对应的 DOM 节点 渲染到页面上需要满足以下两个条件：

1. fiber.stateNode 存在（即 Fiber 节点 中保存了对应的 DOM 节点）
2. fiber.flags 中包含 Placement 标记（即 DOM 节点 需要被插入到页面上）

在首屏渲染时如何满足上述两个条件？

1. fiber.stateNode 会在 completeWork 中创建
2. 在 mount 时只有 rootFiber 会赋值 Placement flags，其他 Fiber 节点 都不会赋值 Placement flags，因此在 commit 阶段，插入操作仅会在根节点执行一次，避免了重复的 DOM 操作

如果在 mountChildFibers 时也会赋值 Placement flags，那么整棵 Fiber 的每个节点都会具有 Placement flags，这会导致在 commit 段执行大量的 DOM 插入操作，效率极低；

因此 React 进行了优化：mount 时只有 rootFiber 会赋值 Placement flags，从而确保在 commit 阶段只有一次插入操作，有效地提升了渲染性能