React 的源码与原理解读（七）：commit 阶段

摸鱼老萌新

已于 2023-05-24 16:23:01 修改

阅读量688

点赞数 1

分类专栏： React 源码解读文章标签： react.js javascript 前端 react 前端框架

于 2023-04-14 13:25:05 首次发布

本文链接：https://blog.csdn.net/weixin_46463785/article/details/130151495

版权

React 源码解读专栏收录该内容

17 篇文章 47 订阅

订阅专栏

写在专栏开头（叠甲）

作者并不是前端技术专家，也只是一名喜欢学习新东西的前端技术小白，想要学习源码只是为了应付急转直下的前端行情和找工作的需要，这篇专栏是作者学习的过程中自己的思考和体会，也有很多参考其他教程的部分，如果存在错误或者问题，欢迎向作者指出，作者保证内容 100% 正确，请不要将本专栏作为参考答案。
本专栏的阅读需要你具有一定的 React 基础、 JavaScript 基础和前端工程化的基础，作者并不会讲解很多基础的知识点，例如：babel 是什么，jsx 的语法是什么，需要时请自行查阅相关资料。
本专栏很多部分参考了大量其他教程，若有雷同，那是作者抄袭他们的，所以本教程完全开源，你可以当成作者对各类教程进行了整合、总结并加入了自己的理解。

本一节的内容

本节的我们将谈谈 commit 中 React 的操作，因为在之前的教程中，我们已经讲到了 React 怎么样把 element 节点变成 Fiber 树，怎么样通过 DIFF 算法更新我们的 Fiber 树，那么现在我们需要将我们的 Fiber 树的更新同步到我们的真实 DOM 上展示给用户，这个阶段就是 Commit 阶段

从上个阶段说起

现在我们把我们的视线拉回到我们的第四篇教程 —— updateContainer 相关的部分，我们可以看到我们之前一笔带过的两个函数：performConcurrentWorkOnRoot 、 performSyncWorkOnRoot ，我们现在来看看他们的结构：

他们的逻辑大致相同，只不过是ConcurrentWork 需要额外处理一下并发任务相关的进程调度和优先级的问题
通过教程 5 和 6 的学习我们知道了，在 renderRootSync 和 renderRootConcurrent 中，我们生成了我们的 Fiber 树，所以在这两个函数之后，我们可以拿到我们的 Fiber 树了
在经过一些列的错误处理函数后（生成我们的 Fiber 很有可能出现问题）我们最终到达了 commitRoot 这个函数，这个函数传入我们刚刚生成的 Fiber 树的架构。其中 sync 的任务直接调用，而 Concurrent 的任务因为需要通过 finishConcurrentRender 这个函数，根据状态判定是不是完成了我们的渲染，然后调用 commitRootWhenReady （其中调用了 commitRoot）进入我们的 commit 阶段（关于这两种任务的区别我们会后续单独来讲）

export function performSyncWorkOnRoot(root: FiberRoot): null {
  // 省略....

  flushPassiveEffects();

  // 优先级相关
  let lanes = getNextLanes(root, NoLanes);
  if (!includesSyncLane(lanes)) {
    ensureRootIsScheduled(root);
    return null;
  }
  // 生成 Fiber 的函数
  let exitStatus = renderRootSync(root, lanes);、
  //下面都是处理生成失败的处理
  if (root.tag !== LegacyRoot && exitStatus === RootErrored) {
    //...
  }
  if (exitStatus === RootFatalErrored) {
    //...
  }
  if (exitStatus === RootDidNotComplete) {
    //...
  }

  // 生成完毕，返回我们的 WorkInProgress 树的根节点
  const finishedWork: Fiber = (root.current.alternate: any);
  root.finishedWork = finishedWork;
  root.finishedLanes = lanes;
  // 进入 commit 阶段
  commitRoot(
    root,
    workInProgressRootRecoverableErrors,
    workInProgressTransitions,
  );
  ensureRootIsScheduled(root);
  return null;
}

export function performConcurrentWorkOnRoot(
  root: FiberRoot,
  didTimeout: boolean,
): RenderTaskFn | null {
  // 省略处理优先级相关、调度相关的 ....
  const shouldTimeSlice =
    !includesBlockingLane(root, lanes) &&
    !includesExpiredLane(root, lanes) &&
    (disableSchedulerTimeoutInWorkLoop || !didTimeout);
  // 生成 Fiber 的函数
  let exitStatus = shouldTimeSlice
    ? renderRootConcurrent(root, lanes)
    : renderRootSync(root, lanes);
  	//下面都是处理生成失败的处理....省略
    
    // 生成完毕，返回我们的 WorkInProgress 树的根节点
    root.finishedWork = finishedWork;
    root.finishedLanes = lanes;
    // 进入 commit 阶段
    finishConcurrentRender(root, exitStatus, finishedWork, lanes);
  }
  ensureRootIsScheduled(root);
  return getContinuationForRoot(root, originalCallbackNode);
}

// finishConcurrentRender 判定是不是可以进入 commit 阶段，具体的分析之后我们会单独开一篇
function finishConcurrentRender(
  root: FiberRoot,
  exitStatus: RootExitStatus,
  finishedWork: Fiber,
  lanes: Lanes,
) {
  // 根据状态判定，
  switch (exitStatus) {
    case RootInProgress:
    case RootFatalErrored: {
      throw new Error('Root did not complete. This is a bug in React.');
    }
    case RootErrored: {
      commitRootWhenReady(
        root,
        finishedWork,
        workInProgressRootRecoverableErrors,
        workInProgressTransitions,
        lanes,
      );
      break;
    }
    case RootSuspended: {
      // 省略....
      commitRootWhenReady(
        root,
        finishedWork,
        workInProgressRootRecoverableErrors,
        workInProgressTransitions,
        lanes,
      );
      break;
    }
    case RootSuspendedWithDelay: {
      // 省略....
      commitRootWhenReady(
        root,
        finishedWork,
        workInProgressRootRecoverableErrors,
        workInProgressTransitions,
        lanes,
      );
      break;
    }
    case RootCompleted: {
      commitRootWhenReady(
        root,
        finishedWork,
        workInProgressRootRecoverableErrors,
        workInProgressTransitions,
        lanes,
      );
      break;
    }
    default: {
      throw new Error('Unknown root exit status.');
    }
  }
}

commitRoot

那么可见 commitRoot 这个函数就是我们在生成了我们的 Fiber 之后函数的统一入口，它又调用了 commitRootImpl 这个函数，我们现在来看看这个函数做了什么。首先需要明确，在 rootFiber.firstEffect 上保存了一条需要执行副作用的Fiber节点的单向链表 effectList ，这些 Fiber 节点的updateQueue 中保存了变化的props：

它首先执行完毕之前没处理完成的 useEffec，这个会在我们讲解 hook 部分的时候详细展开
之后为我们的变量赋值，并且进行 FiberRoot 状态重置的工作
之后它进行了三次遍历 effectList ，分别处理 BeforeMutationEffects，MutationEffects 和 LayoutEffects 三个阶段的处理：
- BeforeMutationEffects 主要是更新class组件实例上的state、props 等，以及执行 getSnapshotBeforeUpdate 生命周期函数
- MutationEffects 主要是完成副作用的执行，主要包括重置文本节点以及真实 dom 节点的插入、删除和更新等操作。在完成这些以后，我们就可以切换我们的 current 树了，此时我们的新的工作树已经建立完毕，老的树将作为下一次的缓冲树使用（双缓冲结构）
- LayoutEffects 主要是去触发 componentDidMount、componentDidUpdate 以及各种回调函数等
最后，它还要处理 useEffect 相关的内容，因为在 commit 阶段会触发一些生命周期钩子，所以还要执行相关的同步任务

function commitRoot(
  root: FiberRoot,
  recoverableErrors: null | Array<CapturedValue<mixed>>,
  transitions: Array<Transition> | null,
) {
  const previousUpdateLanePriority = getCurrentUpdatePriority();
  const prevTransition = ReactCurrentBatchConfig.transition;
  try {
    ReactCurrentBatchConfig.transition = null;
    setCurrentUpdatePriority(DiscreteEventPriority);
    commitRootImpl(
      root,
      recoverableErrors,
      transitions,
      previousUpdateLanePriority,
    );
  } finally {
    ReactCurrentBatchConfig.transition = prevTransition;
    setCurrentUpdatePriority(previousUpdateLanePriority);
  }

  return null;
}

function commitRootImpl(
  root: FiberRoot,
  recoverableErrors: null | Array<mixed>,
  transitions: Array<Transition> | null,
  renderPriorityLevel: EventPriority,
) {
  // 调用flushPassiveEffects执行完所有effect的任务
  do {
    flushPassiveEffects();
  } while (rootWithPendingPassiveEffects !== null);
	
  // 优先级调度  
  const finishedWork = root.finishedWork;
  const lanes = root.finishedLanes;
  if (enableSchedulingProfiler) {
    markCommitStarted(lanes);
  }

  if (finishedWork === null) {
  	// 异常处理
  }
      
  //重置 FiberRoot 
  root.finishedWork = null;
  root.finishedLanes = NoLanes;
  root.callbackNode = null;
  root.callbackPriority = NoLane;
      
  //省略优先级相关的....
  // 重置全局变量    
  if (root === workInProgressRoot) {
    workInProgressRoot = null;
    workInProgress = null;
    workInProgressRootRenderLanes = NoLanes;
  } else {
  }

  // 处理 useEffect相关内容
  if (
    (finishedWork.subtreeFlags & PassiveMask) !== NoFlags ||
    (finishedWork.flags & PassiveMask) !== NoFlags
  ) {
    if (!rootDoesHavePassiveEffects) {
      rootDoesHavePassiveEffects = true;
      pendingPassiveEffectsRemainingLanes = remainingLanes;
      pendingPassiveTransitions = transitions;
      scheduleCallback(NormalSchedulerPriority, () => {
        flushPassiveEffects();
        return null;
      });
    }
  }

  // 第一次遍历，执行 commitBeforeMutationEffects
  const subtreeHasEffects =
    (finishedWork.subtreeFlags &
      (BeforeMutationMask | MutationMask | LayoutMask | PassiveMask)) !==
    NoFlags;
  const rootHasEffect =
    (finishedWork.flags &
      (BeforeMutationMask | MutationMask | LayoutMask | PassiveMask)) !==
    NoFlags;

  if (subtreeHasEffects || rootHasEffect) {
    const prevTransition = ReactCurrentBatchConfig.transition;
    ReactCurrentBatchConfig.transition = null;
    const previousPriority = getCurrentUpdatePriority();
    setCurrentUpdatePriority(DiscreteEventPriority);

    const prevExecutionContext = executionContext;
    executionContext |= CommitContext;
    ReactCurrentOwner.current = null;
    const shouldFireAfterActiveInstanceBlur = commitBeforeMutationEffects(
      root,
      finishedWork,
    );

    if (enableProfilerTimer) {
      recordCommitTime();
    }

    if (enableProfilerTimer && enableProfilerNestedUpdateScheduledHook) {
      rootCommittingMutationOrLayoutEffects = root;
    }

    // 第二次遍历，执行 commitMutationEffects
    commitMutationEffects(root, finishedWork, lanes);
    if (enableCreateEventHandleAPI) {
      if (shouldFireAfterActiveInstanceBlur) {
        afterActiveInstanceBlur();
      }
    }
    resetAfterCommit(root.containerInfo);
    // 新的树生成完毕了，改变 current 的指向
    root.current = finishedWork;

    if (enableSchedulingProfiler) {
      markLayoutEffectsStarted(lanes);
    }
    // 第三次遍历，执行 commitLayoutEffects
    commitLayoutEffects(finishedWork, root, lanes);

    if (enableSchedulingProfiler) {
      markLayoutEffectsStopped();
    }

    if (enableProfilerTimer && enableProfilerNestedUpdateScheduledHook) {
      rootCommittingMutationOrLayoutEffects = null;
    }

    requestPaint();

    executionContext = prevExecutionContext;
    setCurrentUpdatePriority(previousPriority);
    ReactCurrentBatchConfig.transition = prevTransition;
  } else {
    // 没有任何副作用
    root.current = finishedWork;
    if (enableProfilerTimer) {
      recordCommitTime();
    }
  }
  const rootDidHavePassiveEffects = rootDoesHavePassiveEffects;
  // 处理 useEffect相关内容
  if (rootDoesHavePassiveEffects) {
    rootDoesHavePassiveEffects = false;
    rootWithPendingPassiveEffects = root;
    pendingPassiveEffectsLanes = lanes;
  } else {
    releaseRootPooledCache(root, remainingLanes);
  }
  // 省略优先级相关和DEV模式相关....
  // 触发一次新的调度，确保任何附加的任务被调度
  ensureRootIsScheduled(root, now());
  // 处理componentDidMount等生命周期或者useLayoutEffect等同步任务
  flushSyncCallbacks();
  return null;
}

BeforeMutationEffects

我们依次来看每个阶段，在BeforeMutationEffects 这个阶段，我们的来看看它做了什么：

这阶段会调用 commitBeforeMutationEffects函数处理
commitBeforeMutationEffects 函数会依次调用 commitBeforeMutationEffects_begin，commitBeforeMutationEffects_complete，commitBeforeMutationEffectsOnFiber，getSnapShotBeforeUpdate函数，也就是触发了 getSnapShotBeforeUpdate 这个生命周期
commitBeforeMutationEffects_begin 函数里，获取了当前阶段阶段需要删除的孩子（在上一个阶段的 diff 中生成），然后对他们执行相关的操作，这里主要是处理DOM节点渲染/删除后的 focus 和blur 逻辑。之后深度遍历直到没有孩子为止
commitBeforeMutationEffects_complete 中当我们遍历到的节点没有孩子，我们就遍历它的兄弟，也就是说 commitBeforeMutationEffects_begin 函数和 commitBeforeMutationEffects_complete 函数一起对我们的Fiber 进行了遍历（遍历的方式和之前的遍历 element 的时候大体一致）
commitBeforeMutationEffectsOnFiber 则是用于处理每一个 Fiber，主要是对 ClassComponent 组件进行处理，更新实例上的state、props 等，以及执行 getSnapshotBeforeUpdate 生命周期函数：

export function commitBeforeMutationEffects(
  root: FiberRoot,
  firstChild: Fiber,
) {
  // 准备提交
  focusedInstanceHandle = prepareForCommit(root.containerInfo);
  nextEffect = firstChild;
  // 开始提交
  commitBeforeMutationEffects_begin();
  const shouldFire = shouldFireAfterActiveInstanceBlur;
  shouldFireAfterActiveInstanceBlur = false;
  focusedInstanceHandle = null;
  return shouldFire;
}

function commitBeforeMutationEffects_begin() {
  while (nextEffect !== null) {
    const fiber = nextEffect;
    if (enableCreateEventHandleAPI) {
	  // 获取需要删除的内容
      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;
    if (
      (fiber.subtreeFlags & BeforeMutationMask) !== NoFlags &&
      child !== null
    ) {
      child.return = fiber;
      nextEffect = child;
    } else {
      // 提交结束
      commitBeforeMutationEffects_complete();
    }
  }
}
// 提交完毕
function commitBeforeMutationEffects_complete() {
  while (nextEffect !== null) {
    const fiber = nextEffect;
    setCurrentDebugFiberInDEV(fiber);
    try {
      commitBeforeMutationEffectsOnFiber(fiber);
    } catch (error) {
      captureCommitPhaseError(fiber, fiber.return, error);
    }
    resetCurrentDebugFiberInDEV();

    const sibling = fiber.sibling;
    if (sibling !== null) {
      sibling.return = fiber.return;
      nextEffect = sibling;
      return;
    }
    nextEffect = fiber.return;
  }
}

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

  //...省略

  if ((flags & Snapshot) !== NoFlags) {
    setCurrentDebugFiberInDEV(finishedWork);
    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;
	      //触发 getSnapshotBeforeUpdate
          const snapshot = instance.getSnapshotBeforeUpdate(
            finishedWork.elementType === finishedWork.type
              ? prevProps
              : resolveDefaultProps(finishedWork.type, prevProps),
            prevState,
          );
          instance.__reactInternalSnapshotBeforeUpdate = snapshot;
        }
        break;
      }
      case HostRoot: {
        if (supportsMutation) {
          const root = finishedWork.stateNode;
          clearContainer(root.containerInfo);
        }
        break;
      }
      case HostComponent:
      case HostText:
      case HostPortal:
      case IncompleteClassComponent:
        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.',
        );
      }
    }

    resetCurrentDebugFiberInDEV();
  }
}

MutationEffects

前一个阶段只是做了一些准备工作，而在MutationEffects 这个阶段，我们就需要将我们的修改同步到我们的 DOM 上了，我们来看看它做了什么：

对不同类型的 fiber 在MutationEffects 这个阶段会进行不同的处理，但有一些公共逻辑会执行的，那就是删除操作和插入操作
首先是调用 recursivelyTraverseMutationEffects 方法，这个方法会执行删除逻辑，完成删除逻辑后，
接着就是调用 commitReconciliationEffects，这个方法负责往真实 DOM 树中插入 DOM 节点
最后我们根据不同的组件再来做不同的操作

export function commitMutationEffects(
  root: FiberRoot,
  finishedWork: Fiber,
  committedLanes: Lanes,
) {
  inProgressLanes = committedLanes;
  inProgressRoot = root;
  setCurrentDebugFiberInDEV(finishedWork);、
  //直接进入 commitMutationEffectsOnFiber
  commitMutationEffectsOnFiber(finishedWork, root, committedLanes);
  setCurrentDebugFiberInDEV(finishedWork);
  inProgressLanes = null;
  inProgressRoot = null;
}

function commitMutationEffectsOnFiber(
  finishedWork: Fiber,
  root: FiberRoot,
  lanes: Lanes,
) {
  // 获取 current 树的内容
  const current = finishedWork.alternate;
  // 获取元素被打上的标记
  const flags = finishedWork.flags;
  // 根据不同类别的元素做不同的擦操作
  switch (finishedWork.tag) {
    case FunctionComponent:
    case ForwardRef:
    case MemoComponent:
    case SimpleMemoComponent: {
      // 删除操作
      recursivelyTraverseMutationEffects(root, finishedWork, lanes);
      // 插入操作
      commitReconciliationEffects(finishedWork);
      // ....
    }
    case ClassComponent: {
      recursivelyTraverseMutationEffects(root, finishedWork, lanes);
      commitReconciliationEffects(finishedWork);
      // ....
      return;
    }
    case HostComponent: {
      recursivelyTraverseMutationEffects(root, finishedWork, lanes);
      commitReconciliationEffects(finishedWork);
      // ....
      return;
    }
    case HostText: {
      recursivelyTraverseMutationEffects(root, finishedWork, lanes);
      commitReconciliationEffects(finishedWork);
	  // ....
      return;
    }
    case HostRoot: {
      recursivelyTraverseMutationEffects(root, finishedWork, lanes);
      commitReconciliationEffects(finishedWork);
      // ....
      return;
    }
	// .... 省略
    default: {
      recursivelyTraverseMutationEffects(root, finishedWork, lanes);
      commitReconciliationEffects(finishedWork);
      return;
    }
  }
}

我们先来看 recursivelyTraverseMutationEffects 的操作，它获取了之前我们上一个阶段存放在 deletions 中的孩子，然后依次调用了 commitDeletionEffects 方法，这个方法又会调用 commitDeletionEffectsOnFiber 这个函数，这个函数需要分类讨论：

对于原生组件，我们这样做：
- 先将它 ref 指向的元素设置为 null
- 向下遍历子节点，执行删除逻辑
- 最后调用 removeChild 方法删除真实 DOM
对于类组件
- 先将它 ref 指向的元素设置为 null
- 之后调用它的 componentWillUnmount 生命周期函数
- 向下遍历子节点，执行删除逻辑，因为它不对应真实 DOM 所以不需要删除，同时，它的孩子节点都是其他组件或者真实原生标签，所以只需要递归删除孩子节点即可
对于函数组件
- 我们需要遍历它的 updateQueue 执行 useInsertionEffect / useLayoutEffect 的回调函数所返回的函数（处理副作用）
- 向下遍历子节点，执行删除逻辑

function recursivelyTraverseMutationEffects(
  root: FiberRoot,
  parentFiber: Fiber,
  lanes: Lanes,
) {
  // 取出要删除的孩子
  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);
      }
    }
  }
}

function commitDeletionEffectsOnFiber(
  finishedRoot: FiberRoot,
  nearestMountedAncestor: Fiber,
  deletedFiber: Fiber,
) {
  onCommitUnmount(deletedFiber);
  switch (deletedFiber.tag) {
    case HostComponent: {
      if (!offscreenSubtreeWasHidden) {
        // ref 设置回 null
        safelyDetachRef(deletedFiber, nearestMountedAncestor);
      }
    }
    case HostText: {
      if (supportsMutation) {
        const prevHostParent = hostParent;
        const prevHostParentIsContainer = hostParentIsContainer;
        hostParent = null;
        // 往下遍历子节点，执行删除
        recursivelyTraverseDeletionEffects(
          finishedRoot,
          nearestMountedAncestor,
          deletedFiber,
        );
        hostParent = prevHostParent;
        hostParentIsContainer = prevHostParentIsContainer;
        // 删除真正的 DOM，调用了原生的 removeChild 方法
        if (hostParent !== null) {
          if (hostParentIsContainer) {
            removeChildFromContainer(
              ((hostParent: any): Container),
              (deletedFiber.stateNode: Instance | TextInstance),
            );
          } else {
            removeChild(
              ((hostParent: any): Instance),
              (deletedFiber.stateNode: Instance | TextInstance),
            );
          }
        }
      } else {
        recursivelyTraverseDeletionEffects(
          finishedRoot,
          nearestMountedAncestor,
          deletedFiber,
        );
      }
      return;
    }
	// ....
    // 函数组件
    case FunctionComponent:
    case ForwardRef:
    case MemoComponent:
    case SimpleMemoComponent: {
      if (!offscreenSubtreeWasHidden) {
        //  读取 updateQueue 队列，队列用链表的方式保存
        const updateQueue: FunctionComponentUpdateQueue | null = (deletedFiber.updateQueue: any);
        if (updateQueue !== null) {
          const lastEffect = updateQueue.lastEffect;
          if (lastEffect !== null) {
            const firstEffect = lastEffect.next;
            let effect = firstEffect;
            do {
              const {destroy, tag} = effect;
              if (destroy !== undefined) {
                if ((tag & HookInsertion) !== NoHookEffect) {
                  // 处理 useInsertionEffect 副作用
                  safelyCallDestroy(
                    deletedFiber,
                    nearestMountedAncestor,
                    destroy,
                  );
                } else if ((tag & HookLayout) !== NoHookEffect) {
                  // 处理 useLayoutEffect 副作用
                  if (enableSchedulingProfiler) {
                    markComponentLayoutEffectUnmountStarted(deletedFiber);
                  }
                  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);
          }
        }
      }
	  // 遍历子节点执行删除逻辑
      recursivelyTraverseDeletionEffects(
        finishedRoot,
        nearestMountedAncestor,
        deletedFiber,
      );
      return;
    }
    // 类组件
    case ClassComponent: {
      if (!offscreenSubtreeWasHidden) {
        // 移除 ref
        safelyDetachRef(deletedFiber, nearestMountedAncestor);
        const instance = deletedFiber.stateNode;
        if (typeof instance.componentWillUnmount === 'function') {
          // 调用类组件实例的 componentWillUnmount 方法
          safelyCallComponentWillUnmount(
            deletedFiber,
            nearestMountedAncestor,
            instance,
          );
        }
      }
      //遍历子节点执行删除逻辑
      recursivelyTraverseDeletionEffects(
        finishedRoot,
        nearestMountedAncestor,
        deletedFiber,
      );
      return;
    }
	// ....省略
    default: {
      recursivelyTraverseDeletionEffects(
        finishedRoot,
        nearestMountedAncestor,
        deletedFiber,
      );
      return;
    }
  }
}

之后我们来看看另一个插入的逻辑 commitReconciliationEffects，它只会在原生组件和 fiber 根节点上操作，并不操作函数组件和类组件，它的路逻辑是：

判断节点的父 Fiber 是不是需要重置，如果是则调用 parent.textContent = '' 来重置它的内容
之后寻找它有没有兄弟，如果有则调用 insertBefore 方法将内容插入到兄弟节点之前，如果没有，则调用父节点的 appendChild 进行插入

function commitReconciliationEffects(finishedWork: Fiber) {
  const flags = finishedWork.flags;
  if (flags & Placement) {
    try {
      //执行操作
      commitPlacement(finishedWork);
    } catch (error) {
      captureCommitPhaseError(finishedWork, finishedWork.return, error);
    }
    // 移除 Placement 标志
    finishedWork.flags &= ~Placement;
  }
  if (flags & Hydrating) {
    finishedWork.flags &= ~Hydrating;
  }
}

function commitPlacement(finishedWork: Fiber): void {
  if (!supportsMutation) {
    return;
  }
  //获取父 fiber
  const parentFiber = getHostParentFiber(finishedWork);
  switch (parentFiber.tag) {
    case HostComponent: {
      const parent: Instance = parentFiber.stateNode;
      //  判断父 fiber 是否有 ContentReset（内容重置）标记
      if (parentFiber.flags & ContentReset) {
        // 通过 parent.textContent = '' 的方式重置
        resetTextContent(parent);
        parentFiber.flags &= ~ContentReset;
      }
      // 找它的下一个兄弟 DOM 节点，
      const before = getHostSibling(finishedWork);
      // 如果存在，用 insertBefore 方法；如果没有，就调用原生的 appendChild 方法
      insertOrAppendPlacementNode(finishedWork, before, parent);
      break;
    }
    case HostRoot:
    case HostPortal: {
      const parent: Container = parentFiber.stateNode.containerInfo;
      const before = getHostSibling(finishedWork);
      insertOrAppendPlacementNodeIntoContainer(finishedWork, before, parent);
      break;
    }
    default:
      throw new Error(
        'Invalid host parent fiber. This error is likely caused by a bug ' +
          'in React. Please file an issue.',
      );
  }
}

现在我们回到我们的 commitMutationEffectsOnFiber ，我们来看看在完成了删除和插入操作后三中不同的节点又做了什么操作：

对于我们的类组件，我们不做处理
对于我们的函数组件，我们处理 useInsertionEffect ，useLayoutEffect 的副作用
对于原生组件，如果可以复用，我们调用 commitUpdate 执行更新逻辑，否则直接重置这个原生节点
如果是原生文本，我们调用 commitTextUpdate 函数，更新其文本内容

  switch (finishedWork.tag) {
    case FunctionComponent:
    case ForwardRef:
    case MemoComponent:
    case SimpleMemoComponent: {
	  // ....
      if (flags & Update) {
        try {
          // 找出 useInsertionEffect 的 destroy 方法去调用
          commitHookEffectListUnmount(
            HookInsertion | HookHasEffect,
            finishedWork,
            finishedWork.return,
          );
          // 执行 useInsertionEffect 的回调函数，并将返回值保存到 effect.destory 里。
          commitHookEffectListMount(
            HookInsertion | HookHasEffect,
            finishedWork,
          );
        } catch (error) {
          captureCommitPhaseError(finishedWork, finishedWork.return, error);
        }
        if (
          enableProfilerTimer &&
          enableProfilerCommitHooks &&
          finishedWork.mode & ProfileMode
        ) {
          try {
            startLayoutEffectTimer();
            // 执行 useLayoutEffect 对应的 destroy 方法
            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: {
      // ...
      if (flags & Ref) {
        if (current !== null) {
          safelyDetachRef(current, current.return);
        }
      }
      return;
    }
    //原生组件
    case HostComponent: {
      //...
      if (flags & Ref) {
        if (current !== null) {
          safelyDetachRef(current, current.return);
        }
      }
      if (supportsMutation) {
        // 判断是不是需要重置
        if (finishedWork.flags & ContentReset) {
          const instance: Instance = finishedWork.stateNode;
          try {
            resetTextContent(instance);
          } catch (error) {
            captureCommitPhaseError(finishedWork, finishedWork.return, error);
          }
        }
		// 判断是不是需要更新
        if (flags & Update) {
          const instance: Instance = finishedWork.stateNode;
          if (instance != null) {
            const newProps = finishedWork.memoizedProps;
            const oldProps =
              current !== null ? current.memoizedProps : newProps;
            const type = finishedWork.type;
            const updatePayload: null | UpdatePayload = (finishedWork.updateQueue: any);
            finishedWork.updateQueue = null;
            if (updatePayload !== null) {
              try {
                // 更新操作
                commitUpdate(
                  instance,
                  updatePayload,
                  type,
                  oldProps,
                  newProps,
                  finishedWork,
                );
              } catch (error) {
                captureCommitPhaseError(
                  finishedWork,
                  finishedWork.return,
                  error,
                );
              }
            }
          }
        }
      }
      return;
    }
    //原生文本
    case HostText: {
	  //....
      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;
          const oldText: string =
            current !== null ? current.memoizedProps : newText;
          try {
            // 更新操作
            commitTextUpdate(textInstance, oldText, newText);
          } catch (error) {
            captureCommitPhaseError(finishedWork, finishedWork.return, error);
          }
        }
      }
      return;
    }
    //...
}

最后我们来看看这个更新函数，它的逻辑很简单：它获取了真实 dom 节点实例、props 以及 updateQueue ，将 props 的属性一一对应应用到真实 DOM 上

export function commitUpdate(
  domElement: Instance,
  updatePayload: Array<mixed>,
  type: string,
  oldProps: Props,
  newProps: Props,
  internalInstanceHandle: Object,
): void {
  // 对 props 的进行对比更新
  updateProperties(domElement, updatePayload, type, oldProps, newProps);
  // 应用更新
  updateFiberProps(domElement, newProps);
}
// 对比更新
export function updateProperties(
  domElement: Element,
  updatePayload: Array<any>,
  tag: string,
  lastRawProps: Object,
  nextRawProps: Object,
): void {
  // 针对表单组件进行特殊处理
  if (
    tag === 'input' &&
    nextRawProps.type === 'radio' &&
    nextRawProps.name != null
  ) {
    ReactDOMInputUpdateChecked(domElement, nextRawProps);
  }
  // 判断是否为用户自定义的组件，即是否包含 "-"
  const wasCustomComponentTag = isCustomComponent(tag, lastRawProps);
  const isCustomComponentTag = isCustomComponent(tag, nextRawProps);
  // 将 diff 结果应用于真实 dom
  updateDOMProperties(
    domElement,
    updatePayload,
    wasCustomComponentTag,
    isCustomComponentTag,
  );
  // 针对表单的特殊处理
  switch (tag) {
    case 'input':
      ReactDOMInputUpdateWrapper(domElement, nextRawProps);
      break;
    case 'textarea':
      ReactDOMTextareaUpdateWrapper(domElement, nextRawProps);
      break;
    case 'select':
      ReactDOMSelectPostUpdateWrapper(domElement, nextRawProps);
      break;
  }
}

function updateDOMProperties(
  domElement: Element,
  updatePayload: Array<any>,
  wasCustomComponentTag: boolean,
  isCustomComponentTag: boolean,
): void {
  // 对 updatePayload 遍历
  for (let i = 0; i < updatePayload.length; i += 2) {
    const propKey = updatePayload[i];
    const propValue = updatePayload[i + 1];
    if (propKey === STYLE) {
      // 处理 style 样式更新
      setValueForStyles(domElement, propValue);
    } else if (propKey === DANGEROUSLY_SET_INNER_HTML) {
      // 处理 innerHTML 改变
      setInnerHTML(domElement, propValue);
    } else if (propKey === CHILDREN) {
      // 处理 textContent
      setTextContent(domElement, propValue);
    } else {
      // 处理其他节点属性
      setValueForProperty(domElement, propKey, propValue, isCustomComponentTag);
    }
  }
}

LayoutEffects

最后我们来看看 LayoutEffects 这个阶段，这个阶段我们已经可以调用到我们的真实 DOM 了，它主要是执行 componentDidMount 和 componentDidUpdate 生命周期，我们来看看逻辑：

它的遍历过程和 BeforeMutationEffects 基本一致。都是使用了深度优先遍历的方式，这里我们不再具体阐述了，我们直接来看commitLayoutEffectOnFiber 这个函数
它还是分组件进行处理：
- 如果是函数组件，我们执行它的 useLayoutEffect hooks 即可
- 如果是类组件，我们需要执行它的 componentDidMount 或者 componentDidUpdate 生命周期，之后还要处理 commitUpdateQueue 中的回调函数
- 如果根节点，我们需要处理其回调，也就是是 ReactDOM.render 的调回函数
- 如果是原生组件，我们处理其自动更新的情况
commitUpdateQueue 函数会对 finishedQueue 上面的 effects 进行遍历，若有 callback，则执行 callback。同时会重置 finishedQueue 上面的 effects 为 null

function commitLayoutEffectOnFiber(
  finishedRoot: FiberRoot,
  current: Fiber | null,
  finishedWork: Fiber,
  committedLanes: Lanes,
): void {
  if ((finishedWork.flags & LayoutMask) !== NoFlags) {
    switch (finishedWork.tag) {
      case FunctionComponent:
      case ForwardRef:
      case SimpleMemoComponent: {
        if (
          !enableSuspenseLayoutEffectSemantics ||
          !offscreenSubtreeWasHidden
        ) {
          if (
            enableProfilerTimer &&
            enableProfilerCommitHooks &&
            finishedWork.mode & ProfileMode
          ) {
            try {
              startLayoutEffectTimer();
              // 提交 useLayoutEffect 
              commitHookEffectListMount(
                HookLayout | HookHasEffect,
                finishedWork,
              );
            } finally {
              recordLayoutEffectDuration(finishedWork);
            }
          } else {
            commitHookEffectListMount(HookLayout | HookHasEffect, finishedWork);
          }
        }
        break;
      }
      case ClassComponent: {
        const instance = finishedWork.stateNode;
        if (finishedWork.flags & Update) {
          if (!offscreenSubtreeWasHidden) {
            if (current === null) {
              if (
                enableProfilerTimer &&
                enableProfilerCommitHooks &&
                finishedWork.mode & ProfileMode
              ) {
                try {
                  startLayoutEffectTimer();
                  // 首次渲染，触发 componentDidMount 生命周期
                  instance.componentDidMount();
                } finally {
                  recordLayoutEffectDuration(finishedWork);
                }
              } else {
                instance.componentDidMount();
              }
            } else {
              const prevProps =
                finishedWork.elementType === finishedWork.type
                  ? current.memoizedProps
                  : resolveDefaultProps(
                      finishedWork.type,
                      current.memoizedProps,
                    );
              const prevState = current.memoizedState;
              if (
                enableProfilerTimer &&
                enableProfilerCommitHooks &&
                finishedWork.mode & ProfileMode
              ) {
                try {
                  startLayoutEffectTimer();
                  // 非首次渲染，触发 componentDidUpdate 生命周期
                  instance.componentDidUpdate(
                    prevProps,
                    prevState,
                    instance.__reactInternalSnapshotBeforeUpdate,
                  );
                } finally {
                  recordLayoutEffectDuration(finishedWork);
                }
              } else {
                instance.componentDidUpdate(
                  prevProps,
                  prevState,
                  instance.__reactInternalSnapshotBeforeUpdate,
                );
              }
            }
          }
        }

        const updateQueue: UpdateQueue<
          *,
        > | null = (finishedWork.updateQueue: any);
        if (updateQueue !== null) {
          // 执行 commitUpdateQueue 处理回调
          commitUpdateQueue(finishedWork, updateQueue, instance);
        }
        break;
      }
      case HostRoot: {
        const updateQueue: UpdateQueue<
          *,
        > | null = (finishedWork.updateQueue: any);
        if (updateQueue !== null) {
          let instance = null;
          if (finishedWork.child !== null) {
            switch (finishedWork.child.tag) {
              case HostComponent:
                instance = getPublicInstance(finishedWork.child.stateNode);
                break;
              case ClassComponent:
                instance = finishedWork.child.stateNode;
                break;
            }
          }
          //  调用 commitUpdateQueue 处理 ReactDOM.render 的回调
          commitUpdateQueue(finishedWork, updateQueue, instance);
        }
        break;
      }
      case HostComponent: {
        const instance: Instance = finishedWork.stateNode;
        // commitMount 处理 input 标签有 auto-focus 的情况
        if (current === null && finishedWork.flags & Update) {
          const type = finishedWork.type;
          const props = finishedWork.memoizedProps;
          commitMount(instance, type, props, finishedWork);
        }

        break;
      }
      case HostText: 
        break;
      }
      case HostPortal: {
        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.',
        );
    }
  }
}

总结

上述就是我们的 commit 阶段的内容，我们来总结一下它运行流程，大致可以分为五个阶段来说

在进入BeforeMutationEffects 函数之前，我们先处理 useEffect 相关的任务并且进行一些初始化的工作
之后进入 BeforeMutationEffects 阶段，我们深度优先遍历我们的 Fiber 树，处理DOM节点渲染/删除后的 focus 和blur 逻辑，然后处理我们 clas 组件的 getSnapshotBeforeUpdate 生命周期
之后我们进入 MutationEffects 阶段，这个阶段里，我们执行 recursivelyTraverseMutationEffects 方法对需要删除的节点进行处理，再执行 commitReconciliationEffects 逻辑插入DOM，之后分别进行处理
- 对于我们的函数组件，我们处理 useInsertionEffect ，useLayoutEffect 的副作用
- 对于原生组件和文本，如果调用 commitUpdate 执行更新逻辑（复用)
最后我们进入 LayoutEffects 阶段，主要是执行类组件的 componentDidMount 和 componentDidUpdate 生命周期或者函数组件的 useLayoutEffect hooks ，然后对 finishedQueue 上面的 effects 的回调进行处理
三阶段结束后，再次处理 useEffect 相关的内容，再执行 commit 阶段相关的同步任务即可

经过上述的操作，React 的节点从我们构建的 Fiber 同步到了真实的 DOM 上展示给了用户，相关的生命周期和 Hooks 也得到了触发，至此，一个从 jsx 开始的 React 的渲染过程已经讲完了，我们之后会在讲完调度后再完整的来梳理一遍。

现在我们来看看还有什么问题没有解决：

我们在之前的讲解过默认跳过了优先级和调度相关的内容，这其实是一个很重要的阶段，scheduler 阶段，之后我们会结合我们之前讲解渲染的过程来讲解我们的 scheduler 是怎么安排任务和调度进程的
我们已经提到了部分的 hooks 的内容，但是并没有系统的讲到 hooks 是怎么起作用的，我们之后会单独开几篇来讲我们的 hooks 是怎么挂载和生效的

那么这两个问题我们会在后续的教程里给出解答

摸鱼老萌新

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
React 的源码与原理解读（七）：commit 阶段

本节的我们将谈谈 **commit** 中 React 的操作，因为在之前的教程中，我们已经讲到了 React 怎么样把 element 节点变成 Fiber 树，怎么样通过 DIFF 算法更新我们的 Fiber 树，那么现在我们需要将我们的 Fiber 树的更新同步到我们的真实 DOM 上展示给用户，这个阶段就是 Commit 阶段
复制链接

扫一扫