大家好，我卡颂。

想必大家都晓得React有一套基于Fiber架构的调度零碎。

这套调度零碎的基本功能包含：

  • 更新有不同优先级
  • 一次更新可能波及多个组件的render，这些render可能调配到多个宏工作中执行（即工夫切片）
  • 高优先级更新会打断进行中的低优先级更新

本文会用100行代码实现这套调度零碎，让你疾速理解React的调度原理。

我晓得你不喜爱看大段的代码，所以本文会以图+代码片段的模式解说原理。

文末有残缺的在线Demo，你能够本人上手玩玩。

开整！

欢送退出人类高质量前端框架群，带飞

筹备工作

咱们用work这一数据结构代表一份工作，work.count代表这份工作要反复做某件事的次数。

在Demo中要反复做的事是“执行insertItem办法，向页面插入<span/>”：

const insertItem = (content: string) => {  const ele = document.createElement('span');  ele.innerText = `${content}`;  contentBox.appendChild(ele);};

所以，对于如下work：

const work1 = {  count: 100}

代表：执行100次insertItem向页面插入100个<span/>。

work能够类比React的一次更新，work.count类比这次更新要render的组件数量。所以Demo是对React更新流程的类比

来实现第一版的调度零碎，流程如图：

包含三步：

  1. 向workList队列（用于保留所有work）插入work
  2. schedule办法从workList中取出work，传递给perform
  3. perform办法执行完work的所有工作后反复步骤2

代码如下：

// 保留所有work的队列const workList: work[] = [];// 调度function schedule() {  // 从队列尾取一个work  const curWork = workList.pop();    if (curWork) {    perform(curWork);  }}// 执行function perform(work: Work) {  while (work.count) {    work.count--;    insertItem();  }  schedule();}

为按钮绑定点击交互，最根本的调度零碎就实现了：

button.onclick = () => {  workList.unshift({    count: 100  })  schedule();}

点击button就能插入100个<span/>。

用React类比就是：点击button，触发同步更新，100个组件render

接下来咱们将其革新成异步的。

Scheduler

React外部应用Scheduler实现异步调度。

Scheduler是独立的包。所以能够用他革新咱们的Demo。

Scheduler预置了5种优先级，从上往下优先级升高：

  • ImmediatePriority，最高的同步优先级
  • UserBlockingPriority
  • NormalPriority
  • LowPriority
  • IdlePriority，最低优先级

scheduleCallback办法接管优先级与回调函数fn，用于调度fn：

// 将回调函数fn以LowPriority优先级调度scheduleCallback(LowPriority, fn)

在Scheduler外部，执行scheduleCallback后会生成task这一数据结构：

const task1 = {  expiration: startTime + timeout,  callback: fn}

task1.expiration代表task1的过期工夫，Scheduler会优先执行过期的task.callback。

expiration中startTime为以后开始工夫，不同优先级的timeout不同。

比方，ImmediatePriority的timeout为-1，因为：

startTime - 1 < startTime

所以ImmediatePriority会立即过期，callback立即执行。

而IdlePriority对应timeout为1073741823（最大的31位带符号整型），其callback须要十分长时间才会执行。

callback会在新的宏工作中执行，这就是Scheduler调度的原理。

用Scheduler革新Demo

革新后的流程如图：

革新前，work间接从workList队列尾取出：

// 革新前const curWork = workList.pop();

革新后，work能够领有不同优先级，通过priority字段示意。

比方，如下work代表以NormalPriority优先级插入100个\<span/\>：

const work1 = {  count: 100,  priority: NormalPriority}

所以，革新后每次都应用最高优先级的work：

// 革新后// 对workList排序后取priority值最小的（值越小，优先级越高）const curWork = workList.sort((w1, w2) => {   return w1.priority - w2.priority;})[0];

革新后流程的变动

由流程图可知，Scheduler不再间接执行perform，而是通过执行scheduleCallback调度perform.bind(null, work)。

即，满足肯定条件的状况下，生成新task：

const someTask = {  callback: perform.bind(null, work),  expiration: xxx}

同时，work的工作也是可中断的。在革新前，perform会同步执行完work中的所有工作：

while (work.count) {  work.count--;  insertItem();}

革新后，work的执行流程随时可能中断：

while (!needYield() && work.count) {  work.count--;  insertItem();}
needYield办法的实现（何时会中断）请参考文末在线Demo

高优先级打断低优先级的例子

举例来看一个高优先级打断低优先级的例子：

  1. 插入一个低优先级work，属性如下
const work1 = {  count: 100,  priority: LowPriority}
  1. 经验schedule（调度），perform（执行），在执行了80次工作时，忽然插入一个高优先级work，此时：
const work1 = {  // work1曾经执行了80次工作，还差20次执行完  count: 20,  priority: LowPriority}// 新插入的高优先级workconst work2 = {  count: 100,  priority: ImmediatePriority}
  1. work1工作中断，持续schedule。因为work2优先级更高，会进入work2对应perform，执行100次工作
  2. work2执行完后，持续schedule，执行work1残余的20次工作

在这个例子中，咱们须要辨别2个打断的概念：

  1. 在步骤3中，work1执行的工作被打断。这是宏观角度的打断
  2. 因为work1被打断，所以持续schedule。下一个执行工作的是更高优的work2。work2的到来导致work1被打断，这是宏观角度的打断

之所以要辨别宏/宏观，是因为宏观的打断不肯定意味着宏观的打断。

比方：work1因为工夫切片用尽，被打断。没有其余更高优的work与他竞争schedule的话，下一次perform还是work1。

这种状况下宏观下屡次打断，然而宏观来看，还是同一个work在执行。这就是工夫切片的原理。

调度零碎的实现原理

以下是调度零碎的残缺实现原理：

对照流程图来看：

总结

本文是React调度零碎的繁难实现，次要包含两个阶段：

  • schedule
  • perform

这里是残缺Demo地址。