前言

暑假也快结束了，开学大三又得天天上课了咧（！！），趁着最后的时间，看了一下React的源码（我靠，啃得我贼头疼），本文会按照我的理解叙述一下React中进行一次setState（改变状态）后的Scheduler（调度）是如何进行工作的，Scheduler是React实现时间切片和中断、恢复、取消任务Task等特性的重要模块。而且最重要的一个点是！！Scheduler是可以独立于React运行的一个模块！！！

开始

演示样例

function App() {
  const [count,setState]=useState(0)
  return (<>
    <button onClick={()=> {
      setState(1)
    }}>添加</button>
  <div>{count}</div>
  </>)
}

本文的内容会围绕于上面的onClick中触发的setState来展开。首先要明确Scheduler中的概念，Scheduler调度的单位是一个个Task,Task会被调度安排在合适的任务列表（timerQuece）中进行排队等待，在合适的时机（达到了过期时间）再去取出Task,并执行任务（也就是下面的performWorkUntilDeadline）。

先让我们通过浏览器的性能工具来概览一下这次调度过程中，涉及到的函数以及他们的调用顺序，至于他们的具体功能我们会在后面结合源码进行配合讲解。

performance调用截图

函数概览

按照流程一个一个

• scheduleUpdateOnFiber
• ensureRootIsScheduled
• unstable_scheduleCallback
• requestHostCallback
• performWorkUntilDeadline
• flushWork
• workLoop

调度者

dispatchAction

这个函数其实就是我们使用useState后返回数组中的第二个值被真实调用后正真调用的函数。代码如下：

function mountState<S>(
  initialState: (() => S) | S,
): [S, Dispatch<BasicStateAction<S>>] {
 // ....一些别的逻辑
  const dispatch: Dispatch<
    BasicStateAction<S>,
  > = (queue.dispatch = (dispatchAction.bind(
    null,
    currentlyRenderingFiber,
    queue,
  ): any));
  // dispatch是一个绑定了当前fiber的dispatchAction
  return [hook.memoizedState, dispatch];
}

现在进入真正的dispatchAction，函数概述：

1. 获取当前事件的触发时间
2. 创建一个新的update
3. 创建以update为内容的queue链表（挂载在当前fiber的memoizedState属性上）
4. 有一个对比新旧state的环节(省略)
5. 调用进入scheduleUpdateOnFiber

function dispatchAction<S, A>(
  fiber: Fiber,
  queue: UpdateQueue<S, A>,
  action: A,
) {
  // 获取当前事件的触发时间
  const eventTime = requestEventTime();

  const lane = requestUpdateLane(fiber);
  // 创建一个新的`update`
  const update: Update<S, A> = {
    lane,
    action,
    eagerReducer: null,
    eagerState: null,
    next: (null: any),
  };
  // 创建以`update`为内容的`queue`链表（挂载在当前fiber的memoizedState属性上）
  const pending = queue.pending;
  if (pending === null) {
    update.next = update;
  } else {
    update.next = pending.next;
    pending.next = update;
  }
  queue.pending = update;

  //省略代码.....
  
    // 开始调度更新，并进行一些判断
    scheduleUpdateOnFiber(fiber, lane, eventTime);
  }


  if (enableSchedulingProfiler) {
    markStateUpdateScheduled(fiber, lane);
  }
}

scheduleUpdateOnFiber

在这个函数里，要去判断本次更新要同步调用还是异步调度调用，如果主线程没有在处理事件并且优先级（lane === SyncLane），就那调用performSyncWorkOnRoot立刻开始处理更新(就是进入render阶段（构建新的fiber树）)，反之如果已经在处理render任务或者（lane !== SyncLane），则调用ensureRootIsScheduled判断是否需要中断切换调度任务：

export function scheduleUpdateOnFiber(
  fiber: Fiber,
  lane: Lane,
  eventTime: number,
) {
  
  //省略逻辑。。。。。

  // Scheduler优先级->React优先级
  const priorityLevel = getCurrentPriorityLevel();

  if (lane === SyncLane) { 
    if (
      (executionContext & LegacyUnbatchedContext) !== NoContext &&
      // Check if we're not already rendering
      
      (executionContext & (RenderContext | CommitContext)) === NoContext
    ) {
      schedulePendingInteractions(root, lane);
      // lane === SyncLane，调用performSyncWorkOnRoot开始执行同步任务
      performSyncWorkOnRoot(root);
    } else {
      ensureRootIsScheduled(root, eventTime);
      schedulePendingInteractions(root, lane);
      if (executionContext === NoContext) {
        resetRenderTimer();
        flushSyncCallbackQueue();
      }
    } 
  } else {
  // 省略代码.....
    // lane!==Sync，异步调度
    ensureRootIsScheduled(root, eventTime);
    schedulePendingInteractions(root, lane);
  }
  mostRecentlyUpdatedRoot = root;
}

ensureRootIsScheduled

这个函数会在root取下正在调度的任务。因为只有一个root，所以同时执行的任务只有一个；如果已经安排了任务（existingCallbackNode !== null），会比较新任务与旧任务的优先级，同优先级或者低优先级时，不需要中断任务。是高优先级时，则将原任务取消（cancelCallback），将高优update生成task(在unstable_scheduleCallback)加入taskQueue。每次有新的update时都会调用此函数。

function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {

  // 取下旧任务
  const existingCallbackNode = root.callbackNode;

  //省略。。。。。。
  
  // 如果存在旧任务，那么看一下能否复用
  // Check if there's an existing task. We may be able to reuse it.
  if (existingCallbackNode !== null) {
    // 取得旧任务的优先级
    const existingCallbackPriority = root.callbackPriority;
    //如果优先级相同，不添加新的调度然后进行return，再一次自定义事件中多次进行
    //setState（每一次都会生成update）优先级就是相同的，那React就只会在一次task
    //中执行完所有优先级相同的update，这样的结果就是能够让多次改变state只进行一次
    //re-render（一个task的完成会造成相应节点的re-render）
    if (existingCallbackPriority === newCallbackPriority) {
      // The priority hasn't changed. We can reuse the existing task. Exit.
      return;
    }
    // 优先级不同，那么就去掉原来任务，让高优任务插队执行
    cancelCallback(existingCallbackNode);
  }
  // Schedule a new callback.
  // 走到这说明必须要调度新的任务了
  let newCallbackNode;
  if (newCallbackPriority === SyncLanePriority) {
   // 省略。。。。
  } else if (newCallbackPriority === SyncBatchedLanePriority) {
    //省略。。。。
  } else {
    // newCallbackPriority对比过后最终走入这个分支（这里不考虑其余两个分支，
    // 主要是按本次的调用栈来讲解）
    // 优先级转换：newCallbackPriority->schedulerPriorityLevel
    const schedulerPriorityLevel = lanePriorityToSchedulerPriority(
      newCallbackPriority,
    );
    // 在这里生成新的调度任务（下面讲解）
    newCallbackNode = scheduleCallback(
      schedulerPriorityLevel,
      performConcurrentWorkOnRoot.bind(null, root),
    );
  }
  // 新生成的任务和任务优先级继续挂到root上，下一次有update触发本函数时，
  // 对比的就是本次挂上去的任务了
  root.callbackPriority = newCallbackPriority;
  root.callbackNode = newCallbackNode;
}

unstable_scheduleCallback

本函数根据传入的优先级和回调函数来生成Task。 两个参数的作用分别是，一：根据优先级priorityLevel来确定任务Task的过期时间（expirationTime = startTime + timeout）。当任务循环中发现Task达到了过期时间，就代表这个任务需要立刻执行了。第二个参数callback是作为一个newTask的属性，最后任务其实就是执行的这个callback。让我们回想一下调用时传入的什么？->performConcurrentWorkOnRoot.bind(null, root),是不是很眼熟？这个就是在浏览器performance中执行者真正调用的函数，那他又是在何时开始调用的呢？答案就是在本函数的结尾中requestHostTimeout发起的调用。 在函数的判断分支中，如果发现taskQueue是空的,那么就通过调用requestHostTimeout（本质其实就是一个settimeout执行回调）让一个timerTask达到过期时间，这样就刚好能够进入taskQueue。 补充：

• taskQueue：存放已经过期的Task
• timerQueue：存放还未过期的Task

function unstable_scheduleCallback(priorityLevel, callback, options) {


  // 获取当前时间，后面计算过期时间
  var currentTime = getCurrentTime();
  
  //省略。。。。。
  
  // 根据priorityLevel得到过期时间
  var timeout;
  switch (priorityLevel) {
    case ImmediatePriority:
      timeout = IMMEDIATE_PRIORITY_TIMEOUT; // -1
      break;
    case UserBlockingPriority:
      timeout = USER_BLOCKING_PRIORITY_TIMEOUT; // 250
      break;
    case IdlePriority:
      timeout = IDLE_PRIORITY_TIMEOUT; //  1073741823 ms
      break;
    case LowPriority:
      timeout = LOW_PRIORITY_TIMEOUT; // 10000
      break;
    case NormalPriority:
    default:
      timeout = NORMAL_PRIORITY_TIMEOUT; // 5000
      break;
  }
  
  // 计算过期时间
  var expirationTime = startTime + timeout;
  // 新建Task
  var newTask = {
    id: taskIdCounter++,
    callback,//最终Task执行的函数，其实就是performConcurrentWorkOnRoot
    priorityLevel,// 任务优先级
    startTime,// 任务开始时间
    expirationTime,// 任务过期时间
    sortIndex: -1,
  };
  if (enableProfiling) {
    newTask.isQueued = false;
  }
 
  if (startTime > currentTime) {
    // This is a delayed task.
    newTask.sortIndex = startTime;
    // 在timerQueue加入新的Task
    push(timerQueue, newTask);
    // taskQueue里面没有任务然后timerQueue里面有任务，说明过期任务已经执行完了，
    // 但是未过期任务还有任务未执行，此时我们需要一个方法去让过期任务刚好到了过期时间时，
    // 能够将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.
        // clearTimeout
        cancelHostTimeout();
      } else {
        isHostTimeoutScheduled = true;
      }
      // 等价于setTimeout(handleTimeout, startTime - currentTime)
      requestHostTimeout(handleTimeout, startTime - currentTime);
    }
  } else {
    // 走入这个分支说明这个任务过期了
    newTask.sortIndex = expirationTime;
    // 将newTask加入taskQueue
    push(taskQueue, newTask);
    if (enableProfiling) {
      markTaskStart(newTask, currentTime);
      newTask.isQueued = true;
    }
   // 如果没有任务在执行，那么直接执行任务，并将任务执行状态记录
   // isHostCallbackScheduled为true
    if (!isHostCallbackScheduled && !isPerformingWork) {
    // 任务执行者终于出现了！！！
    // 可以将requestHostCallback也想象成一个类似setTimeout的函数，
    // 但在浏览器环境使用的是`MessageChannel`
      requestHostCallback(flushWork);
    }
  }

  return newTask;
}

requestHostCallback

函数比较简单，直接就在注释中解释了：

// 新建一个channel实例
const channel = new MessageChannel();
const port = channel.port2;
// 将port1的onmessage（就是回调函数）赋值performWorkUntilDeadline，
// 那么向port1做出发信息的操作，就会执行onmessage
channel.port1.onmessage = performWorkUntilDeadline;
// unstable_scheduleCallback最后的执行函数
requestHostCallback = function(callback) {
  // 在这里赋值，最后会在赋值performWorkUntilDeadline调用
  scheduledHostCallback = callback;
  
  if (!isMessageLoopRunning) {
    isMessageLoopRunning = true;
    // 在这里偷偷的发信息告诉port1，该执行onmessage了
    port.postMessage(null);
  }
};

执行者

performWorkUntilDeadline

这个函数计算出本次执行时间的deadline，调用下一个执行者去执行任务（scheduledHostCallback），再判断任务是否已经全部完成，如果全部task完成，那么就将root上记录当前任务的字段置空，并告知全局变量当前没有再执行任务了。如果任务没有执行完。说明任务被中断了，此时将主线程让回给用户，调用port.postMessage(null)在下一次有空闲的继续执行任务，直到任务全部执行完毕！！！

const performWorkUntilDeadline = () => {
  
  // 往上翻一下，scheduledHostCallback就是在requestHostCallback中被赋值的
  if (scheduledHostCallback !== null) {
    const currentTime = getCurrentTime();
   // deadline就是当前时间+5ms，5ms之后达到了deadline，
   // 就会退出任务循环，让出浏览器js线程，去处理用户的新操作
    deadline = currentTime + yieldInterval;
    const hasTimeRemaining = true;
    try {
      // scheduledHostCallback就是截图中的flushWork，
      // 在里面如果因为达到了deadline而被打断时，返回true，表示还有任务（hasMoreWork），
      // 那就是走下面的分支
      // requestHostCallback函数里 scheduledHostCallback=callback->flushWork
      const hasMoreWork = scheduledHostCallback(
        hasTimeRemaining,
        currentTime,
      );
      if (!hasMoreWork) {
        // 任务执行完了，可以停下来咯!!
        isMessageLoopRunning = false;
        scheduledHostCallback = null;
      } else {
        // 如果还有，让出js主线程，等待下一次的执行
        port.postMessage(null);
      }
    } catch (error) {
      port.postMessage(null);
      throw error;
    }
  } else {
    isMessageLoopRunning = false;
  }
  needsPaint = false;
  enableLog && console.log('performWorkUntilDeadline end')
};

flushWork

function flushWork(hasTimeRemaining, initialTime) {
  
  if (enableProfiling) {
    markSchedulerUnsuspended(initialTime);
  }
  // We'll need a host callback the next time work is scheduled.
  isHostCallbackScheduled = false;
  // isHostTimeoutScheduled代表着刚刚我们为了让一个timerTask能够刚好到达过期，
  // 启动了一个setTimeout，但我们已经在执行任务了，执行完任务最终其实会去处理timerQueue，
  // 所以我们去取消掉这个定时器
  if (isHostTimeoutScheduled) {
    isHostTimeoutScheduled = false;
    cancelHostTimeout();
  }
  
  // 告诉说我们在执行任务了咧
  isPerformingWork = true;
  const previousPriorityLevel = currentPriorityLevel;
  try {
    if (enableProfiling) {
      try {
        // flushWork在一些处理过后其实执行的是workLoop
        return workLoop(hasTimeRemaining, initialTime);
      } catch (error) {
        if (currentTask !== null) {
          const currentTime = getCurrentTime();
          markTaskErrored(currentTask, currentTime);
          currentTask.isQueued = false;
        }
        throw error;
      }
    } else {
      // No catch in prod code path.
      return workLoop(hasTimeRemaining, initialTime);
    }
  } finally {
    currentTask = null;
    currentPriorityLevel = previousPriorityLevel;
    isPerformingWork = false;
    if (enableProfiling) {
      const currentTime = getCurrentTime();
      markSchedulerSuspended(currentTime);
    }
  }
}

workLoop

本文最后一个调用的函数了！任务的中断以及恢复都是在这里面实现的，首先让我们认识一下这个函数的返回值，如果为true，那么代表performWorkUntilDeadline的hasMoreWork会被赋值为true，代表当前的任务循环咧，要不就是有了更高的优先级任务，要不就是时间不够了咧（毕竟就5ms）要不就是有了用户操作（浏览器提供的api），被中断了，那么就会有任务未执行完。

function workLoop(hasTimeRemaining, initialTime) {
  
  let currentTime = initialTime;
  // 这个函数会整理timerQueue中的任务，然后放到taskQueue里面，
  // 知道是干嘛的就行，具体我就不讲了嘿嘿
  advanceTimers(currentTime);
  // 拿taskQueue过期最久的任务
  currentTask = peek(taskQueue);
  // 循环执行taskQueue里面的任务
  while (currentTask !== null) {
    // currentTask.expirationTime > currentTime 说明给你的5ms以及时间到了，给我退出执行喔
    // shouldYieldToHost() 
    if (
      currentTask.expirationTime > currentTime &&
      (!hasTimeRemaining || shouldYieldToHost())
    ) {
      // 中断了任务
      break;
    }
    // 执行任务
    const callback = currentTask.callback;
    if (typeof callback === 'function') {
      // 在执行了哇，先置空，别人就会知道我被执行了
      currentTask.callback = null;
      // 获取任务优先级
      currentPriorityLevel = currentTask.priorityLevel;
      const didUserCallbackTimeout = currentTask.expirationTime <= currentTime;
      markTaskRun(currentTask, currentTime);
      // 任务返回值
      const continuationCallback = callback(didUserCallbackTimeout);
      currentTime = getCurrentTime();
      if (typeof continuationCallback === 'function') {
        // callback中进行了一系列操作，里面也判断了要不要让出js线程
        // 如果deadline到了，或发生了别的事情，上面说的那些，那callback就会把自己return，
        // 导致走入这个分支，这样就做到了中断任务，
        // 赋值callback给currentTask，正常执行完的任务不会走这个逻辑，callback会是null
        currentTask.callback = continuationCallback;
        markTaskYield(currentTask, currentTime);
      } else {
        // 挺好的，任务执行完了
        if (enableProfiling) {
          markTaskCompleted(currentTask, currentTime);
          currentTask.isQueued = false;
        }
        if (currentTask === peek(taskQueue)) {
          // 执行完了，舍弃她
          pop(taskQueue);
        }
      }
      // 之前说过这个，将timerQueue检查一下，看看有没有得到taskQueue去的
      advanceTimers(currentTime);
    } else {
      // 还记得之前调度任务的插队吗，如果有高优任务进入，低优任务的callback会被置为null
      // 所以走这个分支
      pop(taskQueue);
    }
    // 取得新的currentTask
    currentTask = peek(taskQueue);
  }
  // 上面while的条件是currentTask !== null，那么走到这的唯一原因就是执行了break
  if (currentTask !== null) {
    // return true让hasMoreWork=true，告诉flushWork还有任务
    return true;
  } else {
    // timerQueue里面还有任务，继续给他搞个setTimeout能够刚好达到过期的时间
    const firstTimer = peek(timerQueue);
    if (firstTimer !== null) {
      requestHostTimeout(handleTimeout, firstTimer.startTime - currentTime);
    }
    return false;
  }
}

结语

这一次就写到这里噜，也不知道前面有没有什么出错的地方，希望能够指正一下！！