commitBeforeMutationEffects

在 commitRootImpl() 中会调用 commitBeforeMutationEffects，进入 before mutation 阶段（即执行 DOM 操作前）

这个阶段的执行过程和 render 阶段 类似，一样存在 “递” 和 “归” 的逻辑，通过深度优先遍历，找到最后一个有 BeforeMutationMask 标记的 Fiber，然后从下往上调用 complete 逻辑

commitBeforeMutationEffects 流程图

const shouldFireAfterActiveInstanceBlur = commitBeforeMutationEffects(root, finishedWork)

源码地址 commitBeforeMutationEffects() | react-reconciler/src/ReactFiberCommitWork.old.js

export function commitBeforeMutationEffects(
  root: FiberRoot, // 即 fiberRootNode
  firstChild: Fiber // 即 rootFiber
) {
  // 根据 enableCreateEventHandleAPI 的值来决定是否启用新的事件处理方式（默认为 false，该函数返回值为 null）
  focusedInstanceHandle = prepareForCommit(root.containerInfo)

  nextEffect = firstChild

  // 处理 before mutation 阶段的副作用
  commitBeforeMutationEffects_begin()

  // We no longer need to track the active instance fiber
  const shouldFire = shouldFireAfterActiveInstanceBlur
  shouldFireAfterActiveInstanceBlur = false
  focusedInstanceHandle = null

  return shouldFire
}

commitBeforeMutationEffects_begin

源码地址 commitBeforeMutationEffects_begin() | react-reconciler/src/ReactFiberCommitWork.old.js

function commitBeforeMutationEffects_begin() {
  // 对 Fiber 树进行深度优先遍历，当找到符合条件的节点时开始执行对应的操作
  while (nextEffect !== null) {
    const fiber = nextEffect

    // This phase is only used for beforeActiveInstanceBlur.
    // Let's skip the whole loop if it's off.
    // enableCreateEventHandleAPI 值为 false 可以忽略
    if (enableCreateEventHandleAPI) {
      // TODO: Should wrap this in flags check, too, as optimization
      const deletions = fiber.deletions
      if (deletions !== null) {
        for (let i = 0; i < deletions.length; i++) {
          const deletion = deletions[i]
          commitBeforeMutationEffectsDeletion(deletion)
        }
      }
    }

    const child = fiber.child

    // 找最后一个带有 BeforeMutationMask 标识的 Fiber
    if (
      // 判断当前 Fiber 的子 Fiber 树中是否存在 BeforeMutationMask 副作用（即 Update | Snapshot）
      (fiber.subtreeFlags & BeforeMutationMask) !== NoFlags &&
      // 判断当前 Fiber 是否存在子 Fiber
      child !== null
    ) {
      // 更新指针
      child.return = fiber
      nextEffect = child
    } else {
      // 找最后一个带有 BeforeMutationMask 标识的 Fiber 时，进入该 Fiber 的 complete 阶段
      commitBeforeMutationEffects_complete()
    }
  }
}

commitBeforeMutationEffects_complete

源码地址 commitBeforeMutationEffects_complete() | react-reconciler/src/ReactFiberCommitWork.old.js

function commitBeforeMutationEffects_complete() {
  while (nextEffect !== null) {
    const fiber = nextEffect

    try {
      // before mutation 阶段的主要函数
      commitBeforeMutationEffectsOnFiber(fiber)
    } catch (error) {
      captureCommitPhaseError(fiber, fiber.return, error)
    }

    const sibling = fiber.sibling
    // 判断是否存在兄弟节点
    if (sibling !== null) {
      // 当存在兄弟节点时更新指针并返回到 begin 方法继续向下遍历
      sibling.return = fiber.return
      nextEffect = sibling
      return
    }

    // 更新指针为父节点
    nextEffect = fiber.return
  }
}

commitBeforeMutationEffectsOnFiber

before mutation 阶段的主要函数，其内部会根据 flags 的值来判断是否存在 Snapshot 副作用，如果存在则会根据 tag 的值来执行对应的操作：

1. 执行类组件 getSnapshotBeforeUpdate 生命周期函数
2. 对 rootFiber 的容器进行清空操作

源码地址 commitBeforeMutationEffectsOnFiber | react-reconciler/src/ReactFiberCommitWork.old.js

function commitBeforeMutationEffectsOnFiber(finishedWork: Fiber) {
  const current = finishedWork.alternate
  const flags = finishedWork.flags

  // 未开启 enableCreateEventHandleAPI 可忽略
  if (enableCreateEventHandleAPI) {
    if (!shouldFireAfterActiveInstanceBlur && focusedInstanceHandle !== null) {
      // Check to see if the focused element was inside of a hidden (Suspense) subtree.
      // TODO: Move this out of the hot path using a dedicated effect tag.
      if (
        finishedWork.tag === SuspenseComponent &&
        isSuspenseBoundaryBeingHidden(current, finishedWork) &&
        doesFiberContain(finishedWork, focusedInstanceHandle)
      ) {
        shouldFireAfterActiveInstanceBlur = true
        beforeActiveInstanceBlur(finishedWork)
      }
    }
  }

  // 判断是否存在 Snapshot 副作用
  if ((flags & Snapshot) !== NoFlags) {
    switch (finishedWork.tag) {
      case FunctionComponent:
      case ForwardRef:
      case SimpleMemoComponent: {
        break
      }
      // 类组件
      case ClassComponent: {
        if (current !== null) {
          const prevProps = current.memoizedProps
          const prevState = current.memoizedState
          const instance = finishedWork.stateNode
          // We could update instance props and state here,
          // but instead we rely on them being set during last render.
          // TODO: revisit this when we implement resuming.

          // 执行类组件的 getSnapshotBeforeUpdate 生命周期函数
          const snapshot = instance.getSnapshotBeforeUpdate(
            finishedWork.elementType === finishedWork.type
              ? prevProps
              : resolveDefaultProps(finishedWork.type, prevProps),
            prevState
          )
          // 将 getSnapshotBeforeUpdate 的返回值赋值给 __reactInternalSnapshotBeforeUpdate 属性
          instance.__reactInternalSnapshotBeforeUpdate = snapshot
        }
        break
      }
      // rootFiber
      case HostRoot: {
        if (supportsMutation) {
          const root = finishedWork.stateNode
          // 清空容器
          clearContainer(root.containerInfo)
        }
        break
      }
      case HostComponent:
      case HostText:
      case HostPortal:
      case IncompleteClassComponent:
        // Nothing to do for these component types
        break
      default: {
        throw new Error(
          'This unit of work tag should not have side-effects. This error is ' +
            'likely caused by a bug in React. Please file an issue.'
        )
      }
    }
  }
}