在commitWork前，会将在workloopSync中生成的workInProgressfiber树赋值给fiberRoot的finishedWork属性。

  1.  const finishedWork: Fiber = (root.current.alternate: any);
  2.   root.finishedWork = finishedWork;
  3.   root.finishedLanes = lanes;

commitRootImpl(root, renderPriorityLevel)的源码

在输出阶段，commitRoot的实现逻辑是在commitRootImpl函数中，其主要逻辑是处理副作用，执行副作用对应的DOM操作，将最新的 fiber 树结构反映到 DOM 上。除此之外，一些生命周期钩子（比如componentDidXXX）、hook（比如useEffect）需要在commit阶段执行。

commit阶段被分成几个子阶段。对每个阶段的副作用列表做了一个单独的处理，也就是通过调用生命周期函数和hooks进行相应的更新。

commit阶段的主要工作（即Renderer的工作流程）分为三部分：

  • before mutation阶段（执行DOM操作前）
  • mutation阶段（执行DOM操作）
  • layout阶段（执行DOM操作后）
  1. function commitRootImpl(root, renderPriorityLevel) {
  2.   do {
  4.     flushPassiveEffects();
  5.   } while (rootWithPendingPassiveEffects !== null);
  6.   flushRenderPhaseStrictModeWarningsInDEV();
  8.   const finishedWork = root.finishedWork;
  9.   const lanes = root.finishedLanes;
  11.   if (enableSchedulingProfiler) {
  12.     markCommitStarted(lanes);
  13.   }
  15.   if (finishedWork === null) {
  16.     if (enableSchedulingProfiler) {
  17.       markCommitStopped();
  18.     }
  20.     return null;
  21.   }
  22.   root.finishedWork = null;
  23.   root.finishedLanes = NoLanes;
  26.   root.callbackNode = null;
  29.   let remainingLanes = mergeLanes(finishedWork.lanes, finishedWork.childLanes);
  30.   markRootFinished(root, remainingLanes);
  31. //离散事件导致的更新处理=》光标
  32.   if (rootsWithPendingDiscreteUpdates !== null) {
  33.     if (
  34.       !hasDiscreteLanes(remainingLanes) &&
  35.       rootsWithPendingDiscreteUpdates.has(root)
  36.     ) {
  37.       rootsWithPendingDiscreteUpdates.delete(root);
  38.     }
  39.   }
  41.   if (root === workInProgressRoot) {
  42.     // We can reset these now that they are finished.
  43.     workInProgressRoot = null;
  44.     workInProgress = null;
  45.     workInProgressRootRenderLanes = NoLanes;
  46.   } else {
  48.   }
  50.   // Get the list of effects.
  51.   在归阶段的update时，effects链表的形成，只会挂载自己的子Fiber，所以当前应用的根节点的Effect是没有被挂载在这个链表上的
  52.   let firstEffect;
  53.  //如果当前应用的根节点存在Effect，需要将当前应用的根节点挂载在Effect链表的最后
  54.   if (finishedWork.flags > PerformedWork) {
  55.     if (finishedWork.lastEffect !== null) {
  56.       finishedWork.lastEffect.nextEffect = finishedWork;
  57.       firstEffect = finishedWork.firstEffect;
  58.     } else {
  59.       //如果effect list 不存在，第一项就是根Fiber节点
  60.       firstEffect = finishedWork;
  61.     }
  62.   } else {
  63.     // There is no effect on the root.
  64.     firstEffect = finishedWork.firstEffect;
  65.   }
  67.   if (firstEffect !== null) {
  68.     let previousLanePriority;
  69.     if (decoupleUpdatePriorityFromScheduler) {
  70.       previousLanePriority = getCurrentUpdateLanePriority();
  71.       setCurrentUpdateLanePriority(SyncLanePriority);
  72.     }
  74.     const prevExecutionContext = executionContext;
  75.     executionContext |= CommitContext;
  76.     const prevInteractions = pushInteractions(root);
  78.     ReactCurrentOwner.current = null;
  80.     focusedInstanceHandle = prepareForCommit(root.containerInfo);
  81.     shouldFireAfterActiveInstanceBlur = false;
  83.     nextEffect = firstEffect;
  84.     //beforemutation执行的工作
  85.     do {
  86.         try {
  87.           commitBeforeMutationEffects();
  88.         } catch (error) {
  89.           invariant(nextEffect !== null, 'Should be working on an effect.');
  90.           captureCommitPhaseError(nextEffect, error);
  91.           nextEffect = nextEffect.nextEffect;
  92.         }
  94.     } while (nextEffect !== null);
  97.     focusedInstanceHandle = null;
  99.     if (enableProfilerTimer) {
  101.       recordCommitTime();
  102.     }
  104.     nextEffect = firstEffect;
  105.     //mutation阶段执行的工作
  106.     do {
  107.         try {
  108.           commitMutationEffects(root, renderPriorityLevel);
  109.         } catch (error) {
  110.           invariant(nextEffect !== null, 'Should be working on an effect.');
  111.           captureCommitPhaseError(nextEffect, error);
  112.           nextEffect = nextEffect.nextEffect;
  113.         }
  114.     } while (nextEffect !== null);
  115.  if (shouldFireAfterActiveInstanceBlur) {
  116.       afterActiveInstanceBlur();
  117.     }
  118.     resetAfterCommit(root.containerInfo);
  120.     root.current = finishedWork;
  122.     // The next phase is the layout phase, where we call effects that read
  123.     // the host tree after it's been mutated. The idiomatic use case for this is
  124.     // layout, but class component lifecycles also fire here for legacy reasons.
  125.     nextEffect = firstEffect;
  126.     //layout阶段的工作
  127.     do {
  129.         try {
  130.           commitLayoutEffects(root, lanes);
  131.         } catch (error) {
  132.           invariant(nextEffect !== null, 'Should be working on an effect.');
  133.           captureCommitPhaseError(nextEffect, error);
  134.           nextEffect = nextEffect.nextEffect;
  135.         }
  136.     } while (nextEffect !== null);
  138.     nextEffect = null;
  140.     // Tell Scheduler to yield at the end of the frame, so the browser has an
  141.     // opportunity to paint.
  142.     requestPaint();
  144.     if (enableSchedulerTracing) {
  145.       popInteractions(((prevInteractions: any): Set<Interaction>));
  146.     }
  147.     executionContext = prevExecutionContext;
  149.     if (decoupleUpdatePriorityFromScheduler && previousLanePriority != null) {
  150.       // Reset the priority to the previous non-sync value.
  151.       setCurrentUpdateLanePriority(previousLanePriority);
  152.     }
  153.   } else {
  154.     // No effects.
  155.     root.current = finishedWork;
  156.     // Measure these anyway so the flamegraph explicitly shows that there were
  157.     // no effects.
  158.     // TODO: Maybe there's a better way to report this.
  159.     if (enableProfilerTimer) {
  160.       recordCommitTime();
  161.     }
  162.   }
  164.    const rootDidHavePassiveEffects = rootDoesHavePassiveEffects;
  166.   if (rootDoesHavePassiveEffects) {
  167.     // This commit has passive effects. Stash a reference to them. But don't
  168.     // schedule a callback until after flushing layout work.
  169.     //和本次更新中的useEffect调用有关
  170.     rootDoesHavePassiveEffects = false;
  171.     rootWithPendingPassiveEffects = root;
  172.     pendingPassiveEffectsLanes = lanes;
  173.     pendingPassiveEffectsRenderPriority = renderPriorityLevel;
  174.   } else {
  175.     // We are done with the effect chain at this point so let's clear the
  176.     // nextEffect pointers to assist with GC. If we have passive effects, we'll
  177.     // clear this in flushPassiveEffects.
  178.     //本次更新不存在useEffect的调用，清理链表，垃圾回收
  179.     nextEffect = firstEffect;
  180.     while (nextEffect !== null) {
  181.       const nextNextEffect = nextEffect.nextEffect;
  182.       nextEffect.nextEffect = null;
  183.       if (nextEffect.flags & Deletion) {
  184.         detachFiberAfterEffects(nextEffect);
  185.       }
  186.       nextEffect = nextNextEffect;
  187.     }
  188.   }
  190.   // Read this again, since an effect might have updated it
  191.   remainingLanes = root.pendingLanes;
  193.   // Check if there's remaining work on this root
  194.   if (remainingLanes !== NoLanes) {
  195.     if (enableSchedulerTracing) {
  196.       if (spawnedWorkDuringRender !== null) {
  197.         const expirationTimes = spawnedWorkDuringRender;
  198.         spawnedWorkDuringRender = null;
  199.         for (let i = 0; i < expirationTimes.length; i++) {
  200.           scheduleInteractions(
  201.             root,
  202.             expirationTimes[i],
  203.             root.memoizedInteractions,
  204.           );
  205.         }
  206.       }
  207.       schedulePendingInteractions(root, remainingLanes);
  208.     }
  209.   } else {
  210.     // If there's no remaining work, we can clear the set of already failed
  211.     // error boundaries.
  212.     legacyErrorBoundariesThatAlreadyFailed = null;
  213.   }
  215.   if (enableSchedulerTracing) {
  216.     if (!rootDidHavePassiveEffects) {
  217.   .
  218.       finishPendingInteractions(root, lanes);
  219.     }
  220.   }
  222.   if (remainingLanes === SyncLane) {
  223.     //通过计数判断是否是进入了无限循环更新了
  224.     if (root === rootWithNestedUpdates) {
  225.       nestedUpdateCount++;
  226.     } else {
  227.       nestedUpdateCount = 0;
  228.       rootWithNestedUpdates = root;
  229.     }
  230.   } else {
  231.     nestedUpdateCount = 0;
  232.   }
  234.   onCommitRootDevTools(finishedWork.stateNode, renderPriorityLevel);
  236. //commit可能会出现新的更新，确保在这个根节点上没有新的更新任务
  237.   ensureRootIsScheduled(root, now());
  239.   if (hasUncaughtError) {
  240.     hasUncaughtError = false;
  241.     const error = firstUncaughtError;
  242.     firstUncaughtError = null;
  243.     throw error;
  244.   }
  246.   if ((executionContext & LegacyUnbatchedContext) !== NoContext) {
  247.     if (enableSchedulingProfiler) {
  248.       markCommitStopped();
  249.     }
  250.     return null;
  251.   }
  253.   // If layout work was scheduled, flush it now.
  254.   //如useLayoutEffect中调用setState，这个就是同步的更新，就会在这里面同步执行
  255.   flushSyncCallbackQueue();
  257.   if (enableSchedulingProfiler) {
  258.     markCommitStopped();
  259.   }
  261.   return null;
  262. }

before mutation阶段

整个过程就是遍历effectList并调用commitBeforeMutationEffects函数处理

  1. function commitBeforeMutationEffects() {
  2.   while (nextEffect !== null) {
  3.     const current = nextEffect.alternate;
  4. //处理DOM节点渲染/删除后的 autoFocus、blur 逻辑。
  5.     if (!shouldFireAfterActiveInstanceBlur && focusedInstanceHandle !== null) {
  6.       if ((nextEffect.flags & Deletion) !== NoFlags) {
  7.         if (doesFiberContain(nextEffect, focusedInstanceHandle)) {
  8.           shouldFireAfterActiveInstanceBlur = true;
  9.           beforeActiveInstanceBlur();
  10.         }
  11.       } else {
  12.         // TODO: Move this out of the hot path using a dedicated effect tag.
  13.         if (
  14.           nextEffect.tag === SuspenseComponent &&
  15.           isSuspenseBoundaryBeingHidden(current, nextEffect) &&
  16.           doesFiberContain(nextEffect, focusedInstanceHandle)
  17.         ) {
  18.           shouldFireAfterActiveInstanceBlur = true;
  19.           beforeActiveInstanceBlur();
  20.         }
  21.       }
  22.     }
  23. //调用getSnapshotBeforeUpdate生命周期钩子。
  24.     const flags = nextEffect.flags;
  25.     if ((flags & Snapshot) !== NoFlags) {
  26.       setCurrentDebugFiberInDEV(nextEffect);
  28.       commitBeforeMutationEffectOnFiber(current, nextEffect);
  30.       resetCurrentDebugFiberInDEV();
  31.     }
  32.     //FunctionComponent中useEffect对应的Effect，需要调度passiveeffects的回调函数
  33.     if ((flags & Passive) !== NoFlags) {
  34.       // If there are passive effects, schedule a callback to flush at
  35.       // the earliest opportunity.
  36.       if (!rootDoesHavePassiveEffects) {
  37.         rootDoesHavePassiveEffects = true;
  38.         scheduleCallback(NormalSchedulerPriority, () => {
  39.           flushPassiveEffects();
  40.           return null;
  41.         });
  42.       }
  43.     }
  44.     nextEffect = nextEffect.nextEffect;
  45.   }
  46. }

整体可以分为三部分：

  • 处理DOM节点渲染/删除后的 autoFocus、blur 逻辑。
  • 调用getSnapshotBeforeUpdate生命周期钩子。
  • 调度useEffect。

这里忽略第一部分，看调用getSnapshotBeforeUpdate生命周期钩子的部分

commitBeforeMutationEffects方法调用getSnapshotBeforeUpdate

commitBeforeMutationEffectOnFiber是commitBeforeMutationLifeCycles的别名。

在该方法内会调用getSnapshotBeforeUpdate。

  2. function commitBeforeMutationLifeCycles(
  3.   current: Fiber | null,
  4.   finishedWork: Fiber,
  5. ): void {
  6.   switch (finishedWork.tag) {
  7.     case FunctionComponent:
  8.     case ForwardRef:
  9.     case SimpleMemoComponent:
  10.     case Block: {
  11.       return;
  12.     }
  13.     case ClassComponent: {
  14.       //如果存在 Snapshot 生命周期对应的tag
  15.       if (finishedWork.flags & Snapshot) {
  16.         if (current !== null) {
  17.           const prevProps = current.memoizedProps;
  18.           const prevState = current.memoizedState;
  19.           //取到对应的React Component的实例
  20.           const instance = finishedWork.stateNode;
  21.           // We could update instance props and state here,
  22.           // but instead we rely on them being set during last render.
  23.           // TODO: revisit this when we implement resuming.
  24.           if (__DEV__) {
  25.             if (
  26.               finishedWork.type === finishedWork.elementType &&
  27.               !didWarnAboutReassigningProps
  28.             ) {
  29.               if (instance.props !== finishedWork.memoizedProps) {
  30.                 console.error(
  31.                   'Expected %s props to match memoized props before ' +
  32.                     'getSnapshotBeforeUpdate. ' +
  33.                     'This might either be because of a bug in React, or because ' +
  34.                     'a component reassigns its own `this.props`. ' +
  35.                     'Please file an issue.',
  36.                   getComponentName(finishedWork.type) || 'instance',
  37.                 );
  38.               }
  39.               if (instance.state !== finishedWork.memoizedState) {
  40.                 console.error(
  41.                   'Expected %s state to match memoized state before ' +
  42.                     'getSnapshotBeforeUpdate. ' +
  43.                     'This might either be because of a bug in React, or because ' +
  44.                     'a component reassigns its own `this.state`. ' +
  45.                     'Please file an issue.',
  46.                   getComponentName(finishedWork.type) || 'instance',
  47.                 );
  48.               }
  49.             }
  50.           }
  51.           const snapshot = instance.getSnapshotBeforeUpdate(
  52.             finishedWork.elementType === finishedWork.type
  53.               ? prevProps
  54.               : resolveDefaultProps(finishedWork.type, prevProps),
  55.             prevState,
  56.           );
  57.           if (__DEV__) {
  58.             const didWarnSet = ((didWarnAboutUndefinedSnapshotBeforeUpdate: any): Set<mixed>);
  59.             if (snapshot === undefined && !didWarnSet.has(finishedWork.type)) {
  60.               didWarnSet.add(finishedWork.type);
  61.               console.error(
  62.                 '%s.getSnapshotBeforeUpdate(): A snapshot value (or null) ' +
  63.                   'must be returned. You have returned undefined.',
  64.                 getComponentName(finishedWork.type),
  65.               );
  66.             }
  67.           }
  68.           instance.__reactInternalSnapshotBeforeUpdate = snapshot;
  69.         }
  70.       }
  71.       return;
  72.     }
  73.     case HostRoot: {
  74.       if (supportsMutation) {
  75.         if (finishedWork.flags & Snapshot) {
  76.           const root = finishedWork.stateNode;
  77.           clearContainer(root.containerInfo);
  78.         }
  79.       }
  80.       return;
  81.     }
  82.     case HostComponent:
  83.     case HostText:
  84.     case HostPortal:
  85.     case IncompleteClassComponent:
  86.       // Nothing to do for these component types
  87.       return;
  88.   }
  89.   invariant(
  90.     false,
  91.     'This unit of work tag should not have side-effects. This error is ' +
  92.       'likely caused by a bug in React. Please file an issue.',
  93.   );
  94. }

这个阶段调用getSnapshotBeforeUpdates生命周期，页面没有可见的更新出现。

调度useEffect

  1.   if ((flags & Passive) !== NoFlags) {
  2.       // If there are passive effects, schedule a callback to flush at
  3.       // the earliest opportunity.
  4.       if (!rootDoesHavePassiveEffects) {
  5.         rootDoesHavePassiveEffects = true;
  7.         scheduleCallback(NormalSchedulerPriority, () => {
  8.           flushPassiveEffects();
  9.           return null;
  10.         });
  11.       }
  12.     }

scheduleCallback方法由Scheduler模块提供，用于以某个优先级异步调度一个回调函数。 这个函数以一个优先级异步执行回调函数，所以在FunctionComponent中存在useEffect，并且回调函数需要触发的情况，会在beforemutation阶段以normal的优先级调度，由于commit阶段是同步执行的，所以useEffect的回调函数会在commit阶段执行完之后异步执行。

在此处，被异步调度的回调函数就是触发useEffect的方法flushPassiveEffects

  1. function flushPassiveEffects(): boolean {
  2.   // Returns whether passive effects were flushed.
  3.   if (pendingPassiveEffectsLanes !== NoLanes) {
  4.     const priority = higherEventPriority(
  5.       DefaultEventPriority,
  6.       lanesToEventPriority(pendingPassiveEffectsLanes),
  7.     );
  8.     const previousPriority = getCurrentUpdatePriority();
  9.     try {
  10.       setCurrentUpdatePriority(priority);
  11.       return flushPassiveEffectsImpl();
  12.     } finally {
  13.       setCurrentUpdatePriority(previousPriority);
  14.     }
  15.   }
  16.   return false;
  17. }

flushPassiveEffects内部会设置优先级，并切调用flushPassiveEffectsImpl

flushPassiveEffectsImpl主要做三件事：

  • 调用该useEffect在上一次render时的销毁函数
  • 调用该useEffect在本次render时的回调函数
  • 如果存在同步任务，不需要等待下次事件循环的宏任务，提前执行他

第一步：执行上一次render时useEffect的销毁函数

useEffect的执行需要保证所有组件useEffect的销毁函数必须都执行完后才能执行任意一个组件的useEffect的回调函数。

这是因为多个组件间可能共用同一个ref。

如果在执行前没有销毁函数，那么在某个组件useEffect的销毁函数中修改的ref.current可能影响另一个组件useEffect的回调函数中的同一个ref的current属性。

在useLayoutEffect中也有同样的问题，所以他们都遵循先全部销毁，再执行的顺序。

  1.  const unmountEffects = pendingPassiveHookEffectsUnmount;
  2.   pendingPassiveHookEffectsUnmount = [];
  3.   for (let i = 0; i < unmountEffects.length; i += 2) {
  4.     const effect = ((unmountEffects[i]: any): HookEffect);
  5.     const fiber = ((unmountEffects[i + 1]: any): Fiber);
  6.     const destroy = effect.destroy;
  7.     effect.destroy = undefined;
  9.     if (typeof destroy === 'function') {
  10.         try {
  11.           if (
  12.             enableProfilerTimer &&
  13.             enableProfilerCommitHooks &&
  14.             fiber.mode & ProfileMode
  15.           ) {
  16.             try {
  17.               startPassiveEffectTimer();
  18.               destroy();
  19.             } finally {
  20.               recordPassiveEffectDuration(fiber);
  21.             }
  22.           } else {
  23.             destroy();
  24.           }
  25.         } catch (error) {
  26.           invariant(fiber !== null, 'Should be working on an effect.');
  27.           captureCommitPhaseError(fiber, error);
  28.         }
  29.     }
  30.   }

获取在unmount时处理的销毁函数中其中pendingPassiveHookEffectsUnmount数组的索引i保存需要销毁的effect，i+1保存该effect对应的fiber。(向pendingPassiveHookEffectsUnmount数组内push数据的操作发生在layout阶段 commitLayoutEffectOnFiber方法内部的schedulePassiveEffects方法中。)

  1. function schedulePassiveEffects(finishedWork: Fiber) {
  2.   const updateQueue: FunctionComponentUpdateQueue | null = (finishedWork.updateQueue: any);
  3.   const lastEffect = updateQueue !== null ? updateQueue.lastEffect : null;
  4.   if (lastEffect !== null) {
  5.     const firstEffect = lastEffect.next;
  6.     let effect = firstEffect;
  7.     do {
  8.       const {next, tag} = effect;
  9.       if (
  10.         (tag & HookPassive) !== NoHookEffect &&
  11.         (tag & HookHasEffect) !== NoHookEffect
  12.       ) {
  13.         // 向`pendingPassiveHookEffectsUnmount`数组内`push`要销毁的effect
  14.         enqueuePendingPassiveHookEffectUnmount(finishedWork, effect);
  15.         // 向`pendingPassiveHookEffectsMount`数组内`push`要执行回调的effect
  16.         enqueuePendingPassiveHookEffectMount(finishedWork, effect);
  17.       }
  18.       effect = next;
  19.     } while (effect !== firstEffect);
  20.   }
  21. }

第二步：回调函数的执行

遍历数组，执行useEffect的回调函数

  1.  const mountEffects = pendingPassiveHookEffectsMount;
  2.   pendingPassiveHookEffectsMount = [];
  3.   for (let i = 0; i < mountEffects.length; i += 2) {
  4.     const effect = ((mountEffects[i]: any): HookEffect);
  5.     const fiber = ((mountEffects[i + 1]: any): Fiber);
  6.       try {
  7.         const create = effect.create;
  8.         if (
  9.           enableProfilerTimer &&
  10.           enableProfilerCommitHooks &&
  11.           fiber.mode & ProfileMode
  12.         ) {
  13.           try {
  14.             startPassiveEffectTimer();
  15.             effect.destroy = create();
  16.           } finally {
  17.             recordPassiveEffectDuration(fiber);
  18.           }
  19.         } else {
  20.           effect.destroy = create();
  21.         }
  22.       } catch (error) {
  23.         invariant(fiber !== null, 'Should be working on an effect.');
  24.         captureCommitPhaseError(fiber, error);
  25.       }
  26.   }

其中向pendingPassiveHookEffectsMount中push数据的操作同样发生在schedulePassiveEffects中。

  1. function schedulePassiveEffects(finishedWork: Fiber) {
  2.   const updateQueue: FunctionComponentUpdateQueue | null = (finishedWork.updateQueue: any);
  3.   const lastEffect = updateQueue !== null ? updateQueue.lastEffect : null;
  4.   if (lastEffect !== null) {
  5.     const firstEffect = lastEffect.next;
  6.     let effect = firstEffect;
  7.     do {
  8.       const {next, tag} = effect;
  9.       if (
  10.         (tag & HookPassive) !== NoHookEffect &&
  11.         (tag & HookHasEffect) !== NoHookEffect
  12.       ) {
  13.         enqueuePendingPassiveHookEffectUnmount(finishedWork, effect);
  14.         enqueuePendingPassiveHookEffectMount(finishedWork, effect);
  15.       }
  16.       effect = next;
  17.     } while (effect !== firstEffect);
  18.   }
  19. }

需要注意的是：与 componentDidMount、componentDidUpdate 不同的是，在浏览器完成布局与绘制之后，传给 useEffect 的函数会延迟调用。这使得它适用于许多常见的副作用场景，比如设置订阅和事件处理等情况，因此不应在函数中执行阻塞浏览器更新屏幕的操作。

所以useEffect的这两个阶段会在页面渲染后（layout阶段后）异步执行，以防止同步执行阻塞浏览器渲染。

mutation阶段

这个阶段是执行DOM操作的阶段，遍历effectList，执行commitMutationEffects方法。

  1.    nextEffect = firstEffect;
  2.     do {
  3.         try {
  4.           commitMutationEffects(root, renderPriorityLevel);
  5.         } catch (error) {
  6.           invariant(nextEffect !== null, 'Should be working on an effect.');
  7.           captureCommitPhaseError(nextEffect, error);
  8.           nextEffect = nextEffect.nextEffect;
  9.         }
  10.     } while (nextEffect !== null);

概览

这部分同样是遍历effectList，根据 ContentReset effectTag重置文字节点，然后更新ref，最后根据effectTag保存的信息进行对应的插入、更新、删除DOM。

  1. function commitMutationEffects(
  2.   root: FiberRoot,
  3.   renderPriorityLevel: ReactPriorityLevel,
  4. ) {
  5.   // TODO: Should probably move the bulk of this function to commitWork.
  6.   while (nextEffect !== null) {
  7.     setCurrentDebugFiberInDEV(nextEffect);
  9.     const flags = nextEffect.flags;
  11.     if (flags & ContentReset) {
  12.       commitResetTextContent(nextEffect);
  13.     }
  15.     if (flags & Ref) {
  16.       const current = nextEffect.alternate;
  17.       if (current !== null) {
  18.         commitDetachRef(current);
  19.       }
  20.       if (enableScopeAPI) {
  21.         // TODO: This is a temporary solution that allowed us to transition away
  22.         // from React Flare on www.
  23.         if (nextEffect.tag === ScopeComponent) {
  24.           commitAttachRef(nextEffect);
  25.         }
  26.       }
  27.     }
  29.     // The following switch statement is only concerned about placement,
  30.     // updates, and deletions. To avoid needing to add a case for every possible
  31.     // bitmap value, we remove the secondary effects from the effect tag and
  32.     // switch on that value.
  33.     const primaryFlags = flags & (Placement | Update | Deletion | Hydrating);
  34.     switch (primaryFlags) {
  35.       case Placement: {
  36.         commitPlacement(nextEffect);
  37.         // Clear the "placement" from effect tag so that we know that this is
  38.         // inserted, before any life-cycles like componentDidMount gets called.
  39.         // TODO: findDOMNode doesn't rely on this any more but isMounted does
  40.         // and isMounted is deprecated anyway so we should be able to kill this.
  41.         nextEffect.flags &= ~Placement;
  42.         break;
  43.       }
  44.       case PlacementAndUpdate: {
  45.         // Placement
  46.         commitPlacement(nextEffect);
  47.         // Clear the "placement" from effect tag so that we know that this is
  48.         // inserted, before any life-cycles like componentDidMount gets called.
  49.         nextEffect.flags &= ~Placement;
  51.         // Update
  52.         const current = nextEffect.alternate;
  53.         commitWork(current, nextEffect);
  54.         break;
  55.       }
  56.       case Hydrating: {
  57.         nextEffect.flags &= ~Hydrating;
  58.         break;
  59.       }
  60.       case HydratingAndUpdate: {
  61.         nextEffect.flags &= ~Hydrating;
  63.         // Update
  64.         const current = nextEffect.alternate;
  65.         commitWork(current, nextEffect);
  66.         break;
  67.       }
  68.       case Update: {
  69.         const current = nextEffect.alternate;
  70.         commitWork(current, nextEffect);
  71.         break;
  72.       }
  73.       case Deletion: {
  74.         commitDeletion(root, nextEffect, renderPriorityLevel);
  75.         break;
  76.       }
  77.     }
  79.     resetCurrentDebugFiberInDEV();
  80.     nextEffect = nextEffect.nextEffect;
  81.   }
  82. }

根据以上代码总结，对每个有副作用的Fiber节点执行如下三个操作：

  • 根据ContentReset effectTag重置文字节点
  • 更新ref
  • 根据effectTag分别处理，其中effectTag包括(Placement | Update | Deletion | Hydrating（SSR）)

Placement

commitPlacement

该方法所做的工作分为三步：
1.获取父级DOM节点。其中finishedWork为传入的Fiber节点。

  1.   const parentFiber = getHostParentFiber(finishedWork);
  3.   const parentStateNode = parentFiber.stateNode;

2.获取Fiber节点的DOM兄弟节点

  1. const before = getHostSibling(finishedWork);

3.根据DOM兄弟节点是否存在决定调用parentNode.insertBefore或parentNode.appendChild执行DOM插入操作。

  1.  if (isContainer) {
  2.     insertOrAppendPlacementNodeIntoContainer(finishedWork, before, parent);
  3.   } else {
  4.     insertOrAppendPlacementNode(finishedWork, before, parent);
  5.   }

getHostSibling（获取兄弟DOM节点）的执行很耗时，当在同一个父Fiber节点下依次执行多个插入操作，getHostSibling算法的复杂度为指数级。

这是由于Fiber节点不只包括HostComponent，所以Fiber树和渲染的DOM树节点并不是一一对应的。要从Fiber节点找到DOM节点很可能跨层级遍历。

  1. function Item() {
  2.   return <li><li>;
  3. }
  5. function App() {
  6.   return (
  7.     <div>
  8.       <Item/>
  9.     </div>
  10.   )
  11. }
  13. ReactDOM.render(<App/>, document.getElementById('root'));

对应的Fiber树和DOM树结构为：

  1. // Fiber树
  2.           child      child      child       child
  3. rootFiber -----> App -----> div -----> Item -----> li
  5. // DOM树
  6. #root ---> div ---> li

当在div的子节点Item前插入一个新节点p，即App变为：

  1. function App() {
  2.   return (
  3.     <div>
  4.       <p></p>
  5.       <Item/>
  6.     </div>
  7.   )
  8. }

对应的Fiber树和DOM树结构为：

  1. // Fiber树
  2.           child      child      child
  3. rootFiber -----> App -----> div -----> p 
  4.                                        | sibling       child
  5.                                        | -------> Item -----> li 
  6. // DOM树
  7. #root ---> div ---> p
  8.              |
  9.                ---> li

此时DOM节点 p的兄弟节点为li，而Fiber节点 p对应的兄弟DOM节点为：

  1. fiberP.sibling.child

即fiber p的兄弟fiber Item的子fiber li

Update

调用的是commitWork

在这里主要关注函数组件和原始类型组件

FunctionComponent mutation

调用 commitHookEffectListUnmount()方法，该方法会遍历effectList，执行所有useLayoutEffect hook的销毁函数。

  1. function commitHookEffectListUnmount(tag: number, finishedWork: Fiber) {
  2.   const updateQueue: FunctionComponentUpdateQueue | null = (finishedWork.updateQueue: any);
  3.   const lastEffect = updateQueue !== null ? updateQueue.lastEffect : null;
  4.   if (lastEffect !== null) {
  5.     const firstEffect = lastEffect.next;
  6.     let effect = firstEffect;
  7.     do {
  8.       if ((effect.tag & tag) === tag) {
  9.         // Unmount
  10.         const destroy = effect.destroy;
  11.         effect.destroy = undefined;
  12.         if (destroy !== undefined) {
  13.           destroy();
  14.         }
  15.       }
  16.       effect = effect.next;
  17.     } while (effect !== firstEffect);
  18.   }
  19. }

HostComponent mutation

调用的是commitUpdate

commitUpdate->updateProperties->updateDOMProperties

最终会在updateDOMProperties中将render阶段 completeWork (opens new window)中为Fiber节点赋值的updateQueue对应的内容渲染在页面上。

  1. function updateDOMProperties(
  2.   domElement: Element,
  3.   updatePayload: Array<any>,
  4.   wasCustomComponentTag: boolean,
  5.   isCustomComponentTag: boolean,
  6. ): void {
  7.   // TODO: Handle wasCustomComponentTag
  8.   for (let i = 0; i < updatePayload.length; i += 2) {
  9.     const propKey = updatePayload[i];
  10.     const propValue = updatePayload[i + 1];
  11.     if (propKey === STYLE) {
  12.       // 处理 style
  13.       setValueForStyles(domElement, propValue);
  14.     } else if (propKey === DANGEROUSLY_SET_INNER_HTML) {
  15.       //处理 DANGEROUSLY_SET_INNER_HTML
  16.       setInnerHTML(domElement, propValue);
  17.     } else if (propKey === CHILDREN) {
  18.        // 处理 children
  19.       setTextContent(domElement, propValue);
  20.     } else {
  21.       // 处理剩余 props
  22.       setValueForProperty(domElement, propKey, propValue, isCustomComponentTag);
  23.     }
  24.   }
  25. }

Deletion

如果需要删除节点就会执行commitDeletion方法

  1. function commitDeletion(
  2.   finishedRoot: FiberRoot,
  3.   current: Fiber,
  4.   renderPriorityLevel: ReactPriorityLevel,
  5. ): void {
  6.   if (supportsMutation) {
  7.     // Recursively delete all host nodes from the parent.
  8.     // Detach refs and call componentWillUnmount() on the whole subtree.
  9.     unmountHostComponents(finishedRoot, current, renderPriorityLevel);
  10.   } else {
  11.     // Detach refs and call componentWillUnmount() on the whole subtree.
  12.     commitNestedUnmounts(finishedRoot, current, renderPriorityLevel);
  13.   }
  14.   const alternate = current.alternate;
  15.   detachFiberMutation(current);
  16.   if (alternate !== null) {
  17.     detachFiberMutation(alternate);
  18.   }
  19. }

unmountHostComponents方法中先会获取当前节点的父节点，因为想删除某个节点，需要找到他的父节点

  1. let node: Fiber = current;
  3.   // Each iteration, currentParent is populated with node's host parent if not
  4.   // currentParentIsValid.
  5.   let currentParentIsValid = false;
  7.   // Note: these two variables *must* always be updated together.
  8.   let currentParent;
  9.   let currentParentIsContainer;
  11.   while (true) {
  12.     if (!currentParentIsValid) {
  13.       let parent = node.return;
  14.       findParent: while (true) {
  15.         invariant(
  16.           parent !== null,
  17.           'Expected to find a host parent. This error is likely caused by ' +
  18.             'a bug in React. Please file an issue.',
  19.         );
  20.         const parentStateNode = parent.stateNode;
  21.         switch (parent.tag) {
  22.           case HostComponent:
  23.             currentParent = parentStateNode;
  24.             currentParentIsContainer = false;
  25.             break findParent;
  26.           case HostRoot:
  27.             currentParent = parentStateNode.containerInfo;
  28.             currentParentIsContainer = true;
  29.             break findParent;
  30.           case HostPortal:
  31.             currentParent = parentStateNode.containerInfo;
  32.             currentParentIsContainer = true;
  33.             break findParent;
  34.           case FundamentalComponent:
  35.             if (enableFundamentalAPI) {
  36.               currentParent = parentStateNode.instance;
  37.               currentParentIsContainer = false;
  38.             }
  39.         }
  40.         parent = parent.return;
  41.       }
  42.       currentParentIsValid = true;
  43.     }

找到之后会执行commitNestedUnmounts方法，这个方法嵌套了commitUnmout方法，因为当我们删除一个节点，这个节点可能包含一颗子树，一颗子树中的子孙Fiber节点都需要被递归的删除。

对于FunctionComponent方法，会注册需要被执行的useEffect的回调函数，如果存在useEffect的销毁函数存在，也会执行销毁函数。

对于ClassComponent方法，会调用componentWillUnmount生命周期钩子

综上：

layout阶段

commitLayoutEffects

  1.   while (nextEffect !== null) {
  2.     setCurrentDebugFiberInDEV(nextEffect);
  4.     const flags = nextEffect.flags;
  5.   // 调用生命周期钩子和hook
  6.     if (flags & (Update | Callback)) {
  7.       const current = nextEffect.alternate;
  8.       commitLayoutEffectOnFiber(root, current, nextEffect, committedLanes);
  9.     }
  11.     if (enableScopeAPI) {
  12.        // 赋值ref
  13.       if (flags & Ref && nextEffect.tag !== ScopeComponent) {
  14.         commitAttachRef(nextEffect);
  15.       }
  16.     } else {
  17.       if (flags & Ref) {
  18.         commitAttachRef(nextEffect);
  19.       }
  20.     }
  22.     resetCurrentDebugFiberInDEV();
  23.     nextEffect = nextEffect.nextEffect;
  24.   }

这里的commitLayoutEffectOnFiber是commitLifeCycles方法

与前两个阶段类似，layout阶段也是遍历effectList，最终执行 commitLayoutEffectOnFiber方法

  • 对于ClassComponent，他会通过current === null?区分是mount还是update，调用componentDidMount或 componentDidUpdate
  • 触发状态更新的this.setState的第二个参数回调函数，也会在此时调用。
  • 对于FunctionComponent及ForwardRef、React.memo包裹的FunctionComponent，他在这里会调用useLayoutEffect hook的回调函数，因为参数是HookLayout | HookHasEffect，所以只处理由useLayoutEffect()创建的effect，调用effect.create()之后, 将返回值赋值到effect.destroy，并且添加useEffect的销毁函数和回调函数到队列
  • 对于HostRoot，即rootFiber，如果赋值了第三个参数回调函数，也会在此时调用

commitAttachRef

获取DOM实例，更新ref

  1. function commitAttachRef(finishedWork: Fiber) {
  2.   const ref = finishedWork.ref;
  3.   if (ref !== null) {
  4.     const instance = finishedWork.stateNode;
  5.     let instanceToUse;
  6.     switch (finishedWork.tag) {
  7.       case HostComponent:
  8.         instanceToUse = getPublicInstance(instance);
  9.         break;
  10.       default:
  11.         instanceToUse = instance;
  12.     }
  13.     // Moved outside to ensure DCE works with this flag
  14.     if (enableScopeAPI && finishedWork.tag === ScopeComponent) {
  15.       instanceToUse = instance;
  16.     }
  17.     if (typeof ref === 'function') {
  18.       ref(instanceToUse);
  19.     } else {
  20.       if (__DEV__) {
  21.         if (!ref.hasOwnProperty('current')) {
  22.           console.error(
  23.             'Unexpected ref object provided for %s. ' +
  24.               'Use either a ref-setter function or React.createRef().',
  25.             getComponentName(finishedWork.type),
  26.           );
  27.         }
  28.       }
  30.       ref.current = instanceToUse;
  31.     }
  32.   }
  33. }

current Fiber树切换

  1. root.current = finishedWork;

标志着layout阶段结束。

componentWillUnmount会在mutation阶段执行，此时current Fiber树还指向前一次更新的Fiber树，在生命周期钩子内获取的DOM还是更新前的。

componentDidMount和componentDidUpdate会在layout阶段执行。此时current Fiber树已经指向更新后的Fiber树，在生命周期钩子内获取的DOM就是更新后的。