此阶段处理的工作

  • 处理与focus和blur事件

image.png

  • 如果effect Tag包含Snapshot，即ClassComponent对应的getSnapshotBeforeUpdate，处理commitBeforeMutationEffectsOnFiber。

image.png

  • 如果有effectTag，effectTag包含passive时，即FunctionComponent中对对应的useEffect的effect tag，需要调度flushPassiveEffects()

image.png

commitBeforeMutationEffectsOnFiber

如果effect Tag包含Snapshot，进入commitBeforeMutationEffectsOnFiber。如果是ClassComponent，就会 var instance = finishedWork.stateNode，获得component的实例，调用实例上的getSnapshotBeforeUpdate生命周期。
因此getSnapshotBeforeUpdate，是在before mutation上调用，此时还没有页面可见的更新。

  1. function commitBeforeMutationEffectsOnFiber(finishedWork) {
  2.   var current = finishedWork.alternate;
  3.   var flags = finishedWork.flags;
  5.   if ((flags & Snapshot) !== NoFlags) {
  6.     setCurrentFiber(finishedWork);
  8.     switch (finishedWork.tag) {
  9.       case FunctionComponent:
  10.       case ForwardRef:
  11.       case SimpleMemoComponent:
  12.         {
  13.           break;
  14.         }
  15.         //如果是ClassComponent
  16.       case ClassComponent:
  17.         {
  18.           if (current !== null) {
  19.             var prevProps = current.memoizedProps;
  20.             var prevState = current.memoizedState;
  21.             var instance = finishedWork.stateNode;     
  22.             ....
  24.             var snapshot = instance.getSnapshotBeforeUpdate(finishedWork.elementType === finishedWork.type ? prevProps : resolveDefaultProps(finishedWork.type, prevProps), prevState);
  26.             {
  27.               var didWarnSet = didWarnAboutUndefinedSnapshotBeforeUpdate;
  29.               if (snapshot === undefined && !didWarnSet.has(finishedWork.type)) {
  30.                 didWarnSet.add(finishedWork.type);
  32.                 error('%s.getSnapshotBeforeUpdate(): A snapshot value (or null) ' + 'must be returned. You have returned undefined.', getComponentNameFromFiber(finishedWork));
  33.               }
  34.             }
  36.             instance.__reactInternalSnapshotBeforeUpdate = snapshot;
  37.           }
  39.           break;
  40.         }
  42.       case HostRoot:
  43.         {
  44.           {
  45.             var root = finishedWork.stateNode;
  46.             clearContainer(root.containerInfo);
  47.           }
  49.           break;
  50.         }
  52.       case HostComponent:
  53.       case HostText:
  54.       case HostPortal:
  55.       case IncompleteClassComponent:
  56.         // Nothing to do for these component types
  57.         break;
  59.       default:
  60.         {
  61.           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.');
  62.         }
  63.     }
  65.     resetCurrentFiber();
  66.   }
  67. }

flushPassiveEffects

如果effectTag包含passive，此时并没有直接执行flushPassiveEffects。flushPassiveEffects会执行useEffect的回调函数。
为什么逻辑中没有直接执行flushPassiveEffects，而是作为scheduleCallback的回调函数？
scheduleCallback()会以一个优先级，来异步执行一个回调函数。如果一个FunctionComponent存在一个useEffect，并且他的useEffect的回调函数需要被触发的情况下，那么这个useEffect的回调会在before mutation阶段，先被NormalSchedulePriority的优先级调度。
而整个commit阶段是同步执行的，所以useEffect回调函数的执行，是在commit阶段完成以后，再异步执行的。
image.png