function updateClassComponent(
  current: Fiber | null,
  workInProgress: Fiber,
  Component: any,
  nextProps: any,
  renderLanes: Lanes,
) {

  let hasContext;
  if (isLegacyContextProvider(Component)) {
    hasContext = true;
    pushLegacyContextProvider(workInProgress);
  } else {
    hasContext = false;
  }
  prepareToReadContext(workInProgress, renderLanes);
  // 类组件节点的stateNode 不是存储dom元素，而是组件实例 【hostComponent的stateNode才是dom元素】
  const instance = workInProgress.stateNode;
  let shouldUpdate;
  # 第一次class组件加载，instance都为null
  if (instance === null) {
    // 初始化构建组件实例
    constructClassInstance(workInProgress, Component, nextProps);
    // 加载组件实例
    mountClassInstance(workInProgress, Component, nextProps, renderLanes);
    shouldUpdate = true;
  } else if (current === null) {
    // In a resume, we'll already have an instance we can reuse.
    shouldUpdate = resumeMountClassInstance(
      workInProgress,
      Component,
      nextProps,
      renderLanes,
    );
  } else {
    // update阶段：判断是否更新class组件
    shouldUpdate = updateClassInstance(
      current,
      workInProgress,
      Component,
      nextProps,
      renderLanes,
    );
  }

  # 最后：创建class组件child
  const nextUnitOfWork = finishClassComponent(
    current,
    workInProgress,
    Component,
    shouldUpdate,
    hasContext,
    renderLanes,
  );
  # 返回child子节点
  return nextUnitOfWork;
}

function constructClassInstance(
  workInProgress: Fiber,
  ctor: any,
  props: any,
): any {

  # 创建class实例对象，参数为props和context
  let instance = new ctor(props, context);

  // 将instance实例对象的state数据同步到Fiber节点的memoizedState属性
  const state = (workInProgress.memoizedState =
    instance.state !== null && instance.state !== undefined
      ? instance.state
      : null);

  # 确定class组件实例：即链接FiberNode与对应的组件实例
  adoptClassInstance(workInProgress, instance);

  // dev开发环境下的警告：如果class组件使用了过时的生命周期钩子，发出对应的警告
  ...

  # 返回创建完成的实例
  return instance;
}

function adoptClassInstance(workInProgress: Fiber, instance: any): void {
  instance.updater = classComponentUpdater;
  // Fiber节点存储instance实例
  workInProgress.stateNode = instance;
  // instance对象定义一个_reactInternal内部属性存储Fiber节点
  setInstance(instance, workInProgress);
}

function mountClassInstance(
  workInProgress: Fiber,
  ctor: any,
  newProps: any,
  renderLanes: Lanes,
): void {

  // 取出class组件实例
  const instance = workInProgress.stateNode;
  // props
  instance.props = newProps;
  // 同步state数据
  instance.state = workInProgress.memoizedState;
  // ref：默认为空对象
  instance.refs = emptyRefsObject;
  // 初始化一个Fiber节点的更新队列
  # 设置更新队列对象：fiber.updateQueue = queue;
  initializeUpdateQueue(workInProgress);

  // 同步组件实例的state数据
  instance.state = workInProgress.memoizedState;

  const getDerivedStateFromProps = ctor.getDerivedStateFromProps;
  // 调用getDerivedStateFromProps钩子
  if (typeof getDerivedStateFromProps === 'function') {
    applyDerivedStateFromProps(
      workInProgress,
      ctor,
      getDerivedStateFromProps,
      newProps,
    );
    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.
  // 不应该使用旧的生命周期钩子
  if (
    typeof ctor.getDerivedStateFromProps !== 'function' &&
    typeof instance.getSnapshotBeforeUpdate !== 'function' &&
    (typeof instance.UNSAFE_componentWillMount === 'function' ||
      typeof instance.componentWillMount === 'function')
  ) {
    # 触发WillMount生命周期钩子
    callComponentWillMount(workInProgress, instance);
    // If we had additional state updates during this life-cycle, let's
    // process them now.
    processUpdateQueue(workInProgress, newProps, instance, renderLanes);
    instance.state = workInProgress.memoizedState;
  }

  # 如果设置了class组件的componentDidMount生命周期钩子函数，则需要在组件的FiberNode上设置对应的flags
  if (typeof instance.componentDidMount === 'function') {
    let fiberFlags: Flags = Update;
    if (enableSuspenseLayoutEffectSemantics) {
      fiberFlags |= LayoutStatic;
    }

    workInProgress.flags |= fiberFlags;
  }
}

export function initializeUpdateQueue<State>(fiber: Fiber): void {
  // 创建一个更新队列对象
  const queue: UpdateQueue<State> = {
    baseState: fiber.memoizedState, // 初始state数据
    firstBaseUpdate: null,
    lastBaseUpdate: null,
    shared: {
      pending: null, // 存储update链表
      lanes: NoLanes,
    },
    effects: null,
  };

  // 设置updateQueue属性
  fiber.updateQueue = queue;
}

# setState原理
Component.prototype.setState = function(partialState, callback) {
  // 调用updater中的一个方法
  this.updater.enqueueSetState(this, partialState, callback, 'setState');
};

const classComponentUpdater = {
  isMounted,
  enqueueSetState(inst: any, payload: any, callback) {
    // ! 1. 获取current和lane
    const fiber = getInstance(inst);
    const lane = requestUpdateLane(fiber);

    // ! 2. 创建update
    const update = createUpdate(lane);
    update.payload = payload;
    if (callback !== undefined && callback !== null) {
      update.callback = callback;
    }
    // ! 3. update入队fiber.updateQueue中, 并返回应用的root根节点
    const root = enqueueUpdate(fiber, update, lane);
    if (root !== null) {
      // ! 4. 调度更新(开启一个从root根节点开始的更新调度)
      scheduleUpdateOnFiber(root, fiber, lane);
      // ! 5. 处理transitions，非紧急更新
      entangleTransitions(root, fiber, lane);
    }

    if (enableSchedulingProfiler) {
      markStateUpdateScheduled(fiber, lane);
    }
  },
  enqueueReplaceState(inst: any, payload: any, callback: null) {
    // ...
  },
  enqueueForceUpdate(inst: any, callback) {
    // ...
  },
};

export function enqueueUpdate<State>(
  fiber: Fiber,
  update: Update<State>,
  lane: Lane,
): FiberRoot | null {
  const updateQueue = fiber.updateQueue;
  const sharedQueue: SharedQueue<State> = (updateQueue: any).shared;

  return enqueueConcurrentClassUpdate(fiber, sharedQueue, update, lane);
}

function enqueueConcurrentClassUpdate(fiber, sharedQueue, update, lane) {
  const interleaved = sharedQueue.interleaved;
  // 第一个update对象入队
  if (interleaved === null) {
    update.next = update;
    pushConcurrentUpdateQueue(sharedQueue);
  } else {
    // 其他的update对象入队
    update.next = interleaved.next;
    interleaved.next = update;
  }
  sharedQueue.interleaved = update;
}

export function performSyncWorkOnRoot(root: FiberRoot, lanes: Lanes): null {
  if ((executionContext & (RenderContext | CommitContext)) !== NoContext) {
    throw new Error('Should not already be working.');
  }

  const didFlushPassiveEffects = flushPassiveEffects();
  if (didFlushPassiveEffects) {
    // If passive effects were flushed, exit to the outer work loop in the root
    // scheduler, so we can recompute the priority.
    // TODO: We don't actually need this `ensureRootIsScheduled` call because
    // this path is only reachable if the root is already part of the schedule.
    // I'm including it only for consistency with the other exit points from
    // this function. Can address in a subsequent refactor.
    ensureRootIsScheduled(root);
    return null;
  }

  if (enableProfilerTimer && enableProfilerNestedUpdatePhase) {
    syncNestedUpdateFlag();
  }

  // * setState
  // !1. render阶段
  let exitStatus = renderRootSync(root, lanes);
  if (root.tag !== LegacyRoot && exitStatus === RootErrored) {
    // If something threw an error, try rendering one more time. We'll render
    // synchronously to block concurrent data mutations, and we'll includes
    // all pending updates are included. If it still fails after the second
    // attempt, we'll give up and commit the resulting tree.
    const originallyAttemptedLanes = lanes;
    const errorRetryLanes = getLanesToRetrySynchronouslyOnError(
      root,
      originallyAttemptedLanes,
    );
    if (errorRetryLanes !== NoLanes) {
      lanes = errorRetryLanes;
      exitStatus = recoverFromConcurrentError(
        root,
        originallyAttemptedLanes,
        errorRetryLanes,
      );
    }
  }

  if (exitStatus === RootFatalErrored) {
    const fatalError = workInProgressRootFatalError;
    prepareFreshStack(root, NoLanes);
    markRootSuspended(root, lanes, NoLane);
    ensureRootIsScheduled(root);
    throw fatalError;
  }

  if (exitStatus === RootDidNotComplete) {
    // The render unwound without completing the tree. This happens in special
    // cases where need to exit the current render without producing a
    // consistent tree or committing.
    markRootSuspended(root, lanes, workInProgressDeferredLane);
    ensureRootIsScheduled(root);
    return null;
  }

  // We now have a consistent tree. Because this is a sync render, we
  // will commit it even if something suspended.
  const finishedWork: Fiber = (root.current.alternate: any);
  root.finishedWork = finishedWork;
  root.finishedLanes = lanes;
  // ! 2. commit阶段
  commitRoot(
    root,
    workInProgressRootRecoverableErrors,
    workInProgressTransitions,
    workInProgressRootDidIncludeRecursiveRenderUpdate,
    workInProgressDeferredLane,
  );

  // Before exiting, make sure there's a callback scheduled for the next
  // pending level.
  ensureRootIsScheduled(root);

  return null;
}

function updateClassInstance(
  current: Fiber,
  workInProgress: Fiber,
  ctor: any,
  newProps: any,
  renderLanes: Lanes,
): boolean {
    // ...
}

// 取出组件实例
const instance = workInProgress.stateNode;
# 从旧节点上克隆updateQueue信息，包含了shared.pending中等待处理的更新操作
cloneUpdateQueue(current, workInProgress);
// 旧的props
const unresolvedOldProps = workInProgress.memoizedProps;
const oldProps =
  workInProgress.type === workInProgress.elementType
    ? unresolvedOldProps
    : resolveDefaultProps(workInProgress.type, unresolvedOldProps);
instance.props = oldProps;
// 新的props
const unresolvedNewProps = workInProgress.pendingProps;
...

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

// 取出旧的数据
const oldState = workInProgress.memoizedState;
let newState = (instance.state = oldState);
# 更新组件实例的数据
processUpdateQueue(workInProgress, newProps, instance, renderLanes);
newState = workInProgress.memoizedState;

export function processUpdateQueue<State>(
  workInProgress: Fiber,
  props: any,
  instance: any,
  renderLanes: Lanes,
): void {

  didReadFromEntangledAsyncAction = false;

  // This is always non-null on a ClassComponent or HostRoot
  const queue: UpdateQueue<State> = (workInProgress.updateQueue: any);

  hasForceUpdate = false;

  let firstBaseUpdate = queue.firstBaseUpdate;
  let lastBaseUpdate = queue.lastBaseUpdate;

  // Check if there are pending updates. If so, transfer them to the base queue.
  // *1. 检查是否有pending update。如果有，需要将它们剪开环型链表，合并到 baseQueue。
  // pending update是个单向循环链表，转移到 单链表 firstBaseUpdate->...->lastBaseUpdate 中去
  // ! 这里注意pending update不同于baseQueue，pending update只记录了尾节点
  let pendingQueue = queue.shared.pending;
  if (pendingQueue !== null) {
    // ? sy
    queue.shared.pending = null;

    // The pending queue is circular. Disconnect the pointer between first
    // and last so that it's non-circular.
    // ! 这里的 pendingQueue 是在 finishQueueingConcurrentUpdates 函数中构建的单向循环链表
    const lastPendingUpdate = pendingQueue; // 尾节点
    const firstPendingUpdate = lastPendingUpdate.next; // 头结点
    lastPendingUpdate.next = null; // 断开循环链表
    // Append pending updates to base queue
    // 把pending update转移到base queue上
    // ! 接下来构建单链表 firstBaseUpdate->...->lastBaseUpdate
    if (lastBaseUpdate === null) {
      // base queue是空的，那么firstPendingUpdate就是头节点firstBaseUpdate
      firstBaseUpdate = firstPendingUpdate;
    } else {
      // 否则往这个尾节点后继续加
      lastBaseUpdate.next = firstPendingUpdate;
    }
    // 更新尾节点, 将 lastBaseUpdate 赋值为 lastPendingUpdate
    // 此时已经形成了 以 firstBaseUpdate 为头以 lastBaseUpdate 为尾的新链表
    // 也即为本次需要处理的 update 链表
    lastBaseUpdate = lastPendingUpdate;

    // If there's a current queue, and it's different from the base queue, then
    // we need to transfer the updates to that queue, too. Because the base
    // queue is a singly-linked list with no cycles, we can append to both
    // lists and take advantage of structural sharing.
    // TODO: Pass `current` as argument
    const current = workInProgress.alternate;
    // 如果有current queue，并且它和base queue不同，那么我们也需要把更新转移到那个queue上。
    if (current !== null) {
      // This is always non-null on a ClassComponent or HostRoot
      // 类组件和 HostRoot 的updateQueue都初始化过，所以这里不会是null
      const currentQueue: UpdateQueue<State> = (current.updateQueue: any);
      const currentLastBaseUpdate = currentQueue.lastBaseUpdate;
      // 如果current的lastBaseUpdate和baseQueue的lastBaseUpdate不同，那么把pending update转移到currentQueue上
      if (currentLastBaseUpdate !== lastBaseUpdate) {
        if (currentLastBaseUpdate === null) {
          currentQueue.firstBaseUpdate = firstPendingUpdate;
        } else {
          currentLastBaseUpdate.next = firstPendingUpdate;
        }
        currentQueue.lastBaseUpdate = lastPendingUpdate;
      }
    }
  }

  // These values may change as we process the queue.
  if (firstBaseUpdate !== null) {
    // *2. 接下来要做的就是遍历queue，然后根据这些update，计算出最后的结果。
    // Iterate through the list of updates to compute the result.
    let newState = queue.baseState;
    // TODO: Don't need to accumulate this. Instead, we can remove renderLanes
    // from the original lanes.
    let newLanes = NoLanes;
    // 这里的 newBaseState， newFirstBaseUpdate，newLastBaseUpdate 是计算的临时变量
    // 实际上会用来更新 updateQueue 的 baseState, firstBaseUpdate, lastBaseUpdate
    let newBaseState = null;
    let newFirstBaseUpdate = null;
    let newLastBaseUpdate: null | Update<State> = null;

    let update: Update<State> = firstBaseUpdate;
    do {
      // An extra OffscreenLane bit is added to updates that were made to
      // a hidden tree, so that we can distinguish them from updates that were
      // already there when the tree was hidden.
      const updateLane = removeLanes(update.lane, OffscreenLane);
      const isHiddenUpdate = updateLane !== update.lane;

      // Check if this update was made while the tree was hidden. If so, then
      // it's not a "base" update and we should disregard the extra base lanes
      // that were added to renderLanes when we entered the Offscreen tree.
      const shouldSkipUpdate = isHiddenUpdate
        ? !isSubsetOfLanes(getWorkInProgressRootRenderLanes(), updateLane)
        : !isSubsetOfLanes(renderLanes, updateLane);

      // 更新优先级不满足，该 update 会被跳过
      if (shouldSkipUpdate) {
        // ? sy-no
        // Priority is insufficient. Skip this update. If this is the first
        // skipped update, the previous update/state is the new base
        // update/state.
        const clone: Update<State> = {
          lane: updateLane,

          tag: update.tag,
          payload: update.payload,
          callback: update.callback,

          next: null,
        };
        if (newLastBaseUpdate === null) {
          newFirstBaseUpdate = newLastBaseUpdate = clone;
          newBaseState = newState;
        } else {
          newLastBaseUpdate = newLastBaseUpdate.next = clone;
        }
        // Update the remaining priority in the queue.
        newLanes = mergeLanes(newLanes, updateLane);
      } else {
        // 该 update 更新优先级满足，本次更新不会跳过
        // This update does have sufficient priority.

        // Check if this update is part of a pending async action. If so,
        // we'll need to suspend until the action has finished, so that it's
        // batched together with future updates in the same action.

        // 请检查此更新是否属于待处理的异步操作。如果是的话，
        // 我们需要暂停直到操作完成，以便将其与将来的更新一起批处理在同一操作中。
        if (updateLane !== NoLane && updateLane === peekEntangledActionLane()) {
          didReadFromEntangledAsyncAction = true;
        }

        // 如果 newLastBaseUpdate 不存在，说明之前没有跳过任何 upadte 无需添加新增
        // 否则无论无论该 update 是否跳过都需要添加到 baseUpdate 链表之后
        if (newLastBaseUpdate !== null) {
          // ? sy-no
          const clone: Update<State> = {
            // This update is going to be committed so we never want uncommit
            // it. Using NoLane works because 0 is a subset of all bitmasks, so
            // this will never be skipped by the check above.
            lane: NoLane,

            tag: update.tag,
            payload: update.payload,

            // When this update is rebased, we should not fire its
            // callback again.
            callback: null,

            next: null,
          };
          newLastBaseUpdate = newLastBaseUpdate.next = clone;
        }

        // Process this update.
        // 处理这个更新
        newState = getStateFromUpdate(
          workInProgress,
          queue,
          update,
          newState,
          props,
          instance,
        );
        // 类组件的setState会在这里存储
        const callback = update.callback;
        if (callback !== null) {
          workInProgress.flags |= Callback;
          if (isHiddenUpdate) {
            workInProgress.flags |= Visibility;
          }
          const callbacks = queue.callbacks;
          if (callbacks === null) {
            queue.callbacks = [callback];
          } else {
            callbacks.push(callback);
          }
        }
      }
      // $FlowFixMe[incompatible-type] we bail out when we get a null
      // 下一个update
      update = update.next;
      if (update === null) {
        // 已经到达尾节点，所有update被处理完毕，暂停循环
        pendingQueue = queue.shared.pending;
        // 这里与函数组件有所不同，当setState套setState时候，虽然这种情况都会加入到.pending中
        // 但是class组件会在最后判断，如有就继续执行
        // 而函数组件添加时dispatchSetState会走enqueueRenderPhaseUpdate添加任务，不会走scheduleUpdateOnFiber这个分支，在renderWithHooks中Component()执行结束后会走renderWithHooksAgain，再次执行一遍组件
        // this.setState((prevState, props) => {
        //   this.setState({ count: 100 })
        //   return {
        //     count: prevState.count + 1,
        //   }
        // })
        if (pendingQueue === null) {
          break;
        } else {
          // An update was scheduled from inside a reducer. Add the new
          // pending updates to the end of the list and keep processing.
          // 已经计划在 reducer 内部进行更新。将新的待处理更新添加到列表末尾并继续处理。
          const lastPendingUpdate = pendingQueue;
          // Intentionally unsound. Pending updates form a circular list, but we
          // unravel them when transferring them to the base queue.
          const firstPendingUpdate =
            ((lastPendingUpdate.next: any): Update<State>);
          lastPendingUpdate.next = null;
          update = firstPendingUpdate;
          queue.lastBaseUpdate = lastPendingUpdate;
          queue.shared.pending = null;
        }
      }
    } while (true);

    if (newLastBaseUpdate === null) {
      newBaseState = newState;
    }

    // 更新 updateQueue 的 baseState，firstBaseUpdate， lastBaseUpdate 三个属性
    queue.baseState = ((newBaseState: any): State);
    queue.firstBaseUpdate = newFirstBaseUpdate;
    queue.lastBaseUpdate = newLastBaseUpdate;


    if (firstBaseUpdate === null) {
      // `queue.lanes` is used for entangling transitions. We can set it back to
      // zero once the queue is empty.
      // 当多个transitions在同一个queue中时，只允许最近的一个完成。我们不应该显示中间状态。
      // 当queue为空，我们将queue.lanes设置回0
      queue.shared.lanes = NoLanes;
    }

    // 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.
    // 把跳过的update的lane记录下来
    markSkippedUpdateLanes(newLanes);
    workInProgress.lanes = newLanes;
    workInProgress.memoizedState = newState; // 更新状态
  }
}

if (typeof getDerivedStateFromProps === 'function') {
  // 调用getDerivedStateFromProps钩子
  applyDerivedStateFromProps(
    workInProgress,
    ctor,
    getDerivedStateFromProps,
    newProps,
  );
  newState = workInProgress.memoizedState;
}

const shouldUpdate =
    // 检查是否为强制更新
    checkHasForceUpdateAfterProcessing() ||
    // 调用shouldComponentUpdate钩子，检查是否应该更新
    checkShouldComponentUpdate( workInProgress, ctor, oldProps, newProps, oldState, newState, nextContext)

export function checkHasForceUpdateAfterProcessing(): boolean {
  return hasForceUpdate;
}

newState = getStateFromUpdate(...)


function getStateFromUpdate<State>() {
	switch (update.tag) {
		case ReplaceState: {}
		case CaptureUpdate: {}
		case UpdateState: {}
		// 强制更新 场景
		case ForceUpdate: {
      		hasForceUpdate = true;
      		return prevState;
    	}
	}
}

function checkShouldComponentUpdate(
  workInProgress,
  ctor,
  oldProps,
  newProps,
  oldState,
  newState,
  nextContext,
) {
  const instance = workInProgress.stateNode;
  if (typeof instance.shouldComponentUpdate === 'function') {
    let shouldUpdate = instance.shouldComponentUpdate(
      newProps,
      newState,
      nextContext,
    );
    return shouldUpdate;
  }

  // 针对PureComponent纯组件的 内部校验
  if (ctor.prototype && ctor.prototype.isPureReactComponent) {
    return (
      !shallowEqual(oldProps, newProps) || !shallowEqual(oldState, newState)
    );
  }

  return true;
}

# 执行componentWillUpdate钩子
if (typeof instance.componentWillUpdate === 'function') {
	instance.componentWillUpdate(newProps, newState, nextContext);
}
// 更新flags标记
if (typeof instance.componentDidUpdate === 'function') {
	workInProgress.flags |= Update;
}
if (typeof instance.getSnapshotBeforeUpdate === 'function') {
	workInProgress.flags |= Snapshot;
}

instance.props = newProps;
instance.state = newState;

function commitLayoutEffectOnFiber(
  finishedRoot: FiberRoot,
  current: Fiber | null,
  finishedWork: Fiber,
  committedLanes: Lanes,
): void {
  if ((finishedWork.flags & LayoutMask) !== NoFlags) {
    // 根据组件类型：进行不同的处理
    switch (finishedWork.tag) {

      // 类组件的处理
      case ClassComponent: {
        // 组件实例
        const instance = finishedWork.stateNode;
        if (finishedWork.flags & Update) {
          if (!offscreenSubtreeWasHidden) {
            if (current === null) {
			  // mount加载阶段

              # 触发componentDidMount 生命周期钩子函数【这类静态方法：是存储在instance对象原型上的】
              instance.componentDidMount();
            } else {

              // update更新阶段
              const prevProps = finishedWork.elementType === finishedWork.type ? current.memoizedProps
                  : resolveDefaultProps( finishedWork.type, current.memoizedProps);
              const prevState = current.memoizedState;
			  # 触发componentDidUpdate 生命周期钩子函数
              instance.componentDidUpdate( prevProps,prevState,
                  instance.__reactInternalSnapshotBeforeUpdate,
                );
            }
          }
        }

        # 取出当前组件节点的updateQueue更新对象
        const updateQueue: UpdateQueue = finishedWork.updateQueue;
        if (updateQueue !== null) {
          // 触发更新
          commitUpdateQueue(finishedWork, updateQueue, instance);
        }
        break;
      }

      ...
    }
  }
}

type Heap<T: Node> = Array<T>;
type Node = {
  id: number,
  sortIndex: number,
  ...
};

export function push<T: Node>(heap: Heap<T>, node: T): void {
  const index = heap.length;
  heap.push(node);
  siftUp(heap, node, index);
}

export function peek<T: Node>(heap: Heap<T>): T | null {
  return heap.length === 0 ? null : heap[0];
}

export function pop<T: Node>(heap: Heap<T>): T | null {
  if (heap.length === 0) {
    return null;
  }
  const first = heap[0];
  const last = heap.pop();
  if (last !== first) {
    heap[0] = last;
    siftDown(heap, last, 0);
  }
  return first;
}

function siftUp<T: Node>(heap: Heap<T>, node: T, i: number): void {
  let index = i;
  while (index > 0) {
    const parentIndex = (index - 1) >>> 1;
    const parent = heap[parentIndex];
    if (compare(parent, node) > 0) {
      // The parent is larger. Swap positions.
      heap[parentIndex] = node;
      heap[index] = parent;
      index = parentIndex;
    } else {
      // The parent is smaller. Exit.
      return;
    }
  }
}

function siftDown<T: Node>(heap: Heap<T>, node: T, i: number): void {
  let index = i;
  const length = heap.length;
  const halfLength = length >>> 1;
  while (index < halfLength) {
    const leftIndex = (index + 1) * 2 - 1;
    const left = heap[leftIndex];
    const rightIndex = leftIndex + 1;
    const right = heap[rightIndex];

    // If the left or right node is smaller, swap with the smaller of those.
    if (compare(left, node) < 0) {
      if (rightIndex < length && compare(right, left) < 0) {
        heap[index] = right;
        heap[rightIndex] = node;
        index = rightIndex;
      } else {
        heap[index] = left;
        heap[leftIndex] = node;
        index = leftIndex;
      }
    } else if (rightIndex < length && compare(right, node) < 0) {
      heap[index] = right;
      heap[rightIndex] = node;
      index = rightIndex;
    } else {
      // Neither child is smaller. Exit.
      return;
    }
  }
}

function compare(a: Node, b: Node) {
  // Compare sort index first, then task id.
  const diff = a.sortIndex - b.sortIndex;
  return diff !== 0 ? diff : a.id - b.id;
}

const newCallbackNode = scheduleCallback(
    schedulerPriorityLevel,
    performConcurrentWorkOnRoot.bind(null, root),
);

import {push, pop, peek} from '../SchedulerMinHeap';
import {
  ImmediatePriority,
  UserBlockingPriority,
  NormalPriority,
  LowPriority,
  IdlePriority,
} from '../SchedulerPriorities';

import {
  enableIsInputPending,
  enableIsInputPendingContinuous,
  frameYieldMs,
  continuousYieldMs,
  maxYieldMs,
  userBlockingPriorityTimeout,
  lowPriorityTimeout,
  normalPriorityTimeout,
} from '../SchedulerFeatureFlags';

import {
  markTaskRun,
  markTaskYield,
  markTaskCompleted,
  markTaskCanceled,
  markTaskErrored,
  markSchedulerSuspended,
  markSchedulerUnsuspended,
  markTaskStart,
  stopLoggingProfilingEvents,
  startLoggingProfilingEvents,
} from '../SchedulerProfiling';

export type Callback = boolean => ?Callback;

export opaque type Task = {
  id: number,
  callback: Callback | null,
  priorityLevel: PriorityLevel,
  startTime: number,
  expirationTime: number,
  sortIndex: number,
  isQueued?: boolean,
};

// 获取当前时间，通过performance或者Date
let getCurrentTime: () => number | DOMHighResTimeStamp;
const hasPerformanceNow =
  typeof performance === 'object' && typeof performance.now === 'function';

if (hasPerformanceNow) {
  const localPerformance = performance;
  getCurrentTime = () => localPerformance.now();
} else {
  const localDate = Date;
  const initialTime = localDate.now();
  getCurrentTime = () => localDate.now() - initialTime;
}

// Max 31 bit integer. The max integer size in V8 for 32-bit systems.
// 最大的31位整数。V8中32位系统的最大整数。
// Math.pow(2, 30) - 1
// 0b111111111111111111111111111111
var maxSigned31BitInt = 1073741823;

// Tasks are stored on a min heap
var taskQueue: Array<Task> = []; // 没有延迟的任务
var timerQueue: Array<Task> = []; // 有延迟的任务

// 自增id，标记task唯一性
// Incrementing id counter. Used to maintain insertion order.
var taskIdCounter = 1;

// Pausing the scheduler is useful for debugging.
var isSchedulerPaused = false;

var currentTask = null;
var currentPriorityLevel = NormalPriority;

// 锁
// 是否有work在执行
// This is set while performing work, to prevent re-entrance.
var isPerformingWork = false;

// 主线程是否在调度
var isHostCallbackScheduled = false;

let isMessageLoopRunning = false;

// 是否有任务在倒计时
var isHostTimeoutScheduled = false;

let taskTimeoutID: TimeoutID = (-1: any);

let needsPaint = false;

// Capture local references to native APIs, in case a polyfill overrides them.
const localSetTimeout = typeof setTimeout === 'function' ? setTimeout : null;
const localClearTimeout =
  typeof clearTimeout === 'function' ? clearTimeout : null;
const localSetImmediate =
  typeof setImmediate !== 'undefined' ? setImmediate : null; // IE and Node.js + jsdom

// 判断当前是否有所有类型的输入事件，包括按键、鼠标、滚轮触控等DOM UI事件
const isInputPending =
  typeof navigator !== 'undefined' &&
  // $FlowFixMe[prop-missing]
  navigator.scheduling !== undefined &&
  // $FlowFixMe[incompatible-type]
  navigator.scheduling.isInputPending !== undefined
    ? navigator.scheduling.isInputPending.bind(navigator.scheduling)
    : null;

// 是否应该把控制权交换给主线程
function shouldYieldToHost(): boolean {
  // 当前程序运行时间
  const timeElapsed = getCurrentTime() - startTime;
  // 如果运行时间小于帧间隔时间5ms
  if (timeElapsed < frameInterval) {
    return false;
  }

  // The main thread has been blocked for a non-negligible amount of time. We
  // may want to yield control of the main thread, so the browser can perform
  // high priority tasks. The main ones are painting and user input. If there's
  // a pending paint or a pending input, then we should yield. But if there's
  // neither, then we can yield less often while remaining responsive. We'll
  // eventually yield regardless, since there could be a pending paint that
  // wasn't accompanied by a call to `requestPaint`, or other main thread tasks
  // like network events.
  if (enableIsInputPending) {
    if (needsPaint) {
      // There's a pending paint (signaled by `requestPaint`). Yield now.
      return true;
    }
    if (timeElapsed < continuousInputInterval) {
      // We haven't blocked the thread for that long. Only yield if there's a
      // pending discrete input (e.g. click). It's OK if there's pending
      // continuous input (e.g. mouseover).
      if (isInputPending !== null) {
        return isInputPending();
      }
    } else if (timeElapsed < maxInterval) {
      // Yield if there's either a pending discrete or continuous input.
      if (isInputPending !== null) {
        return isInputPending(continuousOptions);
      }
    } else {
      // We've blocked the thread for a long time. Even if there's no pending
      // input, there may be some other scheduled work that we don't know about,
      // like a network event. Yield now.
      return true;
    }
  }

  // `isInputPending` isn't available. Yield now.
  return true;
}

let schedulePerformWorkUntilDeadline;
if (typeof localSetImmediate === 'function') {
  // Node.js and old IE.
  // There's a few reasons for why we prefer setImmediate.
  //
  // Unlike MessageChannel, it doesn't prevent a Node.js process from exiting.
  // (Even though this is a DOM fork of the Scheduler, you could get here
  // with a mix of Node.js 15+, which has a MessageChannel, and jsdom.)
  // https://github.com/facebook/react/issues/20756
  //
  // But also, it runs earlier which is the semantic we want.
  // If other browsers ever implement it, it's better to use it.
  // Although both of these would be inferior to native scheduling.
  schedulePerformWorkUntilDeadline = () => {
    localSetImmediate(performWorkUntilDeadline);
  };
} else if (typeof MessageChannel !== 'undefined') {
  // DOM and Worker environments.
  // We prefer MessageChannel because of the 4ms setTimeout clamping.
  const channel = new MessageChannel();
  const port = channel.port2;
  channel.port1.onmessage = performWorkUntilDeadline;
  schedulePerformWorkUntilDeadline = () => {
    port.postMessage(null);
  };
} else {
  // We should only fallback here in non-browser environments.
  schedulePerformWorkUntilDeadline = () => {
    localSetTimeout(performWorkUntilDeadline, 0);
  };
}

// 任务调度器的入口函数：并发模式下调度一个回调函数 【这里传入的callback就是performConcurrentWorkOnRoot】
function unstable_scheduleCallback(
  priorityLevel: PriorityLevel,
  callback: Callback,
  options?: {delay: number},
): Task {
  var currentTime = getCurrentTime(); // 获取当前程序执行时间，performance.now()

  var startTime; // 定义任务开始时间，不是执行时间
  if (typeof options === 'object' && options !== null) {
    var delay = options.delay;
    if (typeof delay === 'number' && delay > 0) {
      // 如果存在延期，则开始时间 = 当前时间 + 延期时间
      startTime = currentTime + delay;
    } else {
      // 否则，开始时间 = 当前时间
      startTime = currentTime;
    }
  } else {
    // 开始时间直接等于currentTime
    startTime = currentTime;
  }

  // 定义超时时间 【根据优先级，设置不同的超时时间】
  var timeout;
  switch (priorityLevel) {
    case ImmediatePriority:
      // Times out immediately，立即超时
      timeout = -1;
      break;
    case UserBlockingPriority:
      // Eventually times out，最终超时
      timeout = userBlockingPriorityTimeout; // 250
      break;
    case IdlePriority:
      // Never times out，永不超时
      timeout = maxSigned31BitInt; // Math.pow(2, 30) - 1， 最大的31位整数。V8中32位系统的最大整数。
      break;
    case LowPriority:
      // Eventually times out，最终超时
      timeout = lowPriorityTimeout; // 10000
      break;
    case NormalPriority:
    default:
      // Eventually times out，最终超时
      timeout = normalPriorityTimeout; // 5000
      break;
  }

  // 过期时间，也是理论上的任务执行时间，值越小，说明优先级越高，需要优先执行
  var expirationTime = startTime + timeout;

  var newTask: Task = {
    id: taskIdCounter++,
    callback,
    priorityLevel,
    startTime,
    expirationTime,
    sortIndex: -1, // 调度执行任务的依据
  };

  // 开始时间 大于当前时间：说明是延期任务，先加入到延时队列timerQueue
  if (startTime > currentTime) {
    // 有delay的任务
    newTask.sortIndex = startTime; // sortIndex是把任务从timerQueue中取出来放到taskQueue中的依据
    push(timerQueue, newTask); // 暂时存到timerQueue，等晚点到了执行时间，再放到taskQueue，再执行任务
    if (peek(taskQueue) === null && newTask === peek(timerQueue)) {
      // All tasks are delayed, and this is the task with the earliest delay.
      // 所有任务都延迟了，而这是延迟时间最短的任务。
      if (isHostTimeoutScheduled) {
        // Cancel an existing timeout.
        // 取消现有的setTimeout
        cancelHostTimeout();
      } else {
        isHostTimeoutScheduled = true;
      }
      // Schedule a timeout.
      // setTimeout
      requestHostTimeout(handleTimeout, startTime - currentTime);
    }
  } else {
    // 没有delay的任务，直接加入任务队列
    newTask.sortIndex = expirationTime;
    push(taskQueue, newTask);
    // Schedule a host callback, if needed. If we're already performing work,
    // wait until the next time we yield.
    // 如果需要的话，调度一个HostCallback。如果我们已经在执行work，就等到下次我们让出控制权的时候。
    // 判断host回调任务是否已经被调度，以及是否正在工作中，只有host回调任务还没有被调度 且 当前并未在工作中；才会开启一个新的host回调任务
    // 【首次加载时，需要调度一个host回调任务】
    if (!isHostCallbackScheduled && !isPerformingWork) {
      isHostCallbackScheduled = true;
      // 设置host回调任务，触发localSetImmediate、MessageChannel或localSetTimeout，生成新的宏任务，在宏任务中执行工作循环workLoop
      requestHostCallback();
    }
  }

  return newTask;
}

function requestHostCallback() {
  if (!isMessageLoopRunning) {
    isMessageLoopRunning = true;
    // 调度异步执行，创建新的宏任务
    schedulePerformWorkUntilDeadline();
  }
}

// 在有效时间内执行工作
const performWorkUntilDeadline = () => {
  if (isMessageLoopRunning) {
    const currentTime = getCurrentTime();
    // Keep track of the start time so we can measure how long the main thread
    // has been blocked.
    // 记录了一个work的起始时间，其实就是一个时间切片的起始时间，是个时间戳
    startTime = currentTime;

    // If a scheduler task throws, exit the current browser task so the
    // error can be observed.
    //
    // Intentionally not using a try-catch, since that makes some debugging
    // techniques harder. Instead, if `flushWork` errors, then `hasMoreWork` will
    // remain true, and we'll continue the work loop.
    let hasMoreWork = true;
    try {
      // 根据返回判断是否还有工作
      hasMoreWork = flushWork(currentTime);
    } finally {
      if (hasMoreWork) {
        // 如果还有任务,则又触发调度宏任务事件，生成新的宏任务，即在下一个event loop中继续执行任务
        schedulePerformWorkUntilDeadline();
      } else {
        isMessageLoopRunning = false;
      }
    }
  }
  // Yielding to the browser will give it a chance to paint, so we can
  // reset this.
  needsPaint = false;
};

function flushWork(initialTime: number) {
  // We'll need a host callback the next time work is scheduled.
  isHostCallbackScheduled = false;
  if (isHostTimeoutScheduled) {
    // We scheduled a timeout but it's no longer needed. Cancel it.
    isHostTimeoutScheduled = false;
    cancelHostTimeout();
  }

  isPerformingWork = true;
  const previousPriorityLevel = currentPriorityLevel;
  try {
    return workLoop(initialTime);
  } finally {
    currentTask = null;
    currentPriorityLevel = previousPriorityLevel;
    isPerformingWork = false;
  }
}

// 有很多task，每个task都有一个callback，callback执行完了，就执行下一个task
// 一个work就是一个时间切片内执行的一些task
// 时间切片要循环，就是work要循环
// 返回为true，表示还有任务没有执行完，需要继续执行
function workLoop(initialTime: number) {
  let currentTime = initialTime;
  // 如果timerQueue中有*有效任务*到达执行时间，就放到taskQueue中
  advanceTimers(currentTime);
  // 从任务队列中取出队列第一个任务【注意：taskQueue中是按任务的到期时间expirationTime排序的，越小越先执行】
  currentTask = peek(taskQueue);
  // 循环从taskQueue中取出任务
  while (currentTask !== null) {
    /**
     * 【重点判断】
     * 1，如果当前任务到期时间 大于 当前时间，说明任务还未过期
     * 2，shouldYieldToHost为true应该暂停
     * 总结：如果同时满足这两个条件，即任务还没过期，但是没有剩余可执行时间了，就应该跳出本次工作循环，
     * 让出主线程，交给渲染流水线，等待下一个宏任务执行task
     */
    if (currentTask.expirationTime > currentTime && shouldYieldToHost()) {
      break;
    }
    // 执行任务
    const callback = currentTask.callback;
    if (typeof callback === 'function') {
      // 有效的任务
      currentTask.callback = null;
      currentPriorityLevel = currentTask.priorityLevel;
      // 是否属于过期的任务，可能存在还没过期的任务。
      const didUserCallbackTimeout = currentTask.expirationTime <= currentTime;
      // 执行任务
      const continuationCallback = callback(didUserCallbackTimeout);
      currentTime = getCurrentTime();
      if (typeof continuationCallback === 'function') {
        // 如果执行完后又返回了 function，赋值给当前任务的callback
        currentTask.callback = continuationCallback;
        advanceTimers(currentTime);
        return true;
      } else {
        // 否则的话，将当前任务移除。中断在这个位置发生，高优先任务会把低优先任务的callback置空。
        if (currentTask === peek(taskQueue)) {
          pop(taskQueue);
        }
        advanceTimers(currentTime);
      }
    } else {
      pop(taskQueue);
    }
    currentTask = peek(taskQueue);
  }
  // Return whether there's additional work
  if (currentTask !== null) {
    // 返回是否还有任务
    return true;
  } else {
    // 说明 currentTask 执行完了
    const firstTimer = peek(timerQueue);
    if (firstTimer !== null) {
      // 处理 timerQueue
      requestHostTimeout(handleTimeout, firstTimer.startTime - currentTime);
    }
    return false;
  }
}

// Scheduler periodically yields in case there is other work on the main
// thread, like user events. By default, it yields multiple times per frame.
// It does not attempt to align with frame boundaries, since most tasks don't
// need to be frame aligned; for those that do, use requestAnimationFrame.
let frameInterval = frameYieldMs;
const continuousInputInterval = continuousYieldMs;
const maxInterval = maxYieldMs;
let startTime = -1;

const continuousOptions = {includeContinuous: enableIsInputPendingContinuous};

function advanceTimers(currentTime: number) {
  // Check for tasks that are no longer delayed and add them to the queue.
  let timer = peek(timerQueue);
  while (timer !== null) {
    if (timer.callback === null) {
      // 无效的任务
      // Timer was cancelled.
      pop(timerQueue);
    } else if (timer.startTime <= currentTime) {
      // 有效的任务
      // 任务已到达开始时间，转入taskQueue中
      // Timer fired. Transfer to the task queue.
      pop(timerQueue);
      timer.sortIndex = timer.expirationTime;
      push(taskQueue, timer);
    } else {
      // Remaining timers are pending.
      return;
    }
    timer = peek(timerQueue);
  }
}

function handleTimeout(currentTime: number) {
  isHostTimeoutScheduled = false;
  // 把延迟任务从timerQueue中推入taskQueue
  advanceTimers(currentTime);

  if (!isHostCallbackScheduled) {
    if (peek(taskQueue) !== null) {
      isHostCallbackScheduled = true;
      requestHostCallback();
    } else {
      const firstTimer = peek(timerQueue);
      if (firstTimer !== null) {
        requestHostTimeout(handleTimeout, firstTimer.startTime - currentTime);
      }
    }
  }
}

function cancelCallback(task: Task) {
  // Null out the callback to indicate the task has been canceled. (Can't
  // remove from the queue because you can't remove arbitrary nodes from an
  // array based heap, only the first one.)
  task.callback = null;
}

function getCurrentPriorityLevel(): PriorityLevel {
  return currentPriorityLevel;
}

function requestHostTimeout(
  callback: (currentTime: number) => void,
  ms: number,
) {
  taskTimeoutID = localSetTimeout(() => {
    callback(getCurrentTime());
  }, ms);
}

function cancelHostTimeout() {
  localClearTimeout(taskTimeoutID);
  taskTimeoutID = ((-1: any): TimeoutID);
}

export {
  ImmediatePriority,
  UserBlockingPriority,
  NormalPriority,
  IdlePriority,
  LowPriority,
  scheduleCallback,
  cancelCallback,
  getCurrentPriorityLevel,
  shouldYieldToHost as unstable_shouldYield,
  getCurrentTime,
};

// !3. commit
// 我们现在有了一个一致的树。下一步要么是 commit，要么是，如果有什么被暂停了，就等待一段时间后再 commit。
root.finishedWork = finishedWork;
root.finishedLanes = lanes;
finishConcurrentRender(root, exitStatus, finishedWork, lanes);

function finishConcurrentRender(
  root: FiberRoot,
  exitStatus: RootExitStatus,
  finishedWork: Fiber,
  lanes: Lanes,
) {
  // ...
  commitRootWhenReady(
      root,
      finishedWork,
      workInProgressRootRecoverableErrors,
      workInProgressTransitions,
      workInProgressRootDidIncludeRecursiveRenderUpdate,
      lanes,
      workInProgressDeferredLane,
  );
}

function commitRootWhenReady(
  root: FiberRoot,
  finishedWork: Fiber,
  recoverableErrors: Array<CapturedValue<mixed>> | null,
  transitions: Array<Transition> | null,
  didIncludeRenderPhaseUpdate: boolean,
  lanes: Lanes,
  spawnedLane: Lane,
) {
  // ...

  // Otherwise, commit immediately.
  commitRoot(
    root,
    recoverableErrors,
    transitions,
    didIncludeRenderPhaseUpdate,
    spawnedLane,
  );
}

function commitRoot(
  root: FiberRoot,
  recoverableErrors: null | Array<CapturedValue<mixed>>,
  transitions: Array<Transition> | null,
  didIncludeRenderPhaseUpdate: boolean,
  spawnedLane: Lane,
) {
  // TODO: This no longer makes any sense. We already wrap the mutation and
  // layout phases. Should be able to remove.
  const previousUpdateLanePriority = getCurrentUpdatePriority();
  const prevTransition = ReactCurrentBatchConfig.transition;

  try {
    ReactCurrentBatchConfig.transition = null;
    setCurrentUpdatePriority(DiscreteEventPriority);
    commitRootImpl(
      root,
      recoverableErrors,
      transitions,
      didIncludeRenderPhaseUpdate,
      previousUpdateLanePriority,
      spawnedLane,
    );
  } finally {
    ReactCurrentBatchConfig.transition = prevTransition;
    setCurrentUpdatePriority(previousUpdateLanePriority);
  }

  return null;
}

function commitRootImpl(
  root: FiberRoot,
  recoverableErrors: null | Array<CapturedValue<mixed>>,
  transitions: Array<Transition> | null,
  didIncludeRenderPhaseUpdate: boolean,
  renderPriorityLevel: EventPriority,
  spawnedLane: Lane,
) {

  // ...

  const finishedWork = root.finishedWork;
  const lanes = root.finishedLanes;

  // ...

  if (
    (finishedWork.subtreeFlags & PassiveMask) !== NoFlags ||
    (finishedWork.flags & PassiveMask) !== NoFlags
  ) {
    if (!rootDoesHavePassiveEffects) {
      rootDoesHavePassiveEffects = true;
      pendingPassiveEffectsRemainingLanes = remainingLanes;

      pendingPassiveTransitions = transitions;
      scheduleCallback(NormalSchedulerPriority, () => {
        // ! 1. 异步执行 passive effects
        flushPassiveEffects();
        return null;
      });
    }
  }

  // 检查HostFiber的子孙元素是存在副作用
  const subtreeHasEffects =
    (finishedWork.subtreeFlags &
      (BeforeMutationMask | MutationMask | LayoutMask | PassiveMask)) !==
    NoFlags;
  // 检查HostFiber自身存在副作用
  const rootHasEffect =
    (finishedWork.flags &
      (BeforeMutationMask | MutationMask | LayoutMask | PassiveMask)) !==
    NoFlags;

  // 任何一个有副作用，说明需要更新，进入commit逻辑
  if (subtreeHasEffects || rootHasEffect) {
    const prevTransition = ReactCurrentBatchConfig.transition;
    ReactCurrentBatchConfig.transition = null;
    // 获取当前更新优先级
    const previousPriority = getCurrentUpdatePriority();
    // 设置同步优先级，commit必须同步执行
    setCurrentUpdatePriority(DiscreteEventPriority);
    // 当前上下文
    const prevExecutionContext = executionContext;

    // ! 2. 进入commit阶段
    executionContext |= CommitContext;

    // 在调用生命周期之前将其重置为null
    ReactCurrentOwner.current = null;

    // ! 3. BeforeMutation阶段【这个阶段执行与flags相关的副作用】
    const shouldFireAfterActiveInstanceBlur = commitBeforeMutationEffects(
      root,
      finishedWork,
    );

    // ...

    // ! 4. mutation阶段 (完成真实的dom渲染，更新页面)
    commitMutationEffects(root, finishedWork, lanes);

    // 渲染后，重置container容器信息
    resetAfterCommit(root.containerInfo);

    // 根据Fiber双缓冲机制，完成Current Fiber Tree的切换
    // 其实也并不一定叫切换，就是将最新work内容存储为当前的内容，下一次的work就可以利用当前的内容
    // 注意：到这里是页面已经完成了更新渲染，这个交互Fiber Tree是为了保留最新的Tree，提供给下次更新使用
    // 同时也方便调用生命周期钩子时是最新的DOM
    root.current = finishedWork;

    // ! 5. layout阶段
    commitLayoutEffects(finishedWork, root, lanes);

    // ...

  } else {
    // No effects.
    root.current = finishedWork;
  }

  // ...

  return null;
}

executionContext |= CommitContext

export function commitBeforeMutationEffects(
  root: FiberRoot,
  firstChild: Fiber,
): boolean {
  focusedInstanceHandle = prepareForCommit(root.containerInfo);

  // 设置第一个处理的节点为 hostFiber
  nextEffect = firstChild;
  // 提交开始
  commitBeforeMutationEffects_begin();

  const shouldFire = shouldFireAfterActiveInstanceBlur;
  shouldFireAfterActiveInstanceBlur = false;
  focusedInstanceHandle = null;

  return shouldFire;
}

function commitBeforeMutationEffects_begin() {
  // while循环，处理所有节点
  while (nextEffect !== null) {
    const fiber = nextEffect;
    // 取出子节点， 刚开始是hostFiber节点的child： 即App 组件
    const child = fiber.child;
    // 如果该fiber的子节点存在BeforeMutation阶段相关的flgas标记 且 child不为null;  则继续循环，
    if (
      (fiber.subtreeFlags & BeforeMutationMask) !== NoFlags &&
      child !== null
    ) {
      child.return = fiber;
      // 设置child为下一个处理的节点
      nextEffect = child;
    } else {
      // 只有当fiber的子节点不存在BeforeMutation阶段相关的flgas标记 且 child为null; 【叶子节点】
      // 和reconciler流程一样，第一个进入complete工作的都是【div react源码调试】节点
      commitBeforeMutationEffects_complete();
    }
  }
}

function commitBeforeMutationEffects_complete() {
  while (nextEffect !== null) {
    const fiber = nextEffect;
    setCurrentDebugFiberInDEV(fiber);
    try {
      // 处理当前节点的副作用
      commitBeforeMutationEffectsOnFiber(fiber);
    } catch (error) {
      captureCommitPhaseError(fiber, fiber.return, error);
    }
    resetCurrentDebugFiberInDEV();
    // 取出兄弟节点
    const sibling = fiber.sibling;
    if (sibling !== null) {
      sibling.return = fiber.return;
      // 将兄弟节点设置为下一个nextEffect 【回到begin工作】
      nextEffect = sibling;
      return;
    }

    nextEffect = fiber.return;
  }
}