scheduler模块 - React源码解析

简述

React中的scheduler模块，主要用于React Fiber框架，为React提供任务调度功能。目前为止仍处于不稳定状态(unstable)。这个模块的代码相对比较简单，比较容易理解。

调度过程

1、任务编排：在scheduleCallback函数中，根据任务的开始时间(startTime)判断任务是否为延迟任务。如果任务为延迟任务，则任务放入定时器队列(timerQueue)；否则，则放入任务队(taskQueue)。

if (startTime > currentTime) {
    ...
    // 压入定时器堆
    push(timerQueue, newTask);
    ...
} else {
    ...
    // 压入任务堆
    push(taskQueue, newTask);
    ....
}

2、定时器：
当定时器队列不为空且任务队列为空时，将通过requestHostTimeout启动定时器，第一个时间间隔为最近的启动时间减去当前时间

if (peek(taskQueue) === null && newTask === peek(timerQueue)) {
      // 所有的任务都延迟执行，取最近的任务。
      if (isHostTimeoutScheduled) {
        // 取消已存在的超时句柄
        cancelHostTimeout();
      } else {
        isHostTimeoutScheduled = true;
      }
      // 设置超时
      requestHostTimeout(handleTimeout, startTime - currentTime);
    }

handleTimeout函数将处理第一个到来的延迟时间点，并调用advanceTimers处理定时器队列：
（1）跳过被取消的任务

if (timer.callback === null) {
      // Timer was cancelled.
      pop(timerQueue);
    }

（2）将到执行时间的任务放入任务队列(taskQueue)

if (timer.startTime <= currentTime) {
      // Timer fired. Transfer to the task queue.
      pop(timerQueue);
      timer.sortIndex = timer.expirationTime;
      push(taskQueue, timer);
      if (enableProfiling) {
        markTaskStart(timer, currentTime);
        timer.isQueued = true;
      }
    }

3、执行任务：
当任务队列不为空时，将会调用flushWork来执行任务，最终调用workLoop循环执行所有到时的任务。

if (peek(taskQueue) !== null) {
      isHostCallbackScheduled = true;
      requestHostCallback(flushWork);
}

当处理完所有的taskQueue时，并且定时任务队列不为空，将会重新调用requestHostTimeout启动定时器。

if (currentTask !== null) {
    return true;
  } else {
   // 所有到时执行任务都已处理完成
    let firstTimer = peek(timerQueue);
    if (firstTimer !== null) {
      requestHostTimeout(handleTimeout, firstTimer.startTime - currentTime);
    }
    return false;
  }

底层实现

堆
整个过程中，有两个队列：定时器队列(timerQueue)和任务队列(taskQueue)，其结构都为堆结构。堆的操作(push、pop、peek)定义在SchedulerMinHeap.js中。
异步调度
scheduler中异步执行的实现有两种，一种通过setTimeout实现，

requestHostCallback = function(cb) {
    if (_callback !== null) {
      // Protect against re-entrancy.
      setTimeout(requestHostCallback, 0, cb);
    } else {
      _callback = cb;
      setTimeout(_flushCallback, 0);
    }
  };

另一种通过MessageChannel。

requestHostCallback = function(callback) {
    scheduledHostCallback = callback;
    if (!isMessageLoopRunning) {
      isMessageLoopRunning = true;
      port.postMessage(null);
    }
  };

这两种方式都是macro task。但在浏览器支持的情况，会优先采用MessageChannel的方式，原因在于后者的性能优于前者(参考：setTimeout(0) vs window.postMessage vs MessagePort.postMessage)。
注：Vue中的顺序和这个有些不同： setImmediate > MessageChannel > Promise > setTimeout

获取当前时间
scheduler中获取当前时间也有两种，一种是performance.now，

getCurrentTime = () => performance.now();

另一种是

const initialTime = Date.now();
  getCurrentTime = function() {
    return Date.now() - initialTime;
  };

但在浏览器支持的情况，会优先采用第一种方式，第一种方式获取的时间精度更高（参考：performance.now() vs Date.now()）。