300 行代码实现 React 的调度器 Scheduler

简介: 说是实现,但其实我们只是在 React Scheduler 源码的基础上进行了简化,省略掉一些繁琐的细节,添加了丰富的注释,保证代码可直接执行。大家可以复制代码到编辑器中,直接运行,非常适合学习 React 源码用。

源码 Schedule.js


// 引入最小堆封装代码
import {push, pop, peek} from './ScheduleMinHeap.js';
// 浏览器提供的 API,获取从 time origin(当前文档生命周期的开始节点时间) 之后到当前调用时经过的时间,它以一个恒定的速率慢慢增加的,不会受到系统时间的影响,具体参考:https://juejin.cn/post/7171633315336683528
let getCurrentTime = () => performance.now();
// Scheduler 优先级划分,数字越小优先级越高,0 表示没有优先级
const NoPriority = 0;
const ImmediatePriority = 1;
const UserBlockingPriority = 2;
const NormalPriority = 3;
const LowPriority = 4;
const IdlePriority = 5;
// Scheduler 根据优先级设置的对应 timeout 时间,越小越紧急
// 在 React 中,任务是可以被打断的,但是任务不能一直被打断,所以要设置一个超时时间,过了这个时间就必须立刻执行
// timeout 就表示超时时间
var IMMEDIATE_PRIORITY_TIMEOUT = -1;
var USER_BLOCKING_PRIORITY_TIMEOUT = 250;
var NORMAL_PRIORITY_TIMEOUT = 5000;
var LOW_PRIORITY_TIMEOUT = 10000;
// 为什么是 1073741823,查看:https://juejin.cn/post/7171633315336683528
var IDLE_PRIORITY_TIMEOUT = 1073741823;
// 普通任务队列,它是一个最小堆结构,最小堆查看:https://juejin.cn/post/7168283003037155359
var taskQueue = [];
// 延时任务队列,它同样是一个最小堆结构
var timerQueue = [];
// taskId
var taskIdCounter = 1;
// 任务队列是否正在被遍历执行,workLoop 执行前为 true,执行完成后改为 false
var isPerformingWork = false;
// 是否有正在执行的 requestHostCallback,它会在 requestHostCallback 调用前设为 true,workLoop 执行前改为 false
var isHostCallbackScheduled = false;
// 是否有正在执行的 requestHostTimeout,它会在 requestHostTimeout 执行前设为 true,cancenlHostTimeout 和 handleTimeout 中设为 false
var isHostTimeoutScheduled = false;
// message loop 是否正在执行,它会在 schedulePerformWorkUntilDeadline 前设为 true,在任务队列执行完毕后设为 false
let isMessageLoopRunning = false;
// 记录 requestHostCallback 执行时传入的 callback 函数,也就是 flushWork
let scheduledHostCallback = null;
// 用于 cancelHostTimeout 取消 requestHostTimeout
let taskTimeoutID = -1;
// 记录当前正在执行的任务
var currentTask = null;
var currentPriorityLevel = NormalPriority;
// 这里是调度的开始
function unstable_scheduleCallback(priorityLevel, callback, options) {
  var currentTime = getCurrentTime();
  // 任务被安排调度的时间,相当于去银行时的点击排号机器的那个时间
  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 {
    startTime = currentTime;
  }
  // 任务不能一直被打断,timeout 表示这个任务的超时时间
  var timeout;
  switch (priorityLevel) {
    case ImmediatePriority:
      timeout = IMMEDIATE_PRIORITY_TIMEOUT;
      break;
    case UserBlockingPriority:
      timeout = USER_BLOCKING_PRIORITY_TIMEOUT;
      break;
    case IdlePriority:
      timeout = IDLE_PRIORITY_TIMEOUT;
      break;
    case LowPriority:
      timeout = LOW_PRIORITY_TIMEOUT;
      break;
    case NormalPriority:
    default:
      timeout = NORMAL_PRIORITY_TIMEOUT;
      break;
  }
  // 任务的过期时间 = 开始调度的时间 + 超时时间
  var expirationTime = startTime + timeout;
  // 这就是储存在任务队列(taskQueue 和 timerQueue)中的任务对象
  var newTask = {
    id: taskIdCounter++,
    callback,
    priorityLevel,
    startTime,
    expirationTime,
    sortIndex: -1,
  };
  // 如果 startTime > currentTime,说明是延时任务,将其放到 timerQueue
  if (startTime > currentTime) {
    newTask.sortIndex = startTime;
    // 这个 push 是封装的最小堆 push 方法,将元素追加到数组后,它会再进行一个排序,保证最小值在数组的第一个
    push(timerQueue, newTask);
    // peek(taskQueue) 获取 taskQueue 的第一个任务,因为是最小堆结构,获取的是最紧急的任务
    // 这个逻辑是在 taskQueue 为空的情况下才会调用,这是因为 taskQueue 不为空的情况下,它会在每个任务执行的时候都会遍历一下 timerQueue,将到期的任务移到 taskQueue
    // newTask === peek(timerQueue) 表示新创建的任务就是最早的要安排调度的延时任务
    if (peek(taskQueue) === null && newTask === peek(timerQueue)) {
      // 保证最多只有一个 requestHostTimeout 在执行
      if (isHostTimeoutScheduled) {
        cancelHostTimeout();
      } else {
        isHostTimeoutScheduled = true;
      }
      // requestHostTimeout 本质是一个 setTimeout,时间到后,执行 handleTimeout
      requestHostTimeout(handleTimeout, startTime - currentTime);
    }
  }
  // 如果是正常任务,将其放到 taskQueue
  else {
    newTask.sortIndex = expirationTime;
    push(taskQueue, newTask);
    // 如果没有正在执行的 requestHostCallback 并且任务队列也没有被执行
    if (!isHostCallbackScheduled && !isPerformingWork) {
      isHostCallbackScheduled = true;
      requestHostCallback(flushWork);
    }
  }
  return newTask;
}
// 你可以把这个函数理解为 requestIdleCallback,都实现了空闲时期执行代码
function requestHostCallback(callback) {
  // 将 callback 函数存为全局变量,传入的是 flushWork 这个函数
  scheduledHostCallback = callback;
  if (!isMessageLoopRunning) {
    isMessageLoopRunning = true;
    schedulePerformWorkUntilDeadline();
  }
}
const channel = new MessageChannel();
const port = channel.port2;
channel.port1.onmessage = performWorkUntilDeadline;
// 借助 Message Channel,让出线程,告诉浏览器登空闲了再执行任务队列
function schedulePerformWorkUntilDeadline() {
  port.postMessage(null);
};
// 批量任务的开始时间
// React 并不是每一个任务执行完都执行 schedulePerformWorkUntilDeadline 让出线程的,而是执行完一个任务,看看过了多久,如果时间不超过 5ms,那就再执行一个任务,等做完一个任务,发现过了 5ms,这才让出线程,所以 React 是一批一批任务执行的,startTime 记录的是这一批任务的开始时间,而不是单个任务的开始时间。
var startTime = -1;
function performWorkUntilDeadline() {
  // scheduledHostCallback 就是 flushWork 这个函数
  if (scheduledHostCallback !== null) {
    const currentTime = getCurrentTime();
    startTime = currentTime;
    const hasTimeRemaining = true;
    let hasMoreWork = true;
    try {
      hasMoreWork = scheduledHostCallback(hasTimeRemaining, currentTime);
    } finally {
      if (hasMoreWork) {
        // 如果在一个时间切片里没有完成所有任务,那就执行 schedulePerformWorkUntilDeadline,让出线程,等浏览器空闲了再继续执行
        schedulePerformWorkUntilDeadline();
      } else {
        isMessageLoopRunning = false;
        scheduledHostCallback = null;
      }
    }
  } else {
    isMessageLoopRunning = false;
  }
};
function flushWork(hasTimeRemaining, initialTime) {
  isHostCallbackScheduled = false;
  // 定时器的目的表面上是为了保证最早的延时任务准时安排调度,实际上是为了保证 timerQueue 中的任务都能被执行。定时器到期后,我们会执行 advanceTimers 和 flushWork,flushWork 中会执行 workLoop,workLoop 中会将 taskQueue 中的任务不断执行,当 taskQueue 执行完毕后,workLoop 会选择 timerQueue 中的最早的任务重新设置一个定时器。所以如果 flushWork 执行了,定时器也就没有必要了,所以可以取消了。
  if (isHostTimeoutScheduled) {
    isHostTimeoutScheduled = false;
    cancelHostTimeout();
  }
  isPerformingWork = true;
  const previousPriorityLevel = currentPriorityLevel;
  try {
      return workLoop(hasTimeRemaining, initialTime);
  } finally {
    currentTask = null;
    currentPriorityLevel = previousPriorityLevel;
    isPerformingWork = false;
  }
}
// 遍历 taskQueue,执行任务
function workLoop(hasTimeRemaining, initialTime) {
  console.log('workLoop start')
  let currentTime = initialTime;
  // 检查 timerQueue 中的任务,将到期的任务转到 taskQueue 中
  advanceTimers(currentTime);
  currentTask = peek(taskQueue);
  while (currentTask !== null) {
    // 如果任务还没有到过期时间并且 shouldYieldToHost 返回 true
    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();
      // React 中单个任务在执行的时候,也是可以被打断的,如果单个任务执行的时候被打断,会返回一个函数
      // 这个任务被打断了
      if (typeof continuationCallback === 'function') {
        currentTask.callback = continuationCallback;
      }
      // 这个任务执行完毕
      else {
        if (currentTask === peek(taskQueue)) {
          pop(taskQueue);
        }
      }
      // 检查任务队列
      advanceTimers(currentTime);
    }
    // 说明任务执行完毕
    else {
      pop(taskQueue);
    }
    // 执行下一个任务
    currentTask = peek(taskQueue);
  }
  if (currentTask !== null) {
    return true;
  } else {
    // 如果 taskQueue 空了,timerQueue 中的最先执行的任务还没有到时间,那就执行一个 requestHostTimeout 定时器,保证准时执行
    const firstTimer = peek(timerQueue);
    if (firstTimer !== null) {
      requestHostTimeout(handleTimeout, firstTimer.startTime - currentTime);
    }
    return false;
  }
}
// 检查 timerQueue 中的任务,将到期的任务转到 taskQueue 中
function advanceTimers(currentTime) {
  let timer = peek(timerQueue);
  while (timer !== null) {
     // 任务被取消了
    if (timer.callback === null) {
      pop(timerQueue);
    }
    // //任务到期就转到 taskQueue 中
    else if (timer.startTime <= currentTime) {
      pop(timerQueue);
      timer.sortIndex = timer.expirationTime;
      push(taskQueue, timer);
    } else {
      return;
    }
    timer = peek(timerQueue);
  }
}
// 默认时间切片为 5ms
let frameInterval = 5;
// 判断是否让出线程,主要看这批任务自开始过了多久,超过了切片时间,就让出线程
function shouldYieldToHost() {
  const timeElapsed = getCurrentTime() - startTime;
  if (timeElapsed < frameInterval) {
    return false;
  }
  return true;
}
function requestHostTimeout(callback, ms) {
  taskTimeoutID = setTimeout(() => {
    callback(getCurrentTime());
  }, ms);
}
function cancelHostTimeout() {
  clearTimeout(taskTimeoutID);
  taskTimeoutID = -1;
}
function handleTimeout(currentTime) {
  isHostTimeoutScheduled = false;
  advanceTimers(currentTime);
  if (!isHostCallbackScheduled) {
    if (peek(taskQueue) !== null) {
      isHostCallbackScheduled = true;
      requestHostCallback(flushWork);
    }
    // 延时任务可能被取消了
    else {
      const firstTimer = peek(timerQueue);
      if (firstTimer !== null) {
        requestHostTimeout(handleTimeout, firstTimer.startTime - currentTime);
      }
    }
  }
}


源码 ScheduleMinHeap.js


// 源码地址:https://github.com/facebook/react/blob/main/packages/scheduler/src/SchedulerMinHeap.js
export function push(heap, node) {
  const index = heap.length;
  heap.push(node);
  siftUp(heap, node, index);
}
export function peek(heap) {
  return heap.length === 0 ? null : heap[0];
}
export function pop(heap) {
  if (heap.length === 0) {
    return null;
  }
  const first = heap[0];
  // JavaScript 的 pop 方法删除并返回数组的最后一个元素
  const last = heap.pop();
  if (last !== first) {
    heap[0] = last;
    siftDown(heap, last, 0);
  }
  return first;
}
function siftUp(heap, node, i) {
  let index = i;
  while (index > 0) {
    // 获取父节点的索引位置
    const parentIndex = (index - 1) >>> 1;
    const parent = heap[parentIndex];
    if (compare(parent, node) > 0) {
      // 如果父节点更大,就交换位置
      heap[parentIndex] = node;
      heap[index] = parent;
      index = parentIndex;
    } else {
      // 直到父节点更小,就退出
      return;
    }
  }
}
function siftDown(heap, node, i) {
  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];
    // 如果 left 比 node 小
    if (compare(left, node) < 0) {
      // 如果 right 比 left 还小,说明 right 最小,right 与 node 交换
      if (rightIndex < length && compare(right, left) < 0) {
        heap[index] = right;
        heap[rightIndex] = node;
        index = rightIndex;
      }
      // 说明 left 最小,left 与 node 交换
      else {
        heap[index] = left;
        heap[leftIndex] = node;
        index = leftIndex;
      }
    }
    // 如果 left node 大,但 right 比 node 小,right 与 node 交换
    else if (rightIndex < length && compare(right, node) < 0) {
      heap[index] = right;
      heap[rightIndex] = node;
      index = rightIndex;
    } else {
      // 子元素都比 node 大
      return;
    }
  }
}
function compare(a, b) {
  // 首先比较 sortIndex,其次是 id
  const diff = a.sortIndex - b.sortIndex;
  return diff !== 0 ? diff : a.id - b.id;
}


测试代码


// 模拟函数的执行
const sleep = delay => {
  for (let start = Date.now(); Date.now() - start <= delay;) {}
}
unstable_scheduleCallback(3, () => {console.log(1)})
unstable_scheduleCallback(3, () => {
  console.log(2)
  sleep(10)
}, {
  delay: 10
})
unstable_scheduleCallback(3, () => {console.log(3)}, {
  delay: 10
})
unstable_scheduleCallback(3, () => {
  console.log(4)
  sleep(10)
})
unstable_scheduleCallback(3, () => {console.log(5)})


它的执行结果如下:

image.png

目录
相关文章
|
6月前
|
Web App开发 存储 前端开发
React 之 Scheduler 源码中的三个小知识点,看看你知不知道?
本篇补充讲解 Scheduler 源码中的三个小知识点。
118 0
|
6月前
|
前端开发 调度
高端操作:把 React Scheduler 掏出来单独用
高端操作:把 React Scheduler 掏出来单独用
|
6月前
|
前端开发 安全 调度
React 之 Scheduler 源码解读(下)
本篇我们接着《React 之 Scheduler 源码解读(上)》,讲解延时任务的执行源码。
76 0
|
6月前
|
前端开发 JavaScript API
React 之 Scheduler 源码解读(上)
React 之 Scheduler 源码解读(上)
108 0
|
6月前
|
设计模式 前端开发 数据可视化
【第4期】一文了解React UI 组件库
【第4期】一文了解React UI 组件库
349 0
|
6月前
|
存储 前端开发 JavaScript
【第34期】一文学会React组件传值
【第34期】一文学会React组件传值
72 0
|
6月前
|
前端开发
【第31期】一文学会用React Hooks组件编写组件
【第31期】一文学会用React Hooks组件编写组件
73 0
|
6月前
|
存储 前端开发 JavaScript
【第29期】一文学会用React类组件编写组件
【第29期】一文学会用React类组件编写组件
71 0
|
6月前
|
前端开发 开发者
【第26期】一文读懂React组件编写方式
【第26期】一文读懂React组件编写方式
61 0
|
6月前
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库,嵌套路由
React 的antd-mobile 组件库,嵌套路由
118 0