commitMutationEffects ​

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

    commitMutationEffects(root, finishedWork, lanes)

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

    export function commitMutationEffects(root: FiberRoot, finishedWork: Fiber, committedLanes: Lanes) {
      inProgressLanes = committedLanes
      inProgressRoot = root
    
      commitMutationEffectsOnFiber(finishedWork, root, committedLanes)
    
      inProgressLanes = null
      inProgressRoot = null
    }

commitMutationEffectsOnFiber ​

commitMutationEffectsOnFiber 函数中会处理进行如下操作：

• 调用 recursivelyTraverseMutationEffects 函数递归遍历子 Fiber 树
• 调用 commitReconciliationEffects 函数
• 处理 Update 副作用（更新）
• 处理 Ref 副作用（卸载 Ref）
• 处理 ContentReset 副作用（重置文本内容）

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

    function commitMutationEffectsOnFiber(
      finishedWork: Fiber,
      root: FiberRoot,
      lanes: Lanes,
    ) {
      const current = finishedWork.alternate;
      const flags = finishedWork.flags;
    
      // The effect flag should be checked *after* we refine the type of fiber,
      // because the fiber tag is more specific. An exception is any flag related
      // to reconcilation, because those can be set on all fiber types.
    
      // 根据 tag 进入不同的处理函数
      switch (finishedWork.tag) {
        case FunctionComponent:
        case ForwardRef:
        case MemoComponent:
        case SimpleMemoComponent: {
          recursivelyTraverseMutationEffects(root, finishedWork, lanes);
          commitReconciliationEffects(finishedWork);
    
          // 处理 Update 副作用
          if (flags & Update) {
            try {
              // 执行 useEffect 卸载函数
              commitHookEffectListUnmount(
                HookInsertion | HookHasEffect,
                finishedWork,
                finishedWork.return,
              );
              // 执行 useEffect 挂载函数
              commitHookEffectListMount(
                HookInsertion | HookHasEffect,
                finishedWork,
              );
            } catch (error) {
              captureCommitPhaseError(finishedWork, finishedWork.return, error);
            }
            // Layout effects are destroyed during the mutation phase so that all
            // destroy functions for all fibers are called before any create functions.
            // This prevents sibling component effects from interfering with each other,
            // e.g. a destroy function in one component should never override a ref set
            // by a create function in another component during the same commit.
            // 执行依赖更新时的 useLayoutEffect 卸载函数
            if (
              enableProfilerTimer &&
              enableProfilerCommitHooks &&
              finishedWork.mode & ProfileMode
            ) {
              try {
                startLayoutEffectTimer();
                commitHookEffectListUnmount(
                  HookLayout | HookHasEffect,
                  finishedWork,
                  finishedWork.return,
                );
              } catch (error) {
                captureCommitPhaseError(finishedWork, finishedWork.return, error);
              }
              recordLayoutEffectDuration(finishedWork);
            } else {
              try {
                commitHookEffectListUnmount(
                  HookLayout | HookHasEffect,
                  finishedWork,
                  finishedWork.return,
                );
              } catch (error) {
                captureCommitPhaseError(finishedWork, finishedWork.return, error);
              }
            }
          }
          return;
        }
        case ClassComponent: {
          recursivelyTraverseMutationEffects(root, finishedWork, lanes);
          commitReconciliationEffects(finishedWork);
    
          // 存在 Ref 副作用时，卸载 Ref
          if (flags & Ref) {
            if (current !== null) {
              safelyDetachRef(current, current.return);
            }
          }
          return;
        }
        case HostComponent: {
          recursivelyTraverseMutationEffects(root, finishedWork, lanes);
          commitReconciliationEffects(finishedWork);
    
          // 处理 Ref 副作用（卸载 Ref）
          if (flags & Ref) {
            if (current !== null) {
              safelyDetachRef(current, current.return);
            }
          }
          if (supportsMutation) {
            // TODO: ContentReset gets cleared by the children during the commit
            // phase. This is a refactor hazard because it means we must read
            // flags the flags after `commitReconciliationEffects` has already run;
            // the order matters. We should refactor so that ContentReset does not
            // rely on mutating the flag during commit. Like by setting a flag
            // during the render phase instead.
    
            // 处理 ContentReset 副作用（重置文本内容）
            if (finishedWork.flags & ContentReset) {
              const instance: Instance = finishedWork.stateNode;
              try {
                // 重置文本内容
                resetTextContent(instance);
              } catch (error) {
                captureCommitPhaseError(finishedWork, finishedWork.return, error);
              }
            }
    
            // 处理 Update 副作用（更新 DOM 节点）
            if (flags & Update) {
              const instance: Instance = finishedWork.stateNode;
              if (instance != null) {
                // Commit the work prepared earlier.
                const newProps = finishedWork.memoizedProps;
                // For hydration we reuse the update path but we treat the oldProps
                // as the newProps. The updatePayload will contain the real change in
                // this case.
                const oldProps =
                  current !== null ? current.memoizedProps : newProps;
                const type = finishedWork.type;
                // TODO: Type the updateQueue to be specific to host components.
                const updatePayload: null | UpdatePayload = (finishedWork.updateQueue: any);
                finishedWork.updateQueue = null;
                if (updatePayload !== null) {
                  try {
                    // 更新 DOM 节点
                    commitUpdate(
                      instance,
                      updatePayload,
                      type,
                      oldProps,
                      newProps,
                      finishedWork,
                    );
                  } catch (error) {
                    captureCommitPhaseError(
                      finishedWork,
                      finishedWork.return,
                      error,
                    );
                  }
                }
              }
            }
          }
          return;
        }
        case HostText: {
          recursivelyTraverseMutationEffects(root, finishedWork, lanes);
          commitReconciliationEffects(finishedWork);
    
          // 处理 Update 副作用（更新文本节点）
          if (flags & Update) {
            if (supportsMutation) {
              if (finishedWork.stateNode === null) {
                throw new Error(
                  'This should have a text node initialized. This error is likely ' +
                    'caused by a bug in React. Please file an issue.',
                );
              }
    
              const textInstance: TextInstance = finishedWork.stateNode;
              const newText: string = finishedWork.memoizedProps;
              // For hydration we reuse the update path but we treat the oldProps
              // as the newProps. The updatePayload will contain the real change in
              // this case.
              const oldText: string =
                current !== null ? current.memoizedProps : newText;
    
              try {
                // 更新文本节点
                commitTextUpdate(textInstance, oldText, newText);
              } catch (error) {
                captureCommitPhaseError(finishedWork, finishedWork.return, error);
              }
            }
          }
          return;
        }
        case HostRoot:
        case HostPortal:
        case SuspenseComponent:
        case OffscreenComponent:
        case SuspenseListComponent:
        case ScopeComponent:
        default: {
          recursivelyTraverseMutationEffects(root, finishedWork, lanes);
          commitReconciliationEffects(finishedWork);
          return;
        }
      }
    }

recursivelyTraverseMutationEffects ​

recursivelyTraverseMutationEffects 函数递归遍历子 Fiber 树，并做如下操作：

• 调用 commitDeletionEffects 函数处理 Deletion 副作用（删除）
• 调用 commitMutationEffectsOnFiber 函数处理 Mutation 副作用（插入、更新、删除、Ref 等）

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

    function recursivelyTraverseMutationEffects(root: FiberRoot, parentFiber: Fiber, lanes: Lanes) {
      // Deletions effects can be scheduled on any fiber type. They need to happen
      // before the children effects hae fired.
      // 处理 Deletion 副作用（即 ChildDeletion）
      const deletions = parentFiber.deletions
      if (deletions !== null) {
        for (let i = 0; i < deletions.length; i++) {
          const childToDelete = deletions[i]
          try {
            commitDeletionEffects(root, parentFiber, childToDelete)
          } catch (error) {
            captureCommitPhaseError(childToDelete, parentFiber, error)
          }
        }
      }
    
      // 处理 Mutation 副作用（即 Placement | Update | ChildDeletion | ContentReset | Ref | Hydrating | Visibility）
      if (parentFiber.subtreeFlags & MutationMask) {
        let child = parentFiber.child
        while (child !== null) {
          commitMutationEffectsOnFiber(child, root, lanes)
          child = child.sibling
        }
      }
    }

commitDeletionEffects ​

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

    function commitDeletionEffects(root: FiberRoot, returnFiber: Fiber, deletedFiber: Fiber) {
      if (supportsMutation) {
        // We only have the top Fiber that was deleted but we need to recurse down its
        // children to find all the terminal nodes.
    
        // Recursively delete all host nodes from the parent, detach refs, clean
        // up mounted layout effects, and call componentWillUnmount.
    
        // We only need to remove the topmost host child in each branch. But then we
        // still need to keep traversing to unmount effects, refs, and cWU. TODO: We
        // could split this into two separate traversals functions, where the second
        // one doesn't include any removeChild logic. This is maybe the same
        // function as "disappearLayoutEffects" (or whatever that turns into after
        // the layout phase is refactored to use recursion).
    
        // Before starting, find the nearest host parent on the stack so we know
        // which instance/container to remove the children from.
        // TODO: Instead of searching up the fiber return path on every deletion, we
        // can track the nearest host component on the JS stack as we traverse the
        // tree during the commit phase. This would make insertions faster, too.
        let parent = returnFiber
        // 标记父节点是否为容器
        findParent: while (parent !== null) {
          switch (parent.tag) {
            case HostComponent: {
              hostParent = parent.stateNode
              hostParentIsContainer = false
              break findParent
            }
            case HostRoot: {
              hostParent = parent.stateNode.containerInfo
              hostParentIsContainer = true
              break findParent
            }
            case HostPortal: {
              hostParent = parent.stateNode.containerInfo
              hostParentIsContainer = true
              break findParent
            }
          }
          parent = parent.return
        }
        if (hostParent === null) {
          throw new Error(
            'Expected to find a host parent. This error is likely caused by ' +
              'a bug in React. Please file an issue.'
          )
        }
        commitDeletionEffectsOnFiber(root, returnFiber, deletedFiber)
        hostParent = null
        hostParentIsContainer = false
      } else {
        // Detach refs and call componentWillUnmount() on the whole subtree.
        commitDeletionEffectsOnFiber(root, returnFiber, deletedFiber)
      }
    
      detachFiberMutation(deletedFiber)
    }

commitDeletionEffectsOnFiber ​

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

    function commitDeletionEffectsOnFiber(
      finishedRoot: FiberRoot,
      nearestMountedAncestor: Fiber,
      deletedFiber: Fiber
    ) {
      // The cases in this outer switch modify the stack before they traverse
      // into their subtree. There are simpler cases in the inner switch
      // that don't modify the stack.
      switch (deletedFiber.tag) {
        case HostComponent: {
          if (!offscreenSubtreeWasHidden) {
            safelyDetachRef(deletedFiber, nearestMountedAncestor)
          }
          // Intentional fallthrough to next branch
        }
        // eslint-disable-next-line-no-fallthrough
        case HostText: {
          // We only need to remove the nearest host child. Set the host parent
          // to `null` on the stack to indicate that nested children don't
          // need to be removed.
          if (supportsMutation) {
            const prevHostParent = hostParent
            const prevHostParentIsContainer = hostParentIsContainer
            hostParent = null
            // 继续递归遍历执行 recursivelyTraverseDeletionEffects() 函数
            recursivelyTraverseDeletionEffects(finishedRoot, nearestMountedAncestor, deletedFiber)
            hostParent = prevHostParent
            hostParentIsContainer = prevHostParentIsContainer
    
            if (hostParent !== null) {
              // Now that all the child effects have unmounted, we can remove the
              // node from the tree.
              // 判断是否父节点是否为容器
              if (hostParentIsContainer) {
                // 从容器中删除子节点
                removeChildFromContainer(hostParent, deletedFiber.stateNode)
              } else {
                // 直接删除子节点
                removeChild(hostParent, deletedFiber.stateNode)
              }
            }
          } else {
            // 继续递归遍历执行 commitDeletionEffectsOnFiber() 函数
            recursivelyTraverseDeletionEffects(finishedRoot, nearestMountedAncestor, deletedFiber)
          }
          return
        }
    
        // ... 省略以下 case 的处理逻辑
        case DehydratedFragment:
        case HostPortal:
    
        // 函数组件
        case FunctionComponent:
        case ForwardRef:
        case MemoComponent:
        case SimpleMemoComponent: {
          if (!offscreenSubtreeWasHidden) {
            const updateQueue: FunctionComponentUpdateQueue | null = deletedFiber.updateQueue
            if (updateQueue !== null) {
              const lastEffect = updateQueue.lastEffect
              if (lastEffect !== null) {
                const firstEffect = lastEffect.next
    
                let effect = firstEffect
                do {
                  const { destroy, tag } = effect
                  // 判断是否存在 destroy 函数
                  if (destroy !== undefined) {
                    if ((tag & HookInsertion) !== NoHookEffect) {
                      // 执行组件的 useEffect 卸载函数
                      safelyCallDestroy(deletedFiber, nearestMountedAncestor, destroy)
                    } else if ((tag & HookLayout) !== NoHookEffect) {
                      if (enableSchedulingProfiler) {
                        markComponentLayoutEffectUnmountStarted(deletedFiber)
                      }
    
                      // 执行组件的 useLayoutEffect 卸载函数
                      if (
                        enableProfilerTimer &&
                        enableProfilerCommitHooks &&
                        deletedFiber.mode & ProfileMode
                      ) {
                        startLayoutEffectTimer()
                        safelyCallDestroy(deletedFiber, nearestMountedAncestor, destroy)
                        recordLayoutEffectDuration(deletedFiber)
                      } else {
                        safelyCallDestroy(deletedFiber, nearestMountedAncestor, destroy)
                      }
    
                      if (enableSchedulingProfiler) {
                        markComponentLayoutEffectUnmountStopped()
                      }
                    }
                  }
                  effect = effect.next
                } while (effect !== firstEffect)
              }
            }
          }
    
          // 继续递归遍历执行 commitDeletionEffectsOnFiber() 函数
          recursivelyTraverseDeletionEffects(finishedRoot, nearestMountedAncestor, deletedFiber)
          return
        }
        // 类组件
        case ClassComponent: {
          if (!offscreenSubtreeWasHidden) {
            // 卸载 Ref
            safelyDetachRef(deletedFiber, nearestMountedAncestor)
            const instance = deletedFiber.stateNode
            // 执行类组件的 componentWillUnmount 生命周期函数
            if (typeof instance.componentWillUnmount === 'function') {
              safelyCallComponentWillUnmount(deletedFiber, nearestMountedAncestor, instance)
            }
          }
          recursivelyTraverseDeletionEffects(finishedRoot, nearestMountedAncestor, deletedFiber)
          return
        }
    
        // ... 省略以下 case 的处理逻辑
        case ScopeComponent:
        case OffscreenComponent:
        default: {
          recursivelyTraverseDeletionEffects(finishedRoot, nearestMountedAncestor, deletedFiber)
          return
        }
      }
    }

recursivelyTraverseDeletionEffects ​

对子 Fiber 树进行遍历，并调用 commitDeletionEffectsOnFiber 函数处理 Deletion 副作用（删除）

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

    function recursivelyTraverseDeletionEffects(finishedRoot, nearestMountedAncestor, parent) {
      let child = parent.child
      while (child !== null) {
        commitDeletionEffectsOnFiber(finishedRoot, nearestMountedAncestor, child)
        child = child.sibling
      }
    }

commitReconciliationEffects ​

commitReconciliationEffects 函数用于处理 Placement 副作用（插入）

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

    function commitReconciliationEffects(finishedWork: Fiber) {
      // Placement effects (insertions, reorders) can be scheduled on any fiber
      // type. They needs to happen after the children effects have fired, but
      // before the effects on this fiber have fired.
      const flags = finishedWork.flags
      // 判断是否存在 Placement 副作用
      if (flags & Placement) {
        try {
          commitPlacement(finishedWork)
        } catch (error) {
          captureCommitPhaseError(finishedWork, finishedWork.return, error)
        }
        // Clear the "placement" from effect tag so that we know that this is
        // inserted, before any life-cycles like componentDidMount gets called.
        // TODO: findDOMNode doesn't rely on this any more but isMounted does
        // and isMounted is deprecated anyway so we should be able to kill this.
        // 去除 flags 中 Placement 的标记
        finishedWork.flags &= ~Placement
      }
      if (flags & Hydrating) {
        finishedWork.flags &= ~Hydrating
      }
    }

commitPlacement ​

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

    function commitPlacement(finishedWork: Fiber): void {
      if (!supportsMutation) {
        return
      }
    
      // Recursively insert all host nodes into the parent.
      // 获取 tag 为 HostComponent、HostRoot、HostPortal 的父节点
      const parentFiber = getHostParentFiber(finishedWork)
    
      // Note: these two variables *must* always be updated together.
      // 判断父 Fiber 节点的 tag
      switch (parentFiber.tag) {
        // 普通 DOM 标签
        case HostComponent: {
          // 获取 DOM 节点
          const parent: Instance = parentFiber.stateNode
          // 当 flags 中存在 ContentReset 副作用时，重置父节点的文本内容
          if (parentFiber.flags & ContentReset) {
            // Reset the text content of the parent before doing any insertions
            resetTextContent(parent)
            // Clear ContentReset from the effect tag
            // 去除 flags 中 ContentReset 的标记
            parentFiber.flags &= ~ContentReset
          }
    
          // 获取当前 Fiber 节点的 DOM 兄弟节点
          const before = getHostSibling(finishedWork)
          // We only have the top Fiber that was inserted but we need to recurse down its
          // children to find all the terminal nodes.
          // 递归插入所有的子节点
          insertOrAppendPlacementNode(finishedWork, before, parent)
          break
        }
        // React 根节点
        case HostRoot:
        // React Portal 节点
        case HostPortal: {
          // 获取 DOM 节点
          const parent: Container = parentFiber.stateNode.containerInfo
          // 获取当前 Fiber 节点的 DOM 兄弟节点
          const before = getHostSibling(finishedWork)
          // 递归插入所有的子节点
          insertOrAppendPlacementNodeIntoContainer(finishedWork, before, parent)
          break
        }
        // eslint-disable-next-line-no-fallthrough
        default:
          throw new Error(
            'Invalid host parent fiber. This error is likely caused by a bug ' +
              'in React. Please file an issue.'
          )
      }
    }