02.同步渲染

react-reconciler/src/ReactFiberSyncTaskQueue.js

import { DiscreteEventPriority, getCurrentUpdatePriority, setCurrentUpdatePriority } from "./ReactEventPriorities";

/** 同步队列 */
let syncQueue = null;
/** 是否正在执行同步队列 */
let isFlushingSyncQueue = false;

/**
 * 安排同步回调函数。
 * @param {Function} callback - 要调度的回调函数。
 */
export function scheduleSyncCallback(callback) {
  if (syncQueue === null) {
    syncQueue = [callback]
  } else {
    syncQueue.push(callback);
  }
}

/**
 * 执行并清空同步回调函数队列。
 * 这个函数会在同步模式下执行队列中的所有回调，并在完成后恢复之前的更新优先级。
 */
export function flushSyncCallbacks() {
  if (!isFlushingSyncQueue && syncQueue !== null) {
    isFlushingSyncQueue = true;
    let i = 0;
    /** 暂存当前的更新优先级 */
    const previousUpdatePriority = getCurrentUpdatePriority();
    try {
      const isSync = true;
      const queue = syncQueue;
      /** 把优先级设置为同步优先级 */
      setCurrentUpdatePriority(DiscreteEventPriority);
      for (; i < queue.length; i++) {
        let callback = queue[i];
        do {
          callback = callback(isSync);
        } while (callback !== null)
      }
      syncQueue = null;
    } finally {
      setCurrentUpdatePriority(previousUpdatePriority);
      isFlushingSyncQueue = false
    }
  }
}

function ensureRootIsScheduled(root) {
  const nextLanes = getNextLanes(root, NoLanes);
+  if (nextLanes === NoLanes) {
+    return;
+  }
  let newCallbackPriority = getHighestPriorityLane(nextLanes);
+  let newCallbackNode;
  if (newCallbackPriority === SyncLane) {
+    scheduleSyncCallback(performSyncWorkOnRoot.bind(null, root));
+    queueMicrotask(flushSyncCallbacks);
+    newCallbackNode = null;
  }
  ...
}

function performSyncWorkOnRoot(root) {
  const lanes = getNextLanes(root);
  renderRootSync(root, lanes);
  const finishedWork = root.current.alternate;
  root.finishedWork = finishedWork;
  commitRoot(root);
  return null;
}