// packages/react-dom/src/client/ReactDOMLegacy.js
function legacyRenderSubtreeIntoContainer(
  parentComponent: ?React$Component<any, any>,  children: ReactNodeList,  container: Container,  forceHydrate: boolean,  callback: ?Function,
) {
  // ...
  let root: RootType = (container._reactRootContainer: any);
  let fiberRoot;
  if (!root) {
    // 首次渲染時(shí)根節(jié)點(diǎn)不存在
    // 通過 legacyCreateRootFromDOMContainer 創(chuàng)建根節(jié)點(diǎn)、fiberRoot 和 rootFiber
    root = container._reactRootContainer = legacyCreateRootFromDOMContainer(
      container,
      forceHydrate,
    );
    fiberRoot = root._internalRoot;
    if (typeof callback === 'function') {
      const originalCallback = callback;
      callback = function() {
        const instance = getPublicRootInstance(fiberRoot);
        originalCallback.call(instance);
      };
    }
    // 非批量執(zhí)行更新流程
    unbatchedUpdates(() => {
      updateContainer(children, fiberRoot, parentComponent, callback);
    });
  } else {
    fiberRoot = root._internalRoot;
    if (typeof callback === 'function') {
      const originalCallback = callback;
      callback = function() {
        const instance = getPublicRootInstance(fiberRoot);
        originalCallback.call(instance);
      };
    }
    // 批量執(zhí)行更新流程
    updateContainer(children, fiberRoot, parentComponent, callback);
  }
  return getPublicRootInstance(fiberRoot);
}

// packages/react-dom/src/client/ReactDOMLegacy.js
export function updateContainer(
  element: ReactNodeList,  container: OpaqueRoot,  parentComponent: ?React$Component<any, any>,  callback: ?Function,
): Lane {
  // ...
  const current = container.current;
  const eventTime = requestEventTime(); // 獲取更新觸發(fā)的時(shí)間
  // ...
  const lane = requestUpdateLane(current); // 獲取任務(wù)優(yōu)先級
  if (enableSchedulingProfiler) {
    markRenderScheduled(lane);
  }
  const context = getContextForSubtree(parentComponent);
  if (container.context === null) {
    container.context = context;
  } else {
    container.pendingContext = context;
  }
  // ...
  const update = createUpdate(eventTime, lane); // 創(chuàng)建更新任務(wù)
  update.payload = {element};
  callback = callback === undefined ? null : callback;
  if (callback !== null) {
    // ...
    update.callback = callback;
  }
  enqueueUpdate(current, update); // 將任務(wù)推入更新隊(duì)列
  scheduleUpdateOnFiber(current, lane, eventTime); // schedule 進(jìn)行調(diào)度
  return lane;
}

// packages/react/src/ReactBaseClasses.js
Component.prototype.setState = function(partialState, callback) {
  invariant(
    typeof partialState === 'object' ||
      typeof partialState === 'function' ||
      partialState == null,
    'setState(...): takes an object of state variables to update or a ' +
      'function which returns an object of state variables.',
  );
  this.updater.enqueueSetState(this, partialState, callback, 'setState');
};

// packages/react-reconciler/src/ReactFiberClassComponent.old.js
const classComponentUpdater = {
  isMounted,
  enqueueSetState(inst, payload, callback) {
    const fiber = getInstance(inst);
    const eventTime = requestEventTime(); // 獲取更新觸發(fā)的時(shí)間
    const lane = requestUpdateLane(fiber); // 獲取任務(wù)優(yōu)先級
    const update = createUpdate(eventTime, lane); // 創(chuàng)建更新任務(wù)
    update.payload = payload;
    if (callback !== undefined && callback !== null) {
      if (__DEV__) {
        warnOnInvalidCallback(callback, 'setState');
      }
      update.callback = callback;
    }
    enqueueUpdate(fiber, update); // 將任務(wù)推入更新隊(duì)列
    scheduleUpdateOnFiber(fiber, lane, eventTime); // schedule 進(jìn)行調(diào)度
    // ...
    if (enableSchedulingProfiler) {
      markStateUpdateScheduled(fiber, lane);
    }
  },
  // ...
};

reconciler/src/ReactFiberClassComponent.old.js
const classComponentUpdater = {
  isMounted,
  // ...
  enqueueForceUpdate(inst, callback) {
    const fiber = getInstance(inst);
    const eventTime = requestEventTime(); // 獲取更新觸發(fā)的時(shí)間
    const lane = requestUpdateLane(fiber); // 獲取任務(wù)優(yōu)先級
    const update = createUpdate(eventTime, lane); // 創(chuàng)建更新
    update.tag = ForceUpdate;
    if (callback !== undefined && callback !== null) {
      if (__DEV__) {
        warnOnInvalidCallback(callback, 'forceUpdate');
      }
      update.callback = callback;
    }
    enqueueUpdate(fiber, update); // 將任務(wù)推進(jìn)更新隊(duì)列
    scheduleUpdateOnFiber(fiber, lane, eventTime); // 觸發(fā)更新調(diào)度
    // ...
    if (enableSchedulingProfiler) {
      markForceUpdateScheduled(fiber, lane);
    }
  },
};

// packages/react-reconciler/src/ReactFiberWorkLoop.old.js
export function requestEventTime() {
  if ((executionContext & (RenderContext | CommitContext)) !== NoContext) {
    // 在 react 執(zhí)行過程中，直接返回當(dāng)前時(shí)間
    return now();
  }
  // 如果不在 react 執(zhí)行過程中
  if (currentEventTime !== NoTimestamp) {
    // 正在執(zhí)行瀏覽器事件，返回上次的 currentEventTime
    return currentEventTime;
  }
  // react 中斷后首次更新，計(jì)算新的 currentEventTime
  currentEventTime = now();
  return currentEventTime;
}

// packages/react-reconciler/src/ReactFiberWorkLoop.old.js
export const NoContext = /*             */ 0b0000000;
const BatchedContext = /*               */ 0b0000001;
const EventContext = /*                 */ 0b0000010;
const DiscreteEventContext = /*         */ 0b0000100;
const LegacyUnbatchedContext = /*       */ 0b0001000;
const RenderContext = /*                */ 0b0010000;
const CommitContext = /*                */ 0b0100000;
export const RetryAfterError = /*       */ 0b1000000;
let executionContext: ExecutionContext = NoContext;

// packages/react-reconciler/src/SchedulerWithReactIntegration.old.js
export const now =
  initialTimeMs < 10000 ? Scheduler_now : () => Scheduler_now() - initialTimeMs;

// packages/react-reconciler/src/ReactFiberWorkLoop.old.js
export function requestUpdateLane(fiber: Fiber): Lane {
  // ...
  // 根據(jù)記錄下的事件的優(yōu)先級，獲取任務(wù)調(diào)度的優(yōu)先級
  const schedulerPriority = getCurrentPriorityLevel();
  // ...
  let lane;
  if (
    (executionContext & DiscreteEventContext) !== NoContext &&
    schedulerPriority === UserBlockingSchedulerPriority
  ) {
    // 如果是用戶阻塞級別的事件，則通過InputDiscreteLanePriority 計(jì)算更新的優(yōu)先級 lane
    lane = findUpdateLane(InputDiscreteLanePriority, currentEventWipLanes);
  } else {
    // 否則依據(jù)事件的優(yōu)先級計(jì)算 schedulerLanePriority
    const schedulerLanePriority = schedulerPriorityToLanePriority(
      schedulerPriority,
    );
    if (decoupleUpdatePriorityFromScheduler) {
      const currentUpdateLanePriority = getCurrentUpdateLanePriority();
    // 根據(jù)計(jì)算得到的 schedulerLanePriority，計(jì)算更新的優(yōu)先級 lane
    lane = findUpdateLane(schedulerLanePriority, currentEventWipLanes);
  }
  return lane;
}

// packages/react-reconciler/src/ReactFiberLane.js
export const SyncLanePriority: LanePriority = 15;
export const SyncBatchedLanePriority: LanePriority = 14;
const InputDiscreteHydrationLanePriority: LanePriority = 13;
export const InputDiscreteLanePriority: LanePriority = 12;
const InputContinuousHydrationLanePriority: LanePriority = 11;
export const InputContinuousLanePriority: LanePriority = 10;
const DefaultHydrationLanePriority: LanePriority = 9;
export const DefaultLanePriority: LanePriority = 8;
const TransitionHydrationPriority: LanePriority = 7;
export const TransitionPriority: LanePriority = 6;
const RetryLanePriority: LanePriority = 5;
const SelectiveHydrationLanePriority: LanePriority = 4;
const IdleHydrationLanePriority: LanePriority = 3;
const IdleLanePriority: LanePriority = 2;
const OffscreenLanePriority: LanePriority = 1;
export const NoLanePriority: LanePriority = 0;

// packages/react-reconciler/src/ReactUpdateQueue.old.js
export function createUpdate(eventTime: number, lane: Lane): Update<*> {
  const update: Update<*> = {
    eventTime, // 更新要出發(fā)的事件
    lane, // 優(yōu)先級
    tag: UpdateState, // 指定更新的類型，0更新 1替換 2強(qiáng)制更新 3捕獲性的更新
    payload: null, // 要更新的內(nèi)容，例如 setState 接收的第一個(gè)參數(shù)
    callback: null, // 更新完成后的回調(diào)
    next: null, // 指向下一個(gè)更新
  };
  return update;
}

// packages/react-reconciler/src/ReactUpdateQueue.old.js
export function enqueueUpdate<State>(fiber: Fiber, update: Update<State>) {
  // 獲取當(dāng)前 fiber 的更新隊(duì)列
  const updateQueue = fiber.updateQueue;
  if (updateQueue === null) {
    // 若 updateQueue 為空，表示 fiber 還未渲染，直接退出
    return;
  }
  const sharedQueue: SharedQueue<State> = (updateQueue: any).shared;
  const pending = sharedQueue.pending;
  if (pending === null) {
    // pending 為 null 時(shí)表示首次更新，創(chuàng)建循環(huán)列表
    update.next = update;
  } else {
    // 將 update 插入到循環(huán)列表中
    update.next = pending.next;
    pending.next = update;
  }
  sharedQueue.pending = update;
  // ...
}

// packages/react-reconciler/src/ReactFiberWorkLoop.old.js
export function scheduleUpdateOnFiber(
  fiber: Fiber,  lane: Lane,  eventTime: number,
) {
  // 檢查是否有循環(huán)更新
  // 避免例如在類組件 render 函數(shù)中調(diào)用了 setState 這種死循環(huán)的情況
  checkForNestedUpdates();
  // ...
  // 自底向上更新 child.fiberLanes
  const root = markUpdateLaneFromFiberToRoot(fiber, lane);
  // ...
  // 標(biāo)記 root 有更新，將 update 的 lane 插入到root.pendingLanes 中
  markRootUpdated(root, lane, eventTime);
  if (lane === SyncLane) { // 同步任務(wù)，采用同步渲染
    if (
      (executionContext & LegacyUnbatchedContext) !== NoContext &&
      (executionContext & (RenderContext | CommitContext)) === NoContext
    ) {
      // 如果本次是同步更新，并且當(dāng)前還未開始渲染
      // 表示當(dāng)前的 js 主線程空閑，并且沒有 react 任務(wù)在執(zhí)行
      // ...
      // 調(diào)用 performSyncWorkOnRoot 執(zhí)行同步更新任務(wù)
      performSyncWorkOnRoot(root);
    } else {
      // 如果本次時(shí)同步更新，但是有 react 任務(wù)正在執(zhí)行
      // 調(diào)用 ensureRootIsScheduled 去復(fù)用當(dāng)前正在執(zhí)行的任務(wù)，讓其將本次的更新一并執(zhí)行
      ensureRootIsScheduled(root, eventTime);
      schedulePendingInteractions(root, lane);
      // ...
  } else {
    // 如果本次更新是異步任務(wù)
    // ... 
    // 調(diào)用 ensureRootIsScheduled 執(zhí)行可中斷更新
    ensureRootIsScheduled(root, eventTime);
    schedulePendingInteractions(root, lane);
  }
  mostRecentlyUpdatedRoot = root;
}

// packages/react-reconciler/src/ReactFiberWorkLoop.old.js
function performSyncWorkOnRoot(root) {
  // ...
  exitStatus = renderRootSync(root, lanes);
  // ...
  commitRoot(root);
  // ...
}

// packages/react-reconciler/src/ReactFiberWorkLoop.old.js
function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
  // ...
  // 如果有正在執(zhí)行的任務(wù)，
  if (existingCallbackNode !== null) {
    const existingCallbackPriority = root.callbackPriority;
    if (existingCallbackPriority === newCallbackPriority) {
      // 任務(wù)優(yōu)先級沒改變，說明可以復(fù)用之前的任務(wù)一起執(zhí)行
      return;
    }
    // 任務(wù)優(yōu)先級改變了，說明不能復(fù)用。
    // 取消正在執(zhí)行的任務(wù)，重新去調(diào)度
    cancelCallback(existingCallbackNode);
  }
  // 進(jìn)行一個(gè)新的調(diào)度
  let newCallbackNode;
  if (newCallbackPriority === SyncLanePriority) {
    // 如果是同步任務(wù)優(yōu)先級，執(zhí)行 performSyncWorkOnRoot
    newCallbackNode = scheduleSyncCallback(
      performSyncWorkOnRoot.bind(null, root),
    );
  } else if (newCallbackPriority === SyncBatchedLanePriority) {
    // 如果是批量同步任務(wù)優(yōu)先級，執(zhí)行 performSyncWorkOnRoot
    newCallbackNode = scheduleCallback(
      ImmediateSchedulerPriority,
      performSyncWorkOnRoot.bind(null, root),
    );
  } else {
    // ...
    // 如果不是批量同步任務(wù)優(yōu)先級，執(zhí)行 performConcurrentWorkOnRoot
    newCallbackNode = scheduleCallback(
      schedulerPriorityLevel,
      performConcurrentWorkOnRoot.bind(null, root),
    );
  }
  // ...
}

// packages/react-reconciler/src/ReactFiberWorkLoop.old.js
function workLoopSync() {
  while (workInProgress !== null) {
    performUnitOfWork(workInProgress);
  }
}

// packages/react-reconciler/src/ReactFiberWorkLoop.old.js
function workLoopConcurrent() {
  while (workInProgress !== null && !shouldYield()) {
    performUnitOfWork(workInProgress);
  }
}

// packages/react-reconciler/src/ReactFiberWorkLoop.old.js
function performUnitOfWork(unitOfWork: Fiber): void {
  // ...
  const current = unitOfWork.alternate;
  // ...
  let next;
  if (enableProfilerTimer && (unitOfWork.mode & ProfileMode) !== NoMode) {
    // ...
    next = beginWork(current, unitOfWork, subtreeRenderLanes);
  } else {
    next = beginWork(current, unitOfWork, subtreeRenderLanes);
  }
  // ...
  if (next === null) {
    completeUnitOfWork(unitOfWork);
  } else {
    workInProgress = next;
  }
  ReactCurrentOwner.current = null;
}

// packages/react-reconciler/src/ReactFiberWorkLoop.old.js
let beginWork;
if (__DEV__ && replayFailedUnitOfWorkWithInvokeGuardedCallback) {
  beginWork = (current, unitOfWork, lanes) => {
    // ...
    try {
      return originalBeginWork(current, unitOfWork, lanes);
    } catch (originalError) {
      // ...
    }
  };
} else {
  beginWork = originalBeginWork;
}

// packages/react-reconciler/src/ReactFiberBeginWork.old.js
function beginWork(
  current: Fiber | null,  workInProgress: Fiber,  renderLanes: Lanes,
): Fiber | null {
  const updateLanes = workInProgress.lanes;
  workInProgress.lanes = NoLanes;
  // 針對 workInProgress 的tag，執(zhí)行相應(yīng)的更新
  switch (workInProgress.tag) {
    // ...
    case HostRoot:
      return updateHostRoot(current, workInProgress, renderLanes);
    case HostComponent:
      return updateHostComponent(current, workInProgress, renderLanes);
    // ...
  }
  // ...
}

// packages/react-reconciler/src/ReactFiberBeginWork.old.js
function updateHostRoot(current, workInProgress, renderLanes) {
  // ...
  const root: FiberRoot = workInProgress.stateNode;
  if (root.hydrate && enterHydrationState(workInProgress)) {
    // 若根 fiber 不存在，說明是首次渲染，調(diào)用 mountChildFibers
    // ...
    const child = mountChildFibers(
      workInProgress,
      null,
      nextChildren,
      renderLanes,
    );
    workInProgress.child = child;
  } else {
    // 若根 fiber 存在，調(diào)用 reconcileChildren
    reconcileChildren(current, workInProgress, nextChildren, renderLanes);
    resetHydrationState();
  }
  return workInProgress.child;
}

// packages/react-reconciler/src/ReactFiberWorkLoop.old.js
function completeUnitOfWork(unitOfWork: Fiber): void {
  let completedWork = unitOfWork;
  do {
    // ... 
    // 對節(jié)點(diǎn)進(jìn)行completeWork，生成DOM，更新props，綁定事件
    next = completeWork(current, completedWork, subtreeRenderLanes);
    if (
      returnFiber !== null &&
      (returnFiber.flags & Incomplete) === NoFlags
    ) {
      // 將當(dāng)前節(jié)點(diǎn)的 effectList 并入到父節(jié)點(diǎn)的 effectList
      if (returnFiber.firstEffect === null) {
        returnFiber.firstEffect = completedWork.firstEffect;
      }
      if (completedWork.lastEffect !== null) {
        if (returnFiber.lastEffect !== null) {
          returnFiber.lastEffect.nextEffect = completedWork.firstEffect;
        }
        returnFiber.lastEffect = completedWork.lastEffect;
      }
      // 將自身添加到 effectList 鏈，添加時(shí)跳過 NoWork 和 PerformedWork的 flags，因?yàn)檎嬲?commit 時(shí)用不到
      const flags = completedWork.flags;
      if (flags > PerformedWork) {
        if (returnFiber.lastEffect !== null) {
          returnFiber.lastEffect.nextEffect = completedWork;
        } else {
          returnFiber.firstEffect = completedWork;
        }
        returnFiber.lastEffect = completedWork;
      }
    }
  } while (completedWork !== null);
  // ...
}

scheduleCallback(
  schedulerPriorityLevel,
  performConcurrentWorkOnRoot.bind(null, root),
);

// packages/scheduler/src/Scheduler.js
function unstable_scheduleCallback(priorityLevel, callback, options) {
  // ...
  if (startTime > currentTime) {
    // 當(dāng)前任務(wù)已超時(shí)，插入超時(shí)隊(duì)列
    // ...
  } else {
    // 任務(wù)未超時(shí)，插入調(diào)度任務(wù)隊(duì)列
    newTask.sortIndex = expirationTime;
    push(taskQueue, newTask);
    // 符合更新調(diào)度執(zhí)行的標(biāo)志
    if (!isHostCallbackScheduled && !isPerformingWork) {
      isHostCallbackScheduled = true;
      // requestHostCallback 調(diào)度任務(wù)
      requestHostCallback(flushWork);
    }
  }
  return newTask;
}

// packages/scheduler/src/forks/SchedulerHostConfig.default.js
// 獲取當(dāng)前設(shè)備每幀的時(shí)長
forceFrameRate = function(fps) {
  // ...
  if (fps > 0) {
    yieldInterval = Math.floor(1000 / fps);
  } else {
    yieldInterval = 5;
  }
};
// 幀結(jié)束前執(zhí)行任務(wù)
const performWorkUntilDeadline = () => {
  if (scheduledHostCallback !== null) {
    const currentTime = getCurrentTime();
    // 更新當(dāng)前幀的結(jié)束時(shí)間
    deadline = currentTime + yieldInterval;
    const hasTimeRemaining = true;
    try {
      const hasMoreWork = scheduledHostCallback(
        hasTimeRemaining,
        currentTime,
      );
      // 如果還有調(diào)度任務(wù)就執(zhí)行
      if (!hasMoreWork) {
        isMessageLoopRunning = false;
        scheduledHostCallback = null;
      } else {
        // 沒有調(diào)度任務(wù)就通過 postMessage 通知結(jié)束
        port.postMessage(null);
      }
    } catch (error) {
      // ..
      throw error;
    }
  } else {
    isMessageLoopRunning = false;
  }
  needsPaint = false;
};
// 通過 MessageChannel 創(chuàng)建消息通道，實(shí)現(xiàn)任務(wù)調(diào)度通知
const channel = new MessageChannel();
const port = channel.port2;
channel.port1.onmessage = performWorkUntilDeadline;
// 通過 postMessage，通知 scheduler 已經(jīng)開始了幀調(diào)度
requestHostCallback = function(callback) {
  scheduledHostCallback = callback;
  if (!isMessageLoopRunning) {
    isMessageLoopRunning = true;
    port.postMessage(null);
  }
};

// packages/react-reconciler/src/ReactFiberWorkLoop.old.js
function workLoopConcurrent() {
  while (workInProgress !== null && !shouldYield()) {
    performUnitOfWork(workInProgress);
  }
}

// packages\scheduler\src\SchedulerPostTask.js
export function unstable_shouldYield() {
  return getCurrentTime() >= deadline;
}