React源码解析之Commit第一子阶段「before mutation」

do {
      if (__DEV__) {
        invokeGuardedCallback(null, commitBeforeMutationEffects, null);
        //删除了 dev 代码
      } else {
        try {
          //调用 classComponent 上的生命周期方法 getSnapshotBeforeUpdate
          //关于getSnapshotBeforeUpdate，请看：https://zh-hans.reactjs.org/docs/react-component.html#getsnapshotbeforeupdate
          commitBeforeMutationEffects();
        } catch (error) {
          invariant(nextEffect !== null, 'Should be working on an effect.');
          captureCommitPhaseError(nextEffect, error);
          nextEffect = nextEffect.nextEffect;
        }
      }
    } while (nextEffect !== null);

function commitBeforeMutationEffects() {
  //循环 effect 链
  while (nextEffect !== null) {
    //如果 effectTag 里有 Snapshot 这个 effectTag 的话
    //关于&，请看[前端小知识10点(2020.2.10)](https://mp.weixin.qq.com/s/tt2XcW4GF7oBBZOPwTiCcg)中的「8、JS 中的 & 是什么意思」
    if ((nextEffect.effectTag & Snapshot) !== NoEffect) {
      //dev 可不看
      // setCurrentDebugFiberInDEV(nextEffect);
      //计 effect 的数
      recordEffect();
      //获取当前 fiber 节点
      const current = nextEffect.alternate;
      commitBeforeMutationEffectOnFiber(current, nextEffect);
      //dev 可不看
      // resetCurrentDebugFiberInDEV();
    }
    nextEffect = nextEffect.nextEffect;
  }
}

function commitBeforeMutationLifeCycles(
  current: Fiber | null,
  finishedWork: Fiber,
): void {
  switch (finishedWork.tag) {
    //FunctionComponent会执行commitHookEffectList()
    //FunctionComponent是 pureComponent，所以不会有副作用

    //useEffect 和 useLayoutEffect 是赋予FunctionComponent有副作用能力的 hooks
    //useEffect类似于componentDidMount，useLayoutEffect类似于componentDidUpdate
    case FunctionComponent:
    case ForwardRef:
    case SimpleMemoComponent: {
      //提交 hooks 的 effects
      commitHookEffectList(UnmountSnapshot, NoHookEffect, finishedWork);
      return;
    }
    case ClassComponent: {
      if (finishedWork.effectTag & Snapshot) {
        if (current !== null) {
          //老 props
          const prevProps = current.memoizedProps;
          //老 state
          const prevState = current.memoizedState;
          //getSnapshotBeforeUpdate 的计时开始
          startPhaseTimer(finishedWork, 'getSnapshotBeforeUpdate');
          //获取 classComponent 的实例
          const instance = finishedWork.stateNode;
          // We could update instance props and state here,
          // but instead we rely on them being set during last render.
          // TODO: revisit this when we implement resuming.
          if (__DEV__) {
            //删除了 dev 代码
          }
          //执行 getSnapshotBeforeUpdate 生命周期 api，在组件update前捕获一些 DOM 信息，
          //返回自定义的值或 null，统称为 snapshot
          //关于getSnapshotBeforeUpdate，请参考：https://zh-hans.reactjs.org/docs/react-component.html#getsnapshotbeforeupdate
          const snapshot = instance.getSnapshotBeforeUpdate(
            finishedWork.elementType === finishedWork.type
              ? prevProps
              : resolveDefaultProps(finishedWork.type, prevProps),
            prevState,
          );
          if (__DEV__) {
            //删除了 dev 代码
          }
          //将 snapshot 赋值到__reactInternalSnapshotBeforeUpdate属性上，
          // 这种手法跟[React源码解析之updateClassComponent（上）](https://mp.weixin.qq.com/s/F_UdPgdt6wtP78eDqUesoA)
          // 中的「三、adoptClassInstance」里 instance._reactInternalFiber=workInProgress 类似
          instance.__reactInternalSnapshotBeforeUpdate = snapshot;
          //getSnapshotBeforeUpdate 的计时结束
          stopPhaseTimer();
        }
      }
      return;
    }
    case HostRoot:
    case HostComponent:
    case HostText:
    case HostPortal:
    case IncompleteClassComponent:
      // Nothing to do for these component types
      return;
    //没有副作用，不应该进入到 commit 阶段
    default: {
      invariant(
        false,
        'This unit of work tag should not have side-effects. This error is ' +
          'likely caused by a bug in React. Please file an issue.',
      );
    }
  }
}

instance.__reactInternalSnapshotBeforeUpdate = snapshot

instance._reactInternalFiber=workInProgress

function commitHookEffectList(
  unmountTag: number,
  mountTag: number,
  finishedWork: Fiber,
) {
  //FunctionComponent 的更新队列
  //补充：FunctionComponent的 side-effect 是放在 updateQueue.lastEffect 上的
  //ReactFiberHooks.js中的pushEffect()里有说明：componentUpdateQueue.lastEffect = effect.next = effect;
  const updateQueue: FunctionComponentUpdateQueue | null = (finishedWork.updateQueue: any);
  let lastEffect = updateQueue !== null ? updateQueue.lastEffect : null;
  //如果有副作用 side-effect的话，循环effect 链，根据 effectTag，执行每个 effect
  if (lastEffect !== null) {
    //第一个副作用
    const firstEffect = lastEffect.next;
    let effect = firstEffect;
    do {
      //如果包含 unmountTag 这个 effectTag的话，执行destroy()，并将effect.destroy置为 undefined
      if ((effect.tag & unmountTag) !== NoHookEffect) {
        // Unmount
        const destroy = effect.destroy;
        effect.destroy = undefined;
        if (destroy !== undefined) {
          destroy();
        }
      }
      //如果包含 mountTag 这个 effectTag 的话，执行 create()
      if ((effect.tag & mountTag) !== NoHookEffect) {
        // Mount
        const create = effect.create;
        effect.destroy = create();

        if (__DEV__) {
          //删除了 dev 代码
        }
      }
      effect = effect.next;
    } while (effect !== firstEffect);
  }
}