【React Scheduler源码第四篇】任务优先级及高优先级任务插队原理及源码手写

前端

2023-09-20 01:32:31

前言

在React Scheduler源码系列的前三篇文章中，我们介绍了React Scheduler的基本原理、任务调度算法以及任务队列的实现。在本文中，我们将介绍如何实现任务优先级以及高优先级任务插队的原理和源码手写。

任务优先级

在React中，任务的优先级分为三种：

用户交互优先级 ：这是最高的优先级，包括鼠标点击、键盘输入等。
动画优先级 ：这是中等的优先级，包括动画、过渡等。
空闲优先级 ：这是最低的优先级，包括一些不紧急的任务，如更新状态等。

React Scheduler会根据任务的优先级来决定任务的执行顺序。优先级高的任务会先执行，优先级低的任务会后执行。

高优先级任务插队

在某些情况下，可能会出现高优先级任务需要插队执行的情况。例如，当用户点击一个按钮时，React Scheduler需要立即执行按钮点击事件对应的任务。此时，React Scheduler会将按钮点击事件对应的任务插队到任务队列的最前面，以便立即执行。

高优先级任务插队可以通过两种方式实现：

链表插队 ：在任务队列中使用链表结构，当高优先级任务到来时，将高优先级任务插入到链表的头部。
数组插队 ：在任务队列中使用数组结构，当高优先级任务到来时，将高优先级任务插入到数组的开头。

React Scheduler使用的是数组插队的方式来实现高优先级任务插队。

源码手写

下面我们来手写React Scheduler中任务优先级和高优先级任务插队的代码。

class TaskQueue {
  constructor() {
    this.queue = [];
  }

  addTask(task) {
    if (task.priority === 'userInteraction') {
      // 高优先级任务插队
      this.queue.unshift(task);
    } else {
      this.queue.push(task);
    }
  }

  getNextTask() {
    return this.queue.shift();
  }
}

const taskQueue = new TaskQueue();

// 添加任务
taskQueue.addTask({
  priority: 'userInteraction',
  callback: () => {
    console.log('用户交互任务');
  }
});

taskQueue.addTask({
  priority: 'animation',
  callback: () => {
    console.log('动画任务');
  }
});

taskQueue.addTask({
  priority: 'idle',
  callback: () => {
    console.log('空闲任务');
  }
});

// 执行任务
while (taskQueue.queue.length > 0) {
  const task = taskQueue.getNextTask();
  task.callback();
}