web前端培训React调度器原理分析

本文详细解析了React Scheduler的实现原理,它用于调度连续可中断的任务。Scheduler根据task的delay和expirationTime来决定执行顺序,通过优先级队列管理任务,并在合适的时机执行。工作流程包括task的生成、延迟处理和执行。了解Scheduler有助于更好地掌握React的更新机制。
摘要由CSDN通过智能技术生成

Scheduler(调度器)是React重要的组成部分。

同时,他也是个独立的包,任何「连续、可中断」的流程都可以用Scheduler来调度,比如:

const work = {count: 100};

function doWork(work) {

work.count--;

console.log('do work!')

}

work满足两个条件:

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

满足这两个条件的工作都可以用Scheduler来调度_前端培训

调度后,Scheduler内部会生成对应task,并在正确的时机执行task.callback:

const task1 = {

// 过期时间 等于 当前时间 + 优先级对应时间

expirationTime: currentTime + priority,

callback: doWork.bind(null, work)

}

本文会讲解Scheduler的实现原理。知道你不喜欢看大段的代码,所以本文没有一行代码。文末有Scheduler的源码地址,感兴趣的话可以去看看。

工作流程概览

Scheduler的工作原理如下图,接下来会详细解释:

 

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

1.delay

delay代表「task需要延迟执行的时间」。配置了delay的task会先进入timerQueue中。

当delay对应时间到期后,该task会转移到taskQueue中。

2.expirationTime

expirationTime代表「task的过期时间」。

不是所有task都会配置delay,没有配置delay的task会直接进入taskQueue。这就导致taskQueue中可能存在多个task。

如何决定哪个task.callback先执行呢?Scheduler根据task.expirationTime作为排序依据,值越小优先级越高_web前端培训

如果task.expirationTime小于当前时间,不仅优先级最高,而且task.callback的执行不会被中断。

总结一下task的几种情况:

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

工作流程详解

将流程概览图替换为Scheduler中具体方法后,如下:

 

完整工作流程如下:

1.执行Scheduler.scheduleCallback生成task

根据「是否传递delay参数」,生成的task会进入timerQueue或taskQueue。

2.当timerQueue中第一个task延迟的时间到期后,执行advanceTimers将「到期的task」从timerQueue中移到taskQueue中

其中,timerQueue、taskQueue的数据结构为小顶堆实现的优先级队列。

3.接下来,执行requestHostCallback方法,他会在新的宏任务中执行workLoop方法

「在宏任务中执行回调」的方法很多,Scheduler在浏览器环境默认使用MessageChannel实现。

如果不支持MessageChannel,会降级到setTimeout。Node或老版IE下会使用setImmediate。

1.workLoop方法会循环消费taskQueue中的task(即执行task.callback),直到满足如下条件之一,中断循环:

  • taskQueue中不存在task
  • 时间切片用尽

2.循环中断后,如果taskQueue不为空,则进入步骤3。如果timerQueue不为空,则进入步骤2

总结

总结一下,Scheduler的完整执行流程包括两个循环:

  1. taskQueue的生产(从timerQueue中移入或执行scheduleCallback生成)到消费的过程(即图中灰色部分),这是个异步循环
  2. taskQueue的具体消费过程(即workLoop方法的执行),这是个同步循环

如果你想了解「React中如何使用Scheduler」,可以参考100行代码实现React核心调度功能

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值