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,
      );
    }

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,
  );
}

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;
  }
}

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;
  }
}

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;
  }
}

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;
}

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;
  }
}

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;
}

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;
}

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;
  }

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;
}

// requestWork
function requestWork(root: FiberRoot, expirationTime: ExpirationTime) {
  // ...
  if (expirationTime === Sync) { // 同步的调用 js 代码
    performSyncWork();
  } else { // 异步调度 独立的 react 模块包，利用浏览器有空闲的时候进行执行，设置 deadline 在此之前执行
    scheduleCallbackWithExpirationTime(root, expirationTime); // 在 secheduler 文件夹下的单独模块
  }
}


function scheduleCallbackWithExpirationTime(
  root: FiberRoot,
  expirationTime: ExpirationTime,
) {
  // callbackExpirationTime 是上一次调度的任务优先级
  if (callbackExpirationTime !== NoWork) {
    // A callback is already scheduled. Check its expiration time (timeout).
    // 当前优先级比之前正在执行的优先级低就停止
    if (expirationTime > callbackExpirationTime) {
      // Existing callback has sufficient timeout. Exit.
      return;
    } else {
      //  当前优先级更高 则取消原来那个
      if (callbackID !== null) {
        // Existing callback has insufficient timeout. Cancel and schedule a
        // new one.
        cancelDeferredCallback(callbackID);
      }
    }
    // The request callback timer is already running. Don't start a new one.
  } else {
    startRequestCallbackTimer();
  }

  // 保存当前任务优先级
  callbackExpirationTime = expirationTime;
  // originalStartTimeMs 是 react 加载的最初时间, 记录当前时间差
  const currentMs = now() - originalStartTimeMs;
  // expirationTime（到期时间为将来的某个时间）转化成 ms
  const expirationTimeMs = expirationTimeToMs(expirationTime);
  // 当前任务的过期时间， 到期时间减去当前任务开始调度的时间差，则为过期时间，如果timeout < 0 ，则表示任务过期，需要强制更新
  const timeout = expirationTimeMs - currentMs;
  // 依赖 Scheduler 模块返回的id用来cancel
  callbackID = scheduleDeferredCallback(performAsyncWork, {timeout});
}

// ReactDOMHostConfig.js

export {
  unstable_now as now,
  unstable_scheduleCallback as scheduleDeferredCallback,
  unstable_cancelCallback as cancelDeferredCallback,
} from 'scheduler';

// callback -> performAsyncWork, deprecated_options -> { timeout }
function unstable_scheduleCallback(callback, deprecated_options) {
  // 即 Date.now()
  var startTime =
    currentEventStartTime !== -1 ? currentEventStartTime : getCurrentTime();

  var expirationTime;
  if (
    typeof deprecated_options === 'object' &&
    deprecated_options !== null &&
    typeof deprecated_options.timeout === 'number'
  ) {
    // expirationTime 的逻辑将来可能全部移入到 Scheduler 包中， 目前只会进入这个判断
    // FIXME: Remove this branch once we lift expiration times out of React.
    expirationTime = startTime + deprecated_options.timeout;
  } else {
    switch (currentPriorityLevel) {
      case ImmediatePriority:
        expirationTime = startTime + IMMEDIATE_PRIORITY_TIMEOUT;
        break;
      case UserBlockingPriority:
        expirationTime = startTime + USER_BLOCKING_PRIORITY;
        break;
      case IdlePriority:
        expirationTime = startTime + IDLE_PRIORITY;
        break;
      case NormalPriority:
      default:
        expirationTime = startTime + NORMAL_PRIORITY_TIMEOUT;
    }
  }

  var newNode = {
    // performAsyncWork
    callback,
    // 目前用不到
    priorityLevel: currentPriorityLevel,
    // timeout + now()
    expirationTime,
    // 存储链表结构
    next: null,
    previous: null,
  };

  // firstCallbackNode 是用来维护的双向链表的头部
  if (firstCallbackNode === null) {
    // This is the first callback in the list.
    firstCallbackNode = newNode.next = newNode.previous = newNode;
    // firstCallbackNode 改变需要调用  进入调度过程
    ensureHostCallbackIsScheduled();
  } else {
    // 如果有一个/多个 node 存在链表结构里
    // next表示下一个要执行的node
    var next = null;
    // 原来的
    var node = firstCallbackNode;
    do {
      // 根据 expirationTime 排序，把优先级高的放在前面，每次都跟 firstCallbackNode 比较
      if (node.expirationTime > expirationTime) {
        // The new callback expires before this one.
        // 表示新的node的优先级高于原来的，将原来的（firstCallbackNode）赋值给 next， 退出循环
        next = node;
        break;
      }
      node = node.next;
    } while (node !== firstCallbackNode);

    // 如果 nex t为null，说明 node.expirationTime < expirationTime, 即新的node的优先级是最小的
    if (next === null) {
      // No callback with a later expiration was found, which means the new
      // callback has the latest expiration in the list.
      // next为原来的node
      next = firstCallbackNode;
    // 表示新的node的优先级 高于原来node的优先级，
    } else if (next === firstCallbackNode) {
      // The new callback has the earliest expiration in the entire list.
      // 重新将 firstCallbackNode 赋值为新的node，即保证firstCallbackNode 为优先级最高的那个node
      firstCallbackNode = newNode;
      // firstCallbackNode 改变需要调用  进入调度过程
      ensureHostCallbackIsScheduled();
    }

    // 原来 指向firstCallBakcNode.previous 和 指向firstCallBakcNode.next 都指向自己
    // previous、next 都是指向firstCallBakcNode
    var previous = next.previous;
    // 现在将 都是指向firstCallBakcNode.previous 和 都是指向firstCallBakcNode.next 指向 newNode
    previous.next = next.previous = newNode;

    // 将 newNode.previous 和newNode.next 指向firstCallBakcNode， 形成环状双向链表结构
    newNode.next = next;
    newNode.previous = previous;

  }

  return newNode;
}

function ensureHostCallbackIsScheduled() {
  // 表示已经有一个 callbackNode 在调用了
  if (isExecutingCallback) {
    // Don't schedule work yet; wait until the next time we yield.
    return;
  }
  // Schedule the host callback using the earliest expiration in the list.
  var expirationTime = firstCallbackNode.expirationTime;
  // 判断这个 hostCallback 有没有进入调度
  if (!isHostCallbackScheduled) {
    isHostCallbackScheduled = true;
  } else {
    // Cancel the existing host callback.
    cancelHostCallback();
  }
  requestHostCallback(flushWork, expirationTime);
}

// callback 为 flushWork 函数
requestHostCallback = function(callback, absoluteTimeout) {
    scheduledHostCallback = callback;
    timeoutTime = absoluteTimeout;
    // absoluteTimeout < 0 已经超时，直接强制执行
    if (isFlushingHostCallback || absoluteTimeout < 0) {
      // Don't wait for the next frame. Continue working ASAP, in a new event.
      window.postMessage(messageKey, '*');
      // isAnimationFrameScheduled = false 表示还没进入调度循环
    } else if (!isAnimationFrameScheduled) {
      // If rAF didn't already schedule one, we need to schedule a frame.
      // TODO: If this rAF doesn't materialize because the browser throttles, we
      // might want to still have setTimeout trigger rIC as a backup to ensure
      // that we keep performing work.
      isAnimationFrameScheduled = true;
      // 进入调度， 竞争调用 animationTick
      requestAnimationFrameWithTimeout(animationTick);
    }
  };

var ANIMATION_FRAME_TIMEOUT = 100;
var rAFID;
var rAFTimeoutID;
var requestAnimationFrameWithTimeout = function(callback) {
  // schedule rAF and also a setTimeout
  // requestAnimationFrame 执行则取消 setTimeout
  rAFID = localRequestAnimationFrame(function(timestamp) {
    // cancel the setTimeout
    localClearTimeout(rAFTimeoutID);
    callback(timestamp);
  });
  // 100ms 内 requestAnimationFrame 内的 callback 还未执行，则取消requestAnimationFrame，
  rAFTimeoutID = localSetTimeout(function() {
    // cancel the requestAnimationFrame
    localCancelAnimationFrame(rAFID);
    // 传入当前时间
    callback(getCurrentTime());
  }, ANIMATION_FRAME_TIMEOUT);
};

  var frameDeadline = 0;
  // We start out assuming that we run at 30fps but then the heuristic tracking
  // will adjust this value to a faster fps if we get more frequent animation
  // frames.
  // 假设以 30fps 运行，然后进行跟踪，如果获得更频繁的帧，则会将此值调整为更快的fps
  var previousFrameTime = 33;
  var activeFrameTime = 33;

var animationTick = function(rafTime) {
    if (scheduledHostCallback !== null) {
      // 立马请求下一帧调用自己，不停的调用，队列里有很多 callback
      requestAnimationFrameWithTimeout(animationTick);
    } else {
      // No pending work. Exit.
      // 没有方法要被调度，返回
      isAnimationFrameScheduled = false;
      return;
    }
    //  rafTime 是调用的当前时间，frameDeadline 为0，activeFrameTime 为 33，即保持浏览器一秒 30帧，每一帧的执行一帧完整的时间
    // 用来计算下一帧可以执行的时间是多少，即nextFrameTime
    var nextFrameTime = rafTime - frameDeadline + activeFrameTime;
    // 下一个方法调用进来 下一帧重新计算nextFrameTime，rafTime - frameDeadline 如果小于 0 ，说明浏览器的刷新频率要大于 30hz，帧时间是要小于 33ms的
    // 如果连续两次帧的调用计算出来的时间是小于 33ms，就设置帧时间变小，
    // 主要针对不同平台的刷新频率的问题，比如 vr 120帧，根据平台的刷新频率设置 activeFrameTime， 1000 / 120 -> 8
    if (
      nextFrameTime < activeFrameTime &&
      previousFrameTime < activeFrameTime
    ) {
      if (nextFrameTime < 8) {
        // Defensive coding. We don't support higher frame rates than 120hz.
        // If the calculated frame time gets lower than 8, it is probably a bug.
        // 每帧最小运行时间
        nextFrameTime = 8;
      }
      // If one frame goes long, then the next one can be short to catch up.
      // If two frames are short in a row, then that's an indication that we
      // actually have a higher frame rate than what we're currently optimizing.
      // We adjust our heuristic dynamically accordingly. For example, if we're
      // running on 120hz display or 90hz VR display.
      // Take the max of the two in case one of them was an anomaly due to
      // missed frame deadlines.
      // 通过前后帧时间的判断，来判断平台的刷新频率，然后更新 activeFrameTime， 来达到减少React运行占用时间的目的
      activeFrameTime =
        nextFrameTime < previousFrameTime ? previousFrameTime : nextFrameTime;
    } else {
      // 前一帧运行时间和下一帧运行时间相同
      previousFrameTime = nextFrameTime;
    }
    // 第一个 frameDeadline
    frameDeadline = rafTime + activeFrameTime;
    // isMessageEventScheduled 会在 cancelHostCallback 和 idleTick 里都会设置为 false
    if (!isMessageEventScheduled) {
      isMessageEventScheduled = true;
      // 通过 requestAnimationFrame 调用完 callback 后立马会进入浏览器动画更新的设定，往任务队列里插入react任务来模拟 requestIdleCallback 方法
      // postMessage属于 macrotask，等待浏览器执行完再执行队列里的任务，即使每一帧的时间为33ms，但等到 message 接收时，实际留给react的时间没有 33ms
      // 给任务队列插入 react 任务，等浏览器执行完自己的任务再执行这里队列里的
      window.postMessage(messageKey, '*');
    }
  };

// 接受 react 任务
window.addEventListener('message', idleTick, false);

var idleTick = function(event) {
    // 判断 key 和 判断 message 源
    if (event.source !== window || event.data !== messageKey) {
      return;
    }

    isMessageEventScheduled = false;

    // 先赋值 再重置，
    // scheduledHostCallback -> flushWork
    // timeoutTime -> firstCallbackNode.expirationTime 到期时间
    var prevScheduledCallback = scheduledHostCallback;
    var prevTimeoutTime = timeoutTime;
    scheduledHostCallback = null;
    timeoutTime = -1;

    var currentTime = getCurrentTime();

    var didTimeout = false;
    // 表示浏览器动画或用户反馈操作超过 33ms, 把这一帧的时间用完了，react 没有时间去更新了
    if (frameDeadline - currentTime <= 0) {
      // There's no time left in this idle period. Check if the callback has
      // a timeout and whether it's been exceeded.
      // 表示当前任务也已经过期
      if (prevTimeoutTime !== -1 && prevTimeoutTime <= currentTime) {
        // Exceeded the timeout. Invoke the callback even though there's no
        // time left.
        // 标识已过期，准备强制更新
        didTimeout = true;
      } else {
        // No timeout.
        // 没有过期，且 isAnimationFrameScheduled 为 false 的情况，则直接调用 requestAnimationFrameWithTimeout
        // 在 animationTick 函数中 判断 scheduledHostCallback === null 时才会赋值其为false，
        // 而 scheduledHostCallback === null 只有在 cancelHostCallback 函数 和 idleTick 函数中执行
        if (!isAnimationFrameScheduled) {
          // Schedule another animation callback so we retry later.
          // 调度另一个动画回调，以便我们稍后重试
          isAnimationFrameScheduled = true;
          requestAnimationFrameWithTimeout(animationTick);
        }
        // Exit without invoking the callback.
        // 没有过期，则退出而不执行callback，将scheduledHostCallback、tiemoutTime 恢复原来值，直接return
        scheduledHostCallback = prevScheduledCallback;
        timeoutTime = prevTimeoutTime;
        return;
      }
    }

    if (prevScheduledCallback !== null) {
      // 正在调用这个 callback
      isFlushingHostCallback = true;
      try {
        // 根据 didTimeout 判断 是否强制执行更新
        prevScheduledCallback(didTimeout);
      } finally {
        isFlushingHostCallback = false;
      }
    }
  };

var deadlineObject = {
  timeRemaining,
  didTimeout: false,
};
// 默认 hasNativePerformanceNow = true
var timeRemaining = function() {
    // ...
    // We assume that if we have a performance timer that the rAF callback
    // gets a performance timer value. Not sure if this is always true.
    // frameDeadline - now() > 0  这一帧的渲染剩余多少时间， 在 shouldYield 中使用并判断
    // 模拟传给 requestIdleCallback方法的回调函数的 IdleDeadline 参数 https://developer.mozilla.org/zh-CN/docs/Web/API/IdleDeadline 表示当前闲置周期的预估剩余毫秒数

    var remaining = getFrameDeadline() - performance.now();
    return remaining > 0 ? remaining : 0;
}

// didTimout -> firstCallbackNode 是否已经超时的判断
function flushWork(didTimeout) {
  // 开始调用 callback -> ensureHostCallbackIsScheduled 函数会直接return
  isExecutingCallback = true;
  deadlineObject.didTimeout = didTimeout;
  try {
    // firstCallbackNode的任务已经过期
    if (didTimeout) {
      // Flush all the expired callbacks without yielding.
      // 循环
      while (firstCallbackNode !== null) {
        // Read the current time. Flush all the callbacks that expire at or
        // earlier than that time. Then read the current time again and repeat.
        // This optimizes for as few performance.now calls as possible.
        var currentTime = getCurrentTime();
        // 第一个 expirationTime 肯定小于 currentTime, 为过期任务
        if (firstCallbackNode.expirationTime <= currentTime) {
          // 循环执行callback链表，直到第一个没有过期的任务为止， 已经过期的任务都强制输出
          do {
            // flushFirstCallback 会将 firstCallbackNode.next 赋值给 firstCallbackNode
            flushFirstCallback();
          } while (
            // firstCallbackNode 变成下一个，循环判断链表任务是否过期
            firstCallbackNode !== null &&
            firstCallbackNode.expirationTime <= currentTime
          );
          // 已经过期的任务都输出了，下一次判断if (firstCallbackNode.expirationTime <= currentTime) 为false，直接break
          continue;
        }
        break;
      }
    } else {
      // Keep flushing callbacks until we run out of time in the frame.
      // 任务没有过期， 继续刷新回调，直到帧中的时间不足为止。
      if (firstCallbackNode !== null) {
        do {
          flushFirstCallback();
        } while (
          // 帧还有时间空闲（还有剩余时间）才执行 callback
          firstCallbackNode !== null &&
          getFrameDeadline() - getCurrentTime() > 0
        );
      }
    }
  } finally {
    isExecutingCallback = false;
    if (firstCallbackNode !== null) {
      // There's still work remaining. Request another callback.
      // 还剩有 firsrCallbackNode 时，调用ensureHostCallbackIsScheduled ，此时 isHostCallbackScheduled 为 true，则会执行 cancelHostCallback 重置所有的调度常量，将 scheduledHostCallback重置为null，避免在 animationTick 中将老的 callback 重复执行一边
      ensureHostCallbackIsScheduled();
    } else {
      isHostCallbackScheduled = false;
    }
    // Before exiting, flush all the immediate work that was scheduled.
    // firstCallbackNode.priorityLevel === currentPriorityLevel 这个函数不会执行
    flushImmediateWork();
  }
}

function flushFirstCallback() {
  var flushedNode = firstCallbackNode;

  // Remove the node from the list before calling the callback. That way the
  // list is in a consistent state even if the callback throws.
  var next = firstCallbackNode.next;
  // 表示只有一个 callbackNode
  if (firstCallbackNode === next) {
    // This is the last callback in the list.
    firstCallbackNode = null;
    next = null;
  } else {
    // 替换 firstCallbackNode 的操作
    var lastCallbackNode = firstCallbackNode.previous;
    // 将 firstCallbackNode 指向 firstCallbackNode.next
    firstCallbackNode = lastCallbackNode.next = next;
    next.previous = lastCallbackNode;
  }

  // 清空老 firstCallbackNode 的 next 和 previous
  flushedNode.next = flushedNode.previous = null;

  // Now it's safe to call the callback.
  var callback = flushedNode.callback;
  var expirationTime = flushedNode.expirationTime;
  var priorityLevel = flushedNode.priorityLevel;
  var previousPriorityLevel = currentPriorityLevel;
  var previousExpirationTime = currentExpirationTime;
  currentPriorityLevel = priorityLevel;
  currentExpirationTime = expirationTime;
  var continuationCallback;
  try {
    // 执行 callback
    continuationCallback = callback(deadlineObject);
  } finally {
    currentPriorityLevel = previousPriorityLevel;
    currentExpirationTime = previousExpirationTime;
  }

  // performAsyncWork 没有返回则下面不会执行
   if (typeof continuationCallback === 'function') {
     // ....
   }
}

// ReactHooks.js

import ReactCurrentOwner from './ReactCurrentOwner';

function resolveDispatcher() {
  const dispatcher = ReactCurrentOwner.currentDispatcher;
  invariant(
    dispatcher !== null,
    'Hooks can only be called inside the body of a function component.',
  );
  return dispatcher;
}

// ...
function useState<S>(initialState: (() => S) | S) {
  const dispatcher = resolveDispatcher();
  return dispatcher.useState(initialState);
}

function useReducer<S, A>(
  reducer: (S, A) => S,
  initialState: S,
  initialAction: A | void | null,
) {
  const dispatcher = resolveDispatcher();
  return dispatcher.useReducer(reducer, initialState, initialAction);
}

// ...

// ReactFiberScheduler.js

function renderRoot(root: FiberRoot, isYieldy: boolean): void {
  
  flushPassiveEffects();

  isWorking = true;
  if (enableHooks) {
    ReactCurrentOwner.currentDispatcher = Dispatcher;
  } else {
    ReactCurrentOwner.currentDispatcher = DispatcherWithoutHooks;
  }
  // ....

  // ...
  // We're done performing work. Time to clean up.
  isWorking = false;
  ReactCurrentOwner.currentDispatcher = null;
  // ...
}

function updateFunctionComponent(
 current,
 workInProgress,
 Component,
 nextProps: any,
 renderExpirationTime,
) {
 const unmaskedContext = getUnmaskedContext(workInProgress, Component, true);
 const context = getMaskedContext(workInProgress, unmaskedContext);

 let nextChildren;
 prepareToReadContext(workInProgress, renderExpirationTime);
 // hooks 方式写的组件是可以读取 context 的，且可以读取多个 context 的，即为什么 prepareToReadContext 会在 fiber 节点上使用链表方式 currentlyRenderingFiber.firstContextDependency = lastContextDependency = contextItem; 去记录 context的原因
 prepareToUseHooks(current, workInProgress, renderExpirationTime);
 if (__DEV__) {
   ReactCurrentOwner.current = workInProgress;
   setCurrentPhase('render');
   nextChildren = Component(nextProps, context);
   setCurrentPhase(null);
 } else {
   nextChildren = Component(nextProps, context);
 }
 // 
 nextChildren = finishHooks(Component, nextProps, nextChildren, context);

 // React DevTools reads this flag.
 workInProgress.effectTag |= PerformedWork;
 reconcileChildren(
   current,
   workInProgress,
   nextChildren,
   renderExpirationTime,
 );
 return workInProgress.child;
}

function prepareToUseHooks(
  current: Fiber | null,
  workInProgress: Fiber,
  nextRenderExpirationTime: ExpirationTime,
): void {
  if (!enableHooks) {
    return;
  }
  // 当前更新的优先级
  renderExpirationTime = nextRenderExpirationTime;
  // 当前更新的 fiber 
  currentlyRenderingFiber = workInProgress;
  // 非首次渲染，memoizedState 记录的是 functionComponent当中第一个 hooks api 对应的 hook 对象
  firstCurrentHook = current !== null ? current.memoizedState : null;

}

function finishHooks(
  Component: any,
  props: any,
  children: any,
  refOrContext: any,
): any {
  if (!enableHooks) {
    return children;
  }

  // This must be called after every function component to prevent hooks from
  // being used in classes.

  // 如果是重复渲染的情况，清空全局变量 currentHook workInProgressHook，并计数 numberOfReRenders 渲染次数，在 dispatchAction 会 判断次数如果大于 RE_RENDER_LIMIT 抛出错误
  // 再执行一次 Component(props, refOrContext); 将 重复渲染在一次 更新中执行掉
  while (didScheduleRenderPhaseUpdate) {
    // Updates were scheduled during the render phase. They are stored in
    // the `renderPhaseUpdates` map. Call the component again, reusing the
    // work-in-progress hooks and applying the additional updates on top. Keep
    // restarting until no more updates are scheduled.
    didScheduleRenderPhaseUpdate = false;
    numberOfReRenders += 1;

    // Start over from the beginning of the list
    currentHook = null;
    workInProgressHook = null;
    componentUpdateQueue = null;
    
    children = Component(props, refOrContext);
  }
  renderPhaseUpdates = null;
  numberOfReRenders = 0;

  // 更新中的 fiber 对象
  const renderedWork: Fiber = (currentlyRenderingFiber: any);
  // firstWorkInProgressHook 是 functionComponent 每一个 hooks 对应的 hook 对象。
  renderedWork.memoizedState = firstWorkInProgressHook;
  renderedWork.expirationTime = remainingExpirationTime;
 // 对于useEffect 或者 useLayoutEffect 生成的 effect 链 
  renderedWork.updateQueue = (componentUpdateQueue: any);

  const didRenderTooFewHooks =
    currentHook !== null && currentHook.next !== null;

  renderExpirationTime = NoWork;
  currentlyRenderingFiber = null;

  firstCurrentHook = null;
  currentHook = null;
  firstWorkInProgressHook = null;
  workInProgressHook = null;

  remainingExpirationTime = NoWork;
  componentUpdateQueue = null;

  // Always set during createWorkInProgress
  // isReRender = false;

  // These were reset above
  // didScheduleRenderPhaseUpdate = false;
  // renderPhaseUpdates = null;
  // numberOfReRenders = 0;

  return children;
}

function useState<S>(
  initialState: (() => S) | S,
): [S, Dispatch<BasicStateAction<S>>] {
  return useReducer(
    basicStateReducer,
    // useReducer has a special case to support lazy useState initializers
    (initialState: any),
  );
}

function basicStateReducer<S>(state: S, action: BasicStateAction<S>): S {
  return typeof action === 'function' ? action(state) : action;
}

function useReducer<S, A>(
  reducer: (S, A) => S,
  initialState: S,
  initialAction: A | void | null,
): [S, Dispatch<A>] {
  // 找到正在执行更新的 fiber 
  currentlyRenderingFiber = resolveCurrentlyRenderingFiber();
  // 创建一个 hook 对象， 并通过全局变量构建 hook 链表
  workInProgressHook = createWorkInProgressHook();
  // 非首次渲染， queue 不为空的情况
  let queue: UpdateQueue<A> | null = (workInProgressHook.queue: any);
  if (queue !== null) {
    // Already have a queue, so this is an update.
    // 重复渲染
    if (isReRender) {
      // This is a re-render. Apply the new render phase updates to the previous
      // work-in-progress hook.
      const dispatch: Dispatch<A> = (queue.dispatch: any);
      if (renderPhaseUpdates !== null) {
        // Render phase updates are stored in a map of queue -> linked list
        // renderPhaseUpdates 在 dispatchAction 被设置已 queque 为 key 的 map对象
        const firstRenderPhaseUpdate = renderPhaseUpdates.get(queue);
        if (firstRenderPhaseUpdate !== undefined) {
          // 取出来后 删掉 queue
          renderPhaseUpdates.delete(queue);
          let newState = workInProgressHook.memoizedState;
          let update = firstRenderPhaseUpdate;
          // 重复渲染的过程中 所有update 立马执行，不进行 expirationTime 的判断
          do {
            // Process this render phase update. We don't have to check the
            // priority because it will always be the same as the current
            // render's.
            const action = update.action;
            newState = reducer(newState, action);
            update = update.next;
          } while (update !== null);
          // 更新 memoizedState 
          workInProgressHook.memoizedState = newState;

          // Don't persist the state accumlated from the render phase updates to
          // the base state unless the queue is empty.
          // TODO: Not sure if this is the desired semantics, but it's what we
          // do for gDSFP. I can't remember why.
          if (workInProgressHook.baseUpdate === queue.last) {
            workInProgressHook.baseState = newState;
          }

          return [newState, dispatch];
        }
      }
      return [workInProgressHook.memoizedState, dispatch];
    }

    // The last update in the entire queue
    const last = queue.last;
    // The last update that is part of the base state.
    const baseUpdate = workInProgressHook.baseUpdate;

    // Find the first unprocessed update.
    let first;
    if (baseUpdate !== null) {
      if (last !== null) {
        // For the first update, the queue is a circular linked list where
        // `queue.last.next = queue.first`. Once the first update commits, and
        // the `baseUpdate` is no longer empty, we can unravel the list.
        last.next = null;
      }
      first = baseUpdate.next;
    } else {
      // 获取第一个  update 
      first = last !== null ? last.next : null;
    }
    if (first !== null) {
      // 原来的老的值
      let newState = workInProgressHook.baseState;
      let newBaseState = null;
      let newBaseUpdate = null;
      let prevUpdate = baseUpdate;
      let update = first;
      let didSkip = false;
      // 将 update 链循环执行完
      do {
        const updateExpirationTime = update.expirationTime;
        // hooks 之后的expirationTime的计算大小颠倒，越大表示优先级越高
        if (updateExpirationTime < renderExpirationTime) {
          // 更新优先级低
          // Priority is insufficient. Skip this update. If this is the first
          // skipped update, the previous update/state is the new base
          // update/state.
          // 只有有第一个在当前更新中更新优先级小于renderExpirationTime的（需要跳过的），那么 didSkip 会被设置为 true
          if (!didSkip) {
            didSkip = true;
            // 记录的是这个需要被跳过的 update 的前一个 update
            newBaseUpdate = prevUpdate;
            // 前一个 state  
            newBaseState = newState;
          }
          // Update the remaining priority in the queue.
          // remainingExpirationTime 初始值为 0
          // 只要有一个被跳过，则赋值为 跳过的update的对应的 expirationTime
          // 最后被设置为需要跳过的 update 里优先级最大的 expirationTime
          // 最后在 finishHooks  中会被设置为 fiber 对象的 expirationTime，即尚未执行更新的 update 里优先级最高的 expirationTime
          if (updateExpirationTime > remainingExpirationTime) {
            remainingExpirationTime = updateExpirationTime;
          }
        } else {
          // Process this update.
          const action = update.action;
          // 对于 useState 来说 action 就是更新后的值，而非 function
          // 即 newState = action 赋值新值
          newState = reducer(newState, action);
        }
        prevUpdate = update;
        update = update.next;
      } while (update !== null && update !== first);

      //  如果没有跳过的
      if (!didSkip) {
        // prevUpdate 为最后一个 update 即 last  
        newBaseUpdate = prevUpdate;
        newBaseState = newState;
      }
      // memoizedState 更新为新的 state
      workInProgressHook.memoizedState = newState;
      // 更新 baseUpdate, baseUpdate 记录的要么是 last 要么是需要跳过的update 的前一个 update 
      //  即在开头判断 baseUpdate  如果不为 null，则从 baseUpdate.next 开始更新
      workInProgressHook.baseUpdate = newBaseUpdate;
      workInProgressHook.baseState = newBaseState;
    }

    const dispatch: Dispatch<A> = (queue.dispatch: any);
    return [workInProgressHook.memoizedState, dispatch];
  }

  // 首次渲染， hook.queue 为空
  // There's no existing queue, so this is the initial render.
  if (reducer === basicStateReducer) {
    // useState 的情况  
    // Special case for `useState`.
    if (typeof initialState === 'function') {
      initialState = initialState();
    }
  } else if (initialAction !== undefined && initialAction !== null) {
    // useReducer 接受的第三个参数，用来计算 initialState
    initialState = reducer(initialState, initialAction);
  }
  // 将 initialState 挂载到 hook 对象上的 memoizedState 及 baseState，即使得 functionComponent 也有读取 state 的能力
  // hook 对象是更细粒度的 fiber
  workInProgressHook.memoizedState = workInProgressHook.baseState = initialState;
  // 挂载 queue，last 用来记录 dispatchAction 函数中生成的 update 链
  queue = workInProgressHook.queue = {
    last: null,
    dispatch: null,
  };
  // 生成dispatch函数 
  const dispatch: Dispatch<A> = (queue.dispatch = (dispatchAction.bind(
    null,
    currentlyRenderingFiber,
    queue,
  ): any));
  return [workInProgressHook.memoizedState, dispatch];
}

function createWorkInProgressHook(): Hook {
  if (workInProgressHook === null) {
    // This is the first hook in the list
    if (firstWorkInProgressHook === null) {
      // 都为 null，是非重复渲染的
      isReRender = false;
      currentHook = firstCurrentHook;
      if (currentHook === null) {
        // This is a newly mounted hook
        // 首次渲染，创建 hook 对象
        workInProgressHook = createHook();
      } else {
        // Clone the current hook.
        workInProgressHook = cloneHook(currentHook);
      }
      firstWorkInProgressHook = workInProgressHook;
    } else {
      // There's already a work-in-progress. Reuse it.
      // firstWorkInProgressHook 不为 null，说明 finishHooks 方法中的didScheduleRenderPhaseUpdate 为true 导致  while 循环在执行，即说明在重复渲染
      // 重复渲染的 
      isReRender = true;
      currentHook = firstCurrentHook;
      workInProgressHook = firstWorkInProgressHook;
    }
  } else {
    // 非首次渲染，并未执行过其他的 hooks api，也是非重复渲染的 
    if (workInProgressHook.next === null) {
      isReRender = false;
      let hook;
      if (currentHook === null) {
        // This is a newly mounted hook
        hook = createHook();
      } else {
        currentHook = currentHook.next;
        if (currentHook === null) {
          // This is a newly mounted hook
          hook = createHook();
        } else {
          // Clone the current hook.
          hook = cloneHook(currentHook);
        }
      }
      // 如果 next 为null 那么将 hook1.next = hook2 
      // Append to the end of the list
      workInProgressHook = workInProgressHook.next = hook;
    } else {
      // There's already a work-in-progress. Reuse it.
      // next 不为 null，复用原来的
      //  重复渲染
      isReRender = true;
      workInProgressHook = workInProgressHook.next;
      currentHook = currentHook !== null ? currentHook.next : null;
    }
  }
  return workInProgressHook;
}

// createHook

function createHook(): Hook {
  return {
    memoizedState: null,

    baseState: null,
    queue: null,
    baseUpdate: null,

    next: null,
  };
}

function dispatchAction<A>(fiber: Fiber, queue: UpdateQueue<A>, action: A) {
  // rerendered 次数 大于 RE_RENDER_LIMIT 则报错
  invariant(
    numberOfReRenders < RE_RENDER_LIMIT,
    'Too many re-renders. React limits the number of renders to prevent ' +
      'an infinite loop.',
  );

  const alternate = fiber.alternate;
  if (
    // 只有在 return 之前调用 setXXX, 即在更新当前 functionComponent 的中过程调用了 setState ，还未执行 finishHooks。 currentlyRenderingFiber => 当前 function 对应的 Fiber 
    fiber === currentlyRenderingFiber ||  
    (alternate !== null && alternate === currentlyRenderingFiber)
  ) {
    // This is a render phase update. Stash it in a lazily-created map of
    // queue -> linked list of updates. After this render pass, we'll restart
    // and apply the stashed updates on top of the work-in-progress hook.
    didScheduleRenderPhaseUpdate = true;
    const update: Update<A> = {
      expirationTime: renderExpirationTime,
      action,
      next: null,
    };
    // 将重复渲染的 update 收集， 在 useReducer 中会判断 renderPhaseUpdates 是否为空，并去 queue 对应的 update
    if (renderPhaseUpdates === null) {
      renderPhaseUpdates = new Map();
    }
    const firstRenderPhaseUpdate = renderPhaseUpdates.get(queue);
    if (firstRenderPhaseUpdate === undefined) {
      renderPhaseUpdates.set(queue, update);
    } else {
      // Append the update to the end of the list.
      let lastRenderPhaseUpdate = firstRenderPhaseUpdate;
      while (lastRenderPhaseUpdate.next !== null) {
        lastRenderPhaseUpdate = lastRenderPhaseUpdate.next;
      }
      // 重复渲染的 update 构建链表
      lastRenderPhaseUpdate.next = update;
    }
  } else {
    // 计算 expirationTime 
    const currentTime = requestCurrentTime();
    const expirationTime = computeExpirationForFiber(currentTime, fiber);
    // 创建 update 
    const update: Update<A> = {
      expirationTime,
      action,
      next: null,
    };
    // useEffect 相关
    flushPassiveEffects();
    // Append the update to the end of the list.
    // last 是 queue 用来标识最后一个 update 的
    // last.next 用来标识第一个 即 first update
    // 首次为 null， queue.last = update1, update1.next = update1
    const last = queue.last;
    if (last === null) {
      // This is the first update. Create a circular list.
      update.next = update;
    } else {
      // last 不为 null 即非首次
      // first -> update1
      const first = last.next;
      if (first !== null) {
        // Still circular.
        // 新的 update 即 update2.next = update1;
        update.next = first;
      }
      // update1.next = update2;
      last.next = update;
    }
    // last = update2;
    queue.last = update;
    // 加入调度
    scheduleWork(fiber, expirationTime);
  }
}

// ReactHookEffectTags
const NoEffect = /*             */ 0b00000000;   // => NoHookEffect
const UnmountSnapshot = /*      */ 0b00000010;
const UnmountMutation = /*      */ 0b00000100;
const UnmountMutation = /*      */ 0b00000100;
const MountMutation = /*        */ 0b00001000;
const UnmountLayout = /*        */ 0b00010000;
const MountLayout = /*          */ 0b00100000;
const MountPassive = /*         */ 0b01000000;
const UnmountPassive = /*       */ 0b10000000;

// ReactSideEffectTags 
const Update = /*                */ 0b000000000100;   // => updateEffect
const Passive = /*               */ 0b001000000000;   //  => passiveEffect


function useLayoutEffect(
  create: () => mixed,
  inputs: Array<mixed> | void | null,
): void {
  
  useEffectImpl(
    UpdateEffect, 
    UnmountMutation | MountLayout,  // => 0b00100100
    create, 
    inputs
  );
}

export function useEffect(
  create: () => mixed,
  inputs: Array<mixed> | void | null,
): void {
  useEffectImpl(
    UpdateEffect | PassiveEffect, // => 0b001000000100
    UnmountPassive | MountPassive, // => 0b11000000
    create,
    inputs,
  );
}

function useEffectImpl(fiberEffectTag, hookEffectTag, create, inputs): void {
  currentlyRenderingFiber = resolveCurrentlyRenderingFiber();
  workInProgressHook = createWorkInProgressHook();

  // inputs 为传入的依赖数组，如果为空，则是回调函数自身
  let nextInputs = inputs !== undefined && inputs !== null ? inputs : [create];
  let destroy = null;
  // currentHook !== null 非首次渲染
  if (currentHook !== null) {
    const prevEffect = currentHook.memoizedState;
    destroy = prevEffect.destroy;
    // 前后对比依赖项是否变化
    if (areHookInputsEqual(nextInputs, prevEffect.inputs)) {
      // 如果相同
      pushEffect(NoHookEffect, create, destroy, nextInputs);
      return;
    }
  }
  // 第一次渲染 或者 依赖不相同  
  // 标记 fiber 的 effectTag 为 fiberEffectTag 
  currentlyRenderingFiber.effectTag |= fiberEffectTag;
  workInProgressHook.memoizedState = pushEffect(
    hookEffectTag,
    create,
    destroy,
    nextInputs,
  );
}

function areHookInputsEqual(arr1: any[], arr2: any[]) {
  // Don't bother comparing lengths in prod because these arrays should be
  // passed inline.
  for (let i = 0; i < arr1.length; i++) {
    // Inlined Object.is polyfill.
    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
    const val1 = arr1[i];
    const val2 = arr2[i];
    if (
      (val1 === val2 && (val1 !== 0 || 1 / val1 === 1 / (val2: any))) ||
      (val1 !== val1 && val2 !== val2) // eslint-disable-line no-self-compare
    ) {
      continue;
    }
    return false;
  }
  return true;
}

function pushEffect(tag, create, destroy, inputs) {
  const effect: Effect = {
    tag, //  => hookEffectTag
    create, 
    destroy,
    inputs,
    // Circular
    next: (null: any),
  };
  // 构建 functionComponent 所有的 effect  链
  if (componentUpdateQueue === null) {
    componentUpdateQueue = createFunctionComponentUpdateQueue();
    componentUpdateQueue.lastEffect = effect.next = effect;
  } else {
    const lastEffect = componentUpdateQueue.lastEffect;
    if (lastEffect === null) {
      componentUpdateQueue.lastEffect = effect.next = effect;
    } else {
      const firstEffect = lastEffect.next;
      lastEffect.next = effect;
      effect.next = firstEffect;
      componentUpdateQueue.lastEffect = effect;
    }
  }
  return effect;
}

function createFunctionComponentUpdateQueue(): FunctionComponentUpdateQueue {
  return {
    lastEffect: null,
  };
}

function commitHookEffectList(
  unmountTag: number,
  mountTag: number,
  finishedWork: Fiber,
) {
  if (!enableHooks) {
    return;
  }
  // 读取 updateQueue
  const updateQueue: FunctionComponentUpdateQueue | null = (finishedWork.updateQueue: any);
  let lastEffect = updateQueue !== null ? updateQueue.lastEffect : null;
  // 遍历在 useEffectImpl 中 pushEffect 生成的 effect 链 （hook对象的）
  if (lastEffect !== null) {
    const firstEffect = lastEffect.next;
    let effect = firstEffect;
    do {
      // 如果 effect.tag  有 unmountTag 则执行 destroy()
      if ((effect.tag & unmountTag) !== NoHookEffect) {
        // Unmount
        const destroy = effect.destroy;
        effect.destroy = null;
        if (destroy !== null) {
          destroy();
        }
      }
      // 如果 effect.tag 有 moountTag 则执行 create()
      if ((effect.tag & mountTag) !== NoHookEffect) {
        // Mount
        const create = effect.create;

        let destroy = create();
        if (typeof destroy !== 'function') {
          // 非函数返回的提示
          if (__DEV__) {
            if (destroy !== null && destroy !== undefined) {
              warningWithoutStack(
                false,
                'useEffect function must return a cleanup function or ' +
                  'nothing.%s%s',
                typeof destroy.then === 'function'
                  ? '\n\nIt looks like you wrote useEffect(async () => ...) or returned a Promise. ' +
                    'Instead, you may write an async function separately ' +
                    'and then call it from inside the effect:\n\n' +
                    'async function fetchComment(commentId) {\n' +
                    '  // You can await here\n' +
                    '}\n\n' +
                    'useEffect(() => {\n' +
                    '  fetchComment(commentId);\n' +
                    '}, [commentId]);\n\n' +
                    'In the future, React will provide a more idiomatic solution for data fetching ' +
                    "that doesn't involve writing effects manually."
                  : '',
                getStackByFiberInDevAndProd(finishedWork),
              );
            }
          }
          destroy = null;
        }
        effect.destroy = destroy;
      }
      effect = effect.next;
    } while (effect !== firstEffect);
  }
}

function commitBeforeMutationLifeCycles(
  current: Fiber | null,
  finishedWork: Fiber,
): void {
  switch (finishedWork.tag) {
    case FunctionComponent:
    case ForwardRef:
    case SimpleMemoComponent: {
      commitHookEffectList(UnmountSnapshot, NoHookEffect, finishedWork);
      return;
    }
    //...
  }
  //...
}

function commitWork(current: Fiber | null, finishedWork: Fiber): void {
  // ...
  switch (finishedWork.tag) {
    case FunctionComponent:
    case ForwardRef:
    case MemoComponent:
    case SimpleMemoComponent: {
      // Note: We currently never use MountMutation, but useLayout uses
      // UnmountMutation.
      commitHookEffectList(UnmountMutation, MountMutation, finishedWork);
      return;
    }
    // ...
  }
}

function commitAllLifeCycles(
  finishedRoot: FiberRoot,
  committedExpirationTime: ExpirationTime,
) {
  if (__DEV__) {
    ReactStrictModeWarnings.flushPendingUnsafeLifecycleWarnings();
    ReactStrictModeWarnings.flushLegacyContextWarning();

    if (warnAboutDeprecatedLifecycles) {
      ReactStrictModeWarnings.flushPendingDeprecationWarnings();
    }
  }
  while (nextEffect !== null) {
    const effectTag = nextEffect.effectTag;

    if (effectTag & (Update | Callback)) {
      recordEffect();
      const current = nextEffect.alternate;
      commitLifeCycles(
        finishedRoot,
        current,
        nextEffect,
        committedExpirationTime,
      );
    }

    if (effectTag & Ref) {
      recordEffect();
      commitAttachRef(nextEffect);
    }

    // useEffect 中标记 fiber 的 effectTag 为 updateEffect | passiveEffect 
    // 因此对于 useEffect 的节点会满足条件，从而赋值 rootWithPendingPassiveEffects
    if (enableHooks && effectTag & Passive) {
      rootWithPendingPassiveEffects = finishedRoot;
    }

    nextEffect = nextEffect.nextEffect;
  }
}

function commitLifeCycles(
  finishedRoot: FiberRoot,
  current: Fiber | null,
  finishedWork: Fiber,
  committedExpirationTime: ExpirationTime,
): void {
  switch (finishedWork.tag) {
    case FunctionComponent:
    case ForwardRef:
    case SimpleMemoComponent: {
      commitHookEffectList(UnmountLayout, MountLayout, finishedWork);
      break;
    }
    // ...
  }
}

// commitRoot 

//... 

if (
    enableHooks &&
    firstEffect !== null &&
    rootWithPendingPassiveEffects !== null
  ) {
    // This commit included a passive effect. These do not need to fire until
    // after the next paint. Schedule an callback to fire them in an async
    // event. To ensure serial execution, the callback will be flushed early if
    // we enter rootWithPendingPassiveEffects commit phase before then.
    let callback = commitPassiveEffects.bind(null, root, firstEffect);
    if (enableSchedulerTracing) {
      // TODO: Avoid this extra callback by mutating the tracing ref directly,
      // like we do at the beginning of commitRoot. I've opted not to do that
      // here because that code is still in flux.
      callback = Schedule_tracing_wrap(callback);
    }
    passiveEffectCallbackHandle = Schedule_scheduleCallback(callback);
    passiveEffectCallback = callback;
  }

//...

function commitPassiveEffects(root: FiberRoot, firstEffect: Fiber): void {
  rootWithPendingPassiveEffects = null;
  passiveEffectCallbackHandle = null;
  passiveEffectCallback = null;

  // Set this to true to prevent re-entrancy
  const previousIsRendering = isRendering;
  isRendering = true;

  let effect = firstEffect;
  do {
    if (effect.effectTag & Passive) {
      let didError = false;
      let error;
      if (__DEV__) {
        invokeGuardedCallback(null, commitPassiveHookEffects, null, effect);
        if (hasCaughtError()) {
          didError = true;
          error = clearCaughtError();
        }
      } else {
        try {
          commitPassiveHookEffects(effect);
        } catch (e) {
          didError = true;
          error = e;
        }
      }
      if (didError) {
        captureCommitPhaseError(effect, error);
      }
    }
    effect = effect.nextEffect;
  } while (effect !== null);

  isRendering = previousIsRendering;

  // Check if work was scheduled by one of the effects
  const rootExpirationTime = root.expirationTime;
  if (rootExpirationTime !== NoWork) {
    requestWork(root, rootExpirationTime);
  }
}

function commitPassiveHookEffects(finishedWork: Fiber): void {
  commitHookEffectList(UnmountPassive, NoHookEffect, finishedWork);
  commitHookEffectList(NoHookEffect, MountPassive, finishedWork);
}

function useContext<T>(
  context: ReactContext<T>,
  observedBits: void | number | boolean,
): T {
  // Ensure we're in a function component (class components support only the
  // .unstable_read() form)
  resolveCurrentlyRenderingFiber();
  return readContext(context, observedBits);
}

function useRef<T>(initialValue: T): {current: T} {
  currentlyRenderingFiber = resolveCurrentlyRenderingFiber();
  workInProgressHook = createWorkInProgressHook();
  let ref;

  if (workInProgressHook.memoizedState === null) {
    // ref 对象
    ref = {current: initialValue};
    if (__DEV__) {
      Object.seal(ref);
    }
    workInProgressHook.memoizedState = ref;
  } else {
    ref = workInProgressHook.memoizedState;
  }
  return ref;
}

function useImperativeMethods<T>(
  ref: {current: T | null} | ((inst: T | null) => mixed) | null | void,
  create: () => T,
  inputs: Array<mixed> | void | null,
): void {
  // TODO: If inputs are provided, should we skip comparing the ref itself?
  const nextInputs =
    inputs !== null && inputs !== undefined
      ? inputs.concat([ref])
      : [ref, create];

  // TODO: I've implemented this on top of useEffect because it's almost the
  // same thing, and it would require an equal amount of code. It doesn't seem
  // like a common enough use case to justify the additional size.
  useLayoutEffect(() => {
    // 如果传递下来的 ref 是个函数
    if (typeof ref === 'function') {
      const refCallback = ref;
      const inst = create();
      // 将 create 方法执行结果当作参数
      refCallback(inst);
      return () => refCallback(null);
    } else if (ref !== null && ref !== undefined) {
      const refObject = ref;
      const inst = create();
      // 直接将 create 方法的结果挂载到传递下来的 ref.current 上
      refObject.current = inst;
      return () => {
        refObject.current = null;
      };
    }
  }, nextInputs);
}

function useCallback<T>(
  callback: T,
  inputs: Array<mixed> | void | null,
): T {
  currentlyRenderingFiber = resolveCurrentlyRenderingFiber();
  workInProgressHook = createWorkInProgressHook();

  const nextInputs =
    inputs !== undefined && inputs !== null ? inputs : [callback];

  const prevState = workInProgressHook.memoizedState;
  if (prevState !== null) {
    const prevInputs = prevState[1];
    if (areHookInputsEqual(nextInputs, prevInputs)) {
      return prevState[0];
    }
  }
  workInProgressHook.memoizedState = [callback, nextInputs];
  return callback;
}

function useMemo<T>(
  nextCreate: () => T,
  inputs: Array<mixed> | void | null,
): T {
  currentlyRenderingFiber = resolveCurrentlyRenderingFiber();
  workInProgressHook = createWorkInProgressHook();

  const nextInputs =
    inputs !== undefined && inputs !== null ? inputs : [nextCreate];

  const prevState = workInProgressHook.memoizedState;
  if (prevState !== null) {
    const prevInputs = prevState[1];
    if (areHookInputsEqual(nextInputs, prevInputs)) {
      return prevState[0];
    }
  }

  const nextValue = nextCreate();
  workInProgressHook.memoizedState = [nextValue, nextInputs];
  return nextValue;
}