不用一行代码，搞懂React调度器原理不用一行代码，搞懂React调度器

大家好，我卡颂。
Scheduler(调度器)是React重要的组成部分。
同时，他也是个独立的包，任何连续、可中断的流程都可以用Scheduler来调度，比如：

const work = {count: 100}; function doWork(work) { work.count--; console.log('do work!') }

work满足两个条件：

工作是连续的。一共需要执行100次，每次执行时调用doWork
工作是可中断的。中断恢复后，接着中断前的work.count继续执行就行

满足这两个条件的工作都可以用Scheduler来调度。
调度后，Scheduler内部会生成对应task，并在正确的时机执行task.callback：

const task1 = { // 过期时间等于当前时间 + 优先级对应时间 expirationTime: currentTime + priority, callback: doWork.bind(null, work) }

本文会讲解Scheduler的实现原理。知道你不喜欢看大段的代码，所以本文没有一行代码。文末有Scheduler的源码地址，感兴趣的话可以去看看。
开整～
工作流程概览 Scheduler的工作原理如下图，接下来会详细解释：

文章图片

在Scheduler中有两个容易混淆的概念：

delay

delay代表task需要延迟执行的时间。配置了delay的task会先进入timerQueue中。
当delay对应时间到期后，该task会转移到taskQueue中。

expirationTime

expirationTime代表task的过期时间。
不是所有task都会配置delay，没有配置delay的task会直接进入taskQueue。这就导致taskQueue中可能存在多个task。
如何决定哪个task.callback先执行呢？Scheduler根据task.expirationTime作为排序依据，值越小优先级越高。
【不用一行代码，搞懂React调度器原理】如果task.expirationTime小于当前时间，不仅优先级最高，而且task.callback的执行不会被中断。
总结一下task的几种情况：

配置delay且delay未到期：task一定不会执行
配置delay且到期，或者未配置delay的task，同时task.expirationTime未到期：根据task.expirationTime排序后，按顺序执行
task.expirationTime到期的task：优先级最高，且同步、不可中断