ClassComponent 更新过程

[lz-lee]

classComponent 更新 updateClassComponent

• 承担了唯二可以更新应用的api： setState、forceUpdate

• 首次渲染 instance 为 null

  • constructClassInstance 创建实例
  • mountClassInstance 挂载实例，调用 willMount
  • 如果有 getDerivedStateFromProps 则会执行并更新 state，并且不会执行 willMount 钩子
  • 如果有 didMount 则标记 workInProgress 的 effectTag 为 Update

• 渲染被中断 instance !== null, current === null

  • resumeMountClassInstance 复用实例但还是调用首次渲染的生命周期方法

    const hasNewLifecycles =
    typeof getDerivedStateFromProps === 'function' ||
    typeof instance.getSnapshotBeforeUpdate === 'function';

  • 如果有 getDerivedStateFromProps 则会执行并更新 state
  • 如果hasNewLifecycles 为 true, 则不会调用 componentWillReceiveProps 和 willMount 钩子，否则先调用 componentWillReceiveProps 再调用 componentWillMount
  • 如果有 didMount 则标记 workInProgress 的 effectTag 为 Update

• 更新渲染 instance !== null, current !== null

  • updateClassInstance，调用 componentWillReceiveProp 和 willUpdate 生命周期
  • 如果有 getDerivedStateFromProps 则会执行并更新 state
  • 如果 hasNewLifecycles 为 true 则 componentWillReceiveProp 和 willUpdate 不会调用
  • 如果 shouldUpdate 为 true，并有didUpdate 方法则标记 workInProgress 的effectTag 为 Update

• 初次渲染 updateUqueue 为 null，当有 setState 时 updateQueue 可能有多个 update ，需要调用processUpdateQueue 更新 state

• 最后执行 finishClassComponent

  • 进行错误判断的处理
  • 判断是否可以跳过更新
  • 重新调和子节点 reconcileChildren

case ClassComponent: {
      const Component = workInProgress.type;
      const unresolvedProps = workInProgress.pendingProps;
      const resolvedProps =
        workInProgress.elementType === Component
          ? unresolvedProps
          : resolveDefaultProps(Component, unresolvedProps);
      return updateClassComponent(
        current,
        workInProgress,
        Component,
        resolvedProps,
        renderExpirationTime,
      );
    }

updateClassComponent

function updateClassComponent(
  current: Fiber | null,
  workInProgress: Fiber,
  Component: any,
  nextProps,
  renderExpirationTime: ExpirationTime,
) {
  // ...context 相关

  // classComponent 通过 new class 获取的实例对象
  const instance = workInProgress.stateNode;

  // 通过这个变量判断是否更新component
  let shouldUpdate;
  // 首次 render 时不存在，或者class组件第一次渲染
  if (instance === null) {
     // 如果非首次渲染，而 instance 不存在，表示的是 suspended 异步组件的情况
    if (current !== null) {
      // An class component without an instance only mounts if it suspended
      // inside a non- concurrent tree, in an inconsistent state. We want to
      // tree it like a new mount, even though an empty version of it already
      // committed. Disconnect the alternate pointers.
      current.alternate = null;
      workInProgress.alternate = null;
      // Since this is conceptually a new fiber, schedule a Placement effect
      workInProgress.effectTag |= Placement;
    }
    // In the initial pass we might need to construct the instance.
    // 创建 instance
    constructClassInstance(
      workInProgress,
      Component,
      nextProps,
      renderExpirationTime,
    );
    // 挂载 class组件
    mountClassInstance(
      workInProgress,
      Component,
      nextProps,
      renderExpirationTime,
    );
    shouldUpdate = true;
  } else if (current === null) {
    // instance !==  null，之前首次挂载时被中断的，创建了 instance 但在 render 中报错的情况
    // In a resume, we'll already have an instance we can reuse.
    // 复用 instance
    shouldUpdate = resumeMountClassInstance(
      workInProgress,
      Component,
      nextProps,
      renderExpirationTime,
    );
  } else {
    // 更新渲染
    shouldUpdate = updateClassInstance(
      current,
      workInProgress,
      Component,
      nextProps,
      renderExpirationTime,
    );
  }
  return finishClassComponent(
    current,
    workInProgress,
    Component,
    shouldUpdate,
    hasContext,
    renderExpirationTime,
  );
}

constructClassInstance 创建实例

function constructClassInstance(
  workInProgress: Fiber,
  ctor: any,
  props: any,
  renderExpirationTime: ExpirationTime,
): any {
  let isLegacyContextConsumer = false;
  let unmaskedContext = emptyContextObject;
  let context = null;
  const contextType = ctor.contextType;
  // context 相关

  // ctor 就是 Reactelemnt.type 即声明组件的组件名，这里生成组件实例
  const instance = new ctor(props, context);
  // 初始化 state
  const state = (workInProgress.memoizedState =
    instance.state !== null && instance.state !== undefined
      ? instance.state
      : null);
      // 为 instance 添加 updater 为 classComponentUpdater,
      // 指定 workInProgress 的 stateNode 为当前instance
      // ReactInstanceMap map 对象， 给 instance._reactInternaleFiber 赋值当前 workInprogress
  adoptClassInstance(workInProgress, instance);

  // 创建实例时的警告，使用 getDerivedStateFromProps 不推荐设置 state 为 null
  // 使用了 getDerivedStateFromProps 或者getSnapshotBeforeUpdate， willXXXX 声明周期方法不会执行
  if (__DEV__) {
    // ...
  }

  // Cache unmasked context so we can avoid recreating masked context unless necessary.
  // ReactFiberContext usually updates this cache but can't for newly-created instances.
  // context 相关
  if (isLegacyContextConsumer) {
    cacheContext(workInProgress, unmaskedContext, context);
  }

  return instance;
}

// adoptClassInstance 方法

function adoptClassInstance(workInProgress: Fiber, instance: any): void {
  instance.updater = classComponentUpdater;
  workInProgress.stateNode = instance;
  // The instance needs access to the fiber so that it can schedule updates
  ReactInstanceMap.set(instance, workInProgress);
  if (__DEV__) {
    instance._reactInternalInstance = fakeInternalInstance;
  }
}

mountClassInstance 挂载实例

function mountClassInstance(
  workInProgress: Fiber,
  ctor: any,
  newProps: any,
  renderExpirationTime: ExpirationTime,
): void {
  if (__DEV__) {
    checkClassInstance(workInProgress, ctor, newProps);
  }

  const instance = workInProgress.stateNode;
  instance.props = newProps;
  instance.state = workInProgress.memoizedState;
  instance.refs = emptyRefsObject;

  const contextType = ctor.contextType;
  if (typeof contextType === 'object' && contextType !== null) {
    instance.context = readContext(contextType);
  } else {
    const unmaskedContext = getUnmaskedContext(workInProgress, ctor, true);
    instance.context = getMaskedContext(workInProgress, unmaskedContext);
  }

  if (__DEV__) {
   // .... 
  }

  // 初次渲染 updateUqueue 为 null，当有 setState 时 updateQueue 可能有多个 update ，需要调用 processUpdateQueue 更新 state
  let updateQueue = workInProgress.updateQueue;
  if (updateQueue !== null) {
    processUpdateQueue(
      workInProgress,
      updateQueue,
      newProps,
      instance,
      renderExpirationTime,
    );
    // 更新 instance 上的 state
    instance.state = workInProgress.memoizedState;
  }
  // 新的声明周期，组件更新过程中调用，即拿到的是更新后的 state
  const getDerivedStateFromProps = ctor.getDerivedStateFromProps;
  if (typeof getDerivedStateFromProps === 'function') {
    applyDerivedStateFromProps(
      workInProgress,
      ctor,
      getDerivedStateFromProps,
      newProps,
    );
    // 更新 state
    instance.state = workInProgress.memoizedState;
  }

  // In order to support react-lifecycles-compat polyfilled components,
  // Unsafe lifecycles should not be invoked for components using the new APIs.
  // 用了新的 API 则 willMount 不会执行
  if (
    typeof ctor.getDerivedStateFromProps !== 'function' &&
    typeof instance.getSnapshotBeforeUpdate !== 'function' &&
    (typeof instance.UNSAFE_componentWillMount === 'function' ||
      typeof instance.componentWillMount === 'function')
  ) {
    // willMount 可能执行了 setState 因此需要执行 processUpdateQueue 来更新 state
    callComponentWillMount(workInProgress, instance);
    // If we had additional state updates during this life-cycle, let's
    // process them now.
    updateQueue = workInProgress.updateQueue;
    if (updateQueue !== null) {
      processUpdateQueue(
        workInProgress,
        updateQueue,
        newProps,
        instance,
        renderExpirationTime,
      );
      instance.state = workInProgress.memoizedState;
    }
  }

  // 如果有 didMount，标记 effect 为 update，在 commit 阶段时，表明组件是有 didmount 这个方法的，
  // 等到组件内容真正 mount 到 dom 上时，才能真正调用 didmount 这个方法，等到需要用的时候才会去调用
  if (typeof instance.componentDidMount === 'function') {
    workInProgress.effectTag |= Update;
  }
}

processUpdateQueue 更新state

• 都是基于 queue.baseState 来计算新的 state 的，遍历 updateQueue 过程中会将每个 update 的更新优先级与当前更新优先级做对比，如果低于当前更新优先级则不执行

• 没有剩下来的 update 和 captureUpdate 表示全部计算完了，更新 baseState 为计算后的 resultState

  export function processUpdateQueue<State>(
  workInProgress: Fiber,
  queue: UpdateQueue<State>,
  props: any,
  instance: any,
  renderExpirationTime: ExpirationTime,
  ): void {
  hasForceUpdate = false;
  
  // 保证 workInProgress 上的 updateQueue 是 clone 的 queue，防止直接修改 current上的 queue
  queue = ensureWorkInProgressQueueIsAClone(workInProgress, queue);
  
  if (__DEV__) {
  currentlyProcessingQueue = queue;
  }
  
  // These values may change as we process the queue.
  // 每次执行完 processUpdateQueue 都会把新的 state 赋值到 baseState 上
  let newBaseState = queue.baseState;
  let newFirstUpdate = null;
  let newExpirationTime = NoWork;
  
  // Iterate through the list of updates to compute the result.
  let update = queue.firstUpdate;
  let resultState = newBaseState;
  while (update !== null) {
  // update的执行优先级
  const updateExpirationTime = update.expirationTime;
  // 优先级低则不执行
  if (updateExpirationTime > renderExpirationTime) {
    // This update does not have sufficient priority. Skip it.
    if (newFirstUpdate === null) {
      // This is the first skipped update. It will be the first update in
      // the new list.
      // 此 update 就成为剩下的第一个待更新的
      newFirstUpdate = update;
      // Since this is the first update that was skipped, the current result
      // is the new base state.
      newBaseState = resultState;
    }
    // Since this update will remain in the list, update the remaining
    // expiration time.
    if (
      newExpirationTime === NoWork ||
      newExpirationTime > updateExpirationTime
    ) {
      // 不更新则赋值为此 update 的过期时间
      newExpirationTime = updateExpirationTime;
    }
  } else {
    // This update does have sufficient priority. Process it and compute
    // a new result.
    // 这次 update 要被执行， setState 的 update.tag -> UpdateState -> 计算新的 state
    // 如果为 forceUpdate 则更新全局变量 hasForceUpdate = true
    resultState = getStateFromUpdate(
      workInProgress,
      queue,
      update,
      resultState, // prevState 为之前计算的 baseState
      props,
      instance,
    );
    // setState(fn ,callback) callback 为第二个参数，在 setState 之后执行
    const callback = update.callback;
    if (callback !== null) {
      // 标记 effect 在 commit 阶段，setState 更新完成之后执行
      workInProgress.effectTag |= Callback;
      // Set this to null, in case it was mutated during an aborted render.
      // 防止中断的 render 过程被修改
      update.nextEffect = null;
      // 保存链表结构
      if (queue.lastEffect === null) {
        queue.firstEffect = queue.lastEffect = update;
      } else {
        queue.lastEffect.nextEffect = update;
        queue.lastEffect = update;
      }
    }
  }
  // 操作下一个 update
  // Continue to the next update.
  update = update.next;
  }
  
  // 同样的对 captureUpdate 执行更新操作
  // Separately, iterate though the list of captured updates.
  let newFirstCapturedUpdate = null;
  update = queue.firstCapturedUpdate;
  while (update !== null) {
  const updateExpirationTime = update.expirationTime;
  if (updateExpirationTime > renderExpirationTime) {
    // This update does not have sufficient priority. Skip it.
    if (newFirstCapturedUpdate === null) {
      // This is the first skipped captured update. It will be the first
      // update in the new list.
      newFirstCapturedUpdate = update;
      // If this is the first update that was skipped, the current result is
      // the new base state.
      if (newFirstUpdate === null) {
        newBaseState = resultState;
      }
    }
    // Since this update will remain in the list, update the remaining
    // expiration time.
    if (
      newExpirationTime === NoWork ||
      newExpirationTime > updateExpirationTime
    ) {
      newExpirationTime = updateExpirationTime;
    }
  } else {
    // This update does have sufficient priority. Process it and compute
    // a new result.
    resultState = getStateFromUpdate(
      workInProgress,
      queue,
      update,
      resultState,
      props,
      instance,
    );
    const callback = update.callback;
    if (callback !== null) {
      workInProgress.effectTag |= Callback;
      // Set this to null, in case it was mutated during an aborted render.
      update.nextEffect = null;
      if (queue.lastCapturedEffect === null) {
        queue.firstCapturedEffect = queue.lastCapturedEffect = update;
      } else {
        queue.lastCapturedEffect.nextEffect = update;
        queue.lastCapturedEffect = update;
      }
    }
  }
  update = update.next;
  }
  
  if (newFirstUpdate === null) {
  queue.lastUpdate = null;
  }
  if (newFirstCapturedUpdate === null) {
  queue.lastCapturedUpdate = null;
  } else {
  workInProgress.effectTag |= Callback;
  }
  // 没有剩下来的 update，表示全部计算完了
  if (newFirstUpdate === null && newFirstCapturedUpdate === null) {
  // We processed every update, without skipping. That means the new base
  // state is the same as the result state.
  // 重新赋值 newBaseState 为最后 计算的state
  newBaseState = resultState;
  }
  
  // 赋值 baseState 为计算后的 state
  queue.baseState = newBaseState;
  queue.firstUpdate = newFirstUpdate;
  queue.firstCapturedUpdate = newFirstCapturedUpdate;
  
  // Set the remaining expiration time to be whatever is remaining in the queue.
  // This should be fine because the only two other things that contribute to
  // expiration time are props and context. We're already in the middle of the
  // begin phase by the time we start processing the queue, so we've already
  // dealt with the props. Context in components that specify
  // shouldComponentUpdate is tricky; but we'll have to account for
  // that regardless.
  // 需要执行的更新已经更新完了，剩下的更新应该是剩下的 updateQueue 里面的 update 中最高优先级的那个 expirationTime
  workInProgress.expirationTime = newExpirationTime;
  // 更新 state
  workInProgress.memoizedState = resultState;
  
  if (__DEV__) {
  currentlyProcessingQueue = null;
  }
  }

getStateFromUpdate 根据 setState 计算返回新的state

function getStateFromUpdate<State>(
  workInProgress: Fiber,
  queue: UpdateQueue<State>,
  update: Update<State>,
  prevState: State,
  nextProps: any,
  instance: any,
): any {
  switch (update.tag) {
    case ReplaceState: {
      // ...
    }
    case CaptureUpdate: {
      // ...
    }
    // Intentional fallthrough
    case UpdateState: {
      const payload = update.payload;
      let partialState;
      if (typeof payload === 'function') {
        // Updater function
        if (__DEV__) {
          // ...
        }
        // 函数更新 state
        partialState = payload.call(instance, prevState, nextProps);
      } else {
        // 普通对象
        // Partial state object
        partialState = payload;
      }
      if (partialState === null || partialState === undefined) {
        // Null and undefined are treated as no-ops.
        return prevState;
      }
      // Merge the partial state and the previous state.
      // 最后合并原 state 和计算出的新 state
      return Object.assign({}, prevState, partialState);
    }
    // 
    case ForceUpdate: {
      hasForceUpdate = true;
      return prevState;
    }
  }
  return prevState;
}

applyDerivedStateFromProps 执行新声明周期钩子

export function applyDerivedStateFromProps(
  workInProgress: Fiber,
  ctor: any,
  getDerivedStateFromProps: (props: any, state: any) => any,
  nextProps: any,
) {
  // 这里的 state 是更新过后的state
  const prevState = workInProgress.memoizedState;

  // 传入的 state 是经过 processUpdateQueue 计算后的state 
  const partialState = getDerivedStateFromProps(nextProps, prevState);

  // Merge the partial state and the previous state.
  const memoizedState =
    partialState === null || partialState === undefined
      ? prevState
      : Object.assign({}, prevState, partialState);
  // 更新state
  workInProgress.memoizedState = memoizedState;

  // Once the update queue is empty, persist the derived state onto the
  // base state.
  const updateQueue = workInProgress.updateQueue;
  // queue 不为null 且 不渲染的时候，才更新 baseState 
  if (updateQueue !== null && workInProgress.expirationTime === NoWork) {
    updateQueue.baseState = memoizedState;
  }
}

resumeMountClassInstance 复用 instance 的情况

function resumeMountClassInstance(
  workInProgress: Fiber,
  ctor: any,
  newProps: any,
  renderExpirationTime: ExpirationTime,
): boolean {
  const instance = workInProgress.stateNode;

  const oldProps = workInProgress.memoizedProps;
  instance.props = oldProps;

  const getDerivedStateFromProps = ctor.getDerivedStateFromProps;
  const hasNewLifecycles =
    typeof getDerivedStateFromProps === 'function' ||
    typeof instance.getSnapshotBeforeUpdate === 'function';

  // Note: During these life-cycles, instance.props/instance.state are what
  // ever the previously attempted to render - not the "current". However,
  // during componentDidUpdate we pass the "current" props.

  // In order to support react-lifecycles-compat polyfilled components,
  // Unsafe lifecycles should not be invoked for components using the new APIs.
  // 有新 API则不执行 componentWillReceiveProps
  if (
    !hasNewLifecycles &&
    (typeof instance.UNSAFE_componentWillReceiveProps === 'function' ||
      typeof instance.componentWillReceiveProps === 'function')
  ) {
    if (oldProps !== newProps || oldContext !== nextContext) {
      callComponentWillReceiveProps(
        workInProgress,
        instance,
        newProps,
        nextContext,
      );
    }
  }

  // => hasForceUpdate = false
  resetHasForceUpdateBeforeProcessing();

  const oldState = workInProgress.memoizedState;
  let newState = (instance.state = oldState);
  let updateQueue = workInProgress.updateQueue;
  if (updateQueue !== null) {
    processUpdateQueue(
      workInProgress,
      updateQueue,
      newProps,
      instance,
      renderExpirationTime,
    );
    newState = workInProgress.memoizedState;
  }
  if (
    // 新老 props 和 state 都相同
    oldProps === newProps &&
    oldState === newState &&
    // 没有 context 变化
    !hasContextChanged() &&
    // 如果 hasForceUpdate 为 false
    !checkHasForceUpdateAfterProcessing()
  ) {
    // If an update was already in progress, we should schedule an Update
    // effect even though we're bailing out, so that cWU/cDU are called.
    // 如果有 didMount 则标记 effect 为 update
    if (typeof instance.componentDidMount === 'function') {
      workInProgress.effectTag |= Update;
    }
    // return 赋值给了 shouldUpdate, 组件是不需要更新的
    return false;
  }

  // 执行新API
  if (typeof getDerivedStateFromProps === 'function') {
    applyDerivedStateFromProps(
      workInProgress,
      ctor,
      getDerivedStateFromProps,
      newProps,
    );
    newState = workInProgress.memoizedState;
  }

  const shouldUpdate =
    // 如果 hasForceUpdate 为 true
    checkHasForceUpdateAfterProcessing() ||
    // 或者 根据 shouldComponentUpdate 的返回值 或者 pureComponent的情况则调用 shallowEqual 的返回值
    // 默认返回 true
    checkShouldComponentUpdate(
      workInProgress,
      ctor,
      oldProps,
      newProps,
      oldState,
      newState,
      nextContext,
    );

  if (shouldUpdate) {
    // 需要更新组件
    // In order to support react-lifecycles-compat polyfilled components,
    // Unsafe lifecycles should not be invoked for components using the new APIs.
    // 没有使用新声明周期并有 willMount 则调用 willMount
    if (
      !hasNewLifecycles &&
      (typeof instance.UNSAFE_componentWillMount === 'function' ||
        typeof instance.componentWillMount === 'function')
    ) {
      startPhaseTimer(workInProgress, 'componentWillMount');
      if (typeof instance.componentWillMount === 'function') {
        instance.componentWillMount();
      }
      if (typeof instance.UNSAFE_componentWillMount === 'function') {
        instance.UNSAFE_componentWillMount();
      }
      stopPhaseTimer();
    }
    if (typeof instance.componentDidMount === 'function') {
      workInProgress.effectTag |= Update;
    }
    // 都需要标记 didMount ，中断的组件挂载仍然按首次挂载执行
  } else {
    // 不需要更新
    // If an update was already in progress, we should schedule an Update
    // effect even though we're bailing out, so that cWU/cDU are called.
    if (typeof instance.componentDidMount === 'function') {
      workInProgress.effectTag |= Update;
    }

    // If shouldComponentUpdate returned false, we should still update the
    // memoized state to indicate that this work can be reused.
    // 组件不需要更新，仍然更新 memoized 变量
    workInProgress.memoizedProps = newProps;
    workInProgress.memoizedState = newState;
  }

  // Update the existing instance's state, props, and context pointers even
  // if shouldComponentUpdate returns false.
  // instance 上的 state、props、context 始终要更新
  instance.props = newProps;
  instance.state = newState;
  instance.context = nextContext;

  return shouldUpdate;
}

checkShouldComponentUpdate

function checkShouldComponentUpdate(
  workInProgress,
  ctor,
  oldProps,
  newProps,
  oldState,
  newState,
  nextContext,
) {
  const instance = workInProgress.stateNode;
  // shouldComponentUpdate 来判断
  if (typeof instance.shouldComponentUpdate === 'function') {
    startPhaseTimer(workInProgress, 'shouldComponentUpdate');
    const shouldUpdate = instance.shouldComponentUpdate(
      newProps,
      newState,
      nextContext,
    );
    stopPhaseTimer();

    return shouldUpdate;
  }
  // 如果是pureComponent 则浅对比 props 和 state
  if (ctor.prototype && ctor.prototype.isPureReactComponent) {
    return (
      !shallowEqual(oldProps, newProps) || !shallowEqual(oldState, newState)
    );
  }

  return true;
}

// shallowEqual

const hasOwnProperty = Object.prototype.hasOwnProperty;

/**
 * inlined Object.is polyfill to avoid requiring consumers ship their own
 * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
 */
 // polyfill Object.is()
function is(x, y) {
  // SameValue algorithm
  if (x === y) {
    // Steps 1-5, 7-10
    // Steps 6.b-6.e: +0 != -0
    // Added the nonzero y check to make Flow happy, but it is redundant
    return x !== 0 || y !== 0 || 1 / x === 1 / y;
  } else {
    // Step 6.a: NaN == NaN
    return x !== x && y !== y;
  }
}

/**
 * Performs equality by iterating through keys on an object and returning false
 * when any key has values which are not strictly equal between the arguments.
 * Returns true when the values of all keys are strictly equal.
 */
function shallowEqual(objA: mixed, objB: mixed): boolean {
  if (is(objA, objB)) {
    return true;
  }

  if (
    typeof objA !== 'object' ||
    objA === null ||
    typeof objB !== 'object' ||
    objB === null
  ) {
    return false;
  }

  const keysA = Object.keys(objA);
  const keysB = Object.keys(objB);

  if (keysA.length !== keysB.length) {
    return false;
  }

  // Test for A's keys different from B.
  for (let i = 0; i < keysA.length; i++) {
    if (
      !hasOwnProperty.call(objB, keysA[i]) ||
      !is(objA[keysA[i]], objB[keysA[i]])
    ) {
      return false;
    }
  }

  return true;
}

updateClassInstance 更新渲染

• 过程和 resumeMountClassInstance 相似，不同的是执行的声明周期是 willUpdate，标记 didUpdate 和 getSnapshotBeforeUpdate

if (shouldUpdate) {
    // In order to support react-lifecycles-compat polyfilled components,
    // Unsafe lifecycles should not be invoked for components using the new APIs.
    // 未使用新API ，执行 componentWillUpdate
    if (
      !hasNewLifecycles &&
      (typeof instance.UNSAFE_componentWillUpdate === 'function' ||
        typeof instance.componentWillUpdate === 'function')
    ) {
      startPhaseTimer(workInProgress, 'componentWillUpdate');
      if (typeof instance.componentWillUpdate === 'function') {
        instance.componentWillUpdate(newProps, newState, nextContext);
      }
      if (typeof instance.UNSAFE_componentWillUpdate === 'function') {
        instance.UNSAFE_componentWillUpdate(newProps, newState, nextContext);
      }
      stopPhaseTimer();
    }
    // 标记 didUpdate
    if (typeof instance.componentDidUpdate === 'function') {
      workInProgress.effectTag |= Update;
    }
    // 标记 getSnapshotBeforeUpdate
    if (typeof instance.getSnapshotBeforeUpdate === 'function') {
      workInProgress.effectTag |= Snapshot;
    }
  } else {
    // If an update was already in progress, we should schedule an Update
    // effect even though we're bailing out, so that cWU/cDU are called.
    if (typeof instance.componentDidUpdate === 'function') {
      if (
        oldProps !== current.memoizedProps ||
        oldState !== current.memoizedState
      ) {
        workInProgress.effectTag |= Update;
      }
    }
    if (typeof instance.getSnapshotBeforeUpdate === 'function') {
      if (
        oldProps !== current.memoizedProps ||
        oldState !== current.memoizedState
      ) {
        workInProgress.effectTag |= Snapshot;
      }
    }

    // If shouldComponentUpdate returned false, we should still update the
    // memoized props/state to indicate that this work can be reused.
    workInProgress.memoizedProps = newProps;
    workInProgress.memoizedState = newState;
  }

finishClassComponent 完成 class 组件更新

• 不需要更新且没错误捕获则跳过更新
• 组件存在 getDerivedStateFromError 方法，直接执行 instance.render() 获得最新的 nextChildren, 否则 nextChildren 为 null，getDerivedStateFromError 方法可以在出错后立即生成 state

function finishClassComponent(
  current: Fiber | null,
  workInProgress: Fiber,
  Component: any,
  shouldUpdate: boolean,
  hasContext: boolean,
  renderExpirationTime: ExpirationTime,
) {
  // 标记 ref，仅有在 classComponent 和 HostComponent （原生标签）中标记ref，即只能在这两种类型上 使用 ref
  // Refs should update even if shouldComponentUpdate returns false
  markRef(current, workInProgress);

  const didCaptureError = (workInProgress.effectTag & DidCapture) !== NoEffect;

  // 不需要更新且没有错误则跳过更新
  if (!shouldUpdate && !didCaptureError) {
    // Context providers should defer to sCU for rendering
    if (hasContext) {
      invalidateContextProvider(workInProgress, Component, false);
    }
    // 跳过更新
    return bailoutOnAlreadyFinishedWork(
      current,
      workInProgress,
      renderExpirationTime,
    );
  }

  const instance = workInProgress.stateNode;

  // Rerender
  ReactCurrentOwner.current = workInProgress;
  let nextChildren;
  if (
    didCaptureError &&
    typeof Component.getDerivedStateFromError !== 'function'
  ) {
    // getDerivedStateFromError 方法可以在出错后立即生成 state，防止出错后没有 instance 和 ref 的错误
    // 而 componentDidCatch 是通过 setState 的，要在下次更新才生成新的 state
    // 有错误，且没有 getDerivedStateFromError 方法 则直接渲染空
    // If we captured an error, but getDerivedStateFrom catch is not defined,
    // unmount all the children. componentDidCatch will schedule an update to
    // re-render a fallback. This is temporary until we migrate everyone to
    // the new API.
    // TODO: Warn in a future release.
    nextChildren = null;

    if (enableProfilerTimer) {
      stopProfilerTimerIfRunning(workInProgress);
    }
  } else {
    // 没错误
    // 或者有 getDerivedStateFromError 方法，此方法已经更新了最新的state
    // 通过instance.render 获取最新children
    if (__DEV__) {
      ReactCurrentFiber.setCurrentPhase('render');
      nextChildren = instance.render();
      if (
        debugRenderPhaseSideEffects ||
        (debugRenderPhaseSideEffectsForStrictMode &&
          workInProgress.mode & StrictMode)
      ) {
        instance.render();
      }
      ReactCurrentFiber.setCurrentPhase(null);
    } else {
      nextChildren = instance.render();
    }
  }

  // React DevTools reads this flag.
  workInProgress.effectTag |= PerformedWork;
  // 非首次渲染且有错误
  if (current !== null && didCaptureError) {
    // If we're recovering from an error, reconcile without reusing any of
    // the existing children. Conceptually, the normal children and the children
    // that are shown on error are two different sets, so we shouldn't reuse
    // normal children even if their identities match.
    // 强制的重新计算 child 并 reconcileChildFibers 调和
    forceUnmountCurrentAndReconcile(
      current,
      workInProgress,
      nextChildren,
      renderExpirationTime,
    );
  } else {
    // 没错误或者首次渲染，直接调和
    reconcileChildren(
      current,
      workInProgress,
      nextChildren,
      renderExpirationTime,
    );
  }

  // Memoize state using the values we just used to render.
  // TODO: Restructure so we never read values from the instance.
  workInProgress.memoizedState = instance.state;

  // The context might have changed so we need to recalculate it.
  if (hasContext) {
    invalidateContextProvider(workInProgress, Component, true);
  }
  // 返回 child -> performUnitOfWork -> workLoop 循环
  return workInProgress.child;
}