react源码分析：实现react时间分片

我们常说的调度，可以分为两大模块，时间分片和优先级调度

• 时间分片的异步渲染是优先级调度实现的前提
• 优先级调度在异步渲染的基础上引入优先级机制控制任务的打断、替换。

本节将从时间分片的实现剖析react的异步渲染原理，阅读本文你讲可以了解

1.时间分片是什么
2.为什么需要时间分片
3.时间分片在react中是如何运行的
4.时间分片的极简实现

什么是时间分片

上文提到过，时间分片其实就是一个固定而连续且有间隔的时间区间

固定：时间分片是工作时长是固定的连续：分片之间是连续的，当前分片内有工作没做完，会留到下个分片继续有间隔：在进入下一个分片前，会有一定时间的间隔

这些解释比较抽象，可以更加通俗去理解

固定：每天固定工作8小时连续：每天都要上班有间隔：明天上班前会休息一段时间

为什么需要时间分片

我们知道，react最重要，也是最耗时的任务是节点遍历。

设想一个页面上有一万个DOM节点，如果我们用同步的方式一个个遍历完需要花费多少时间。而且如果是同步遍历的话，遍历的过程中，JS线程一直会霸占主线程，导致阻塞了浏览器的其他线程，导致卡顿的情况出现。

换个思路解决这个遍历问题，能不能遍历一会，休息一会，休息的过程中就可以把主线程交还给渲染线程和事件线程，这样就能及时渲染节点和响应用户事件，避免造成卡顿。

为了实现遍历一会，休息一会，我们可以将整个过程分解为以下三个步骤

1.分片开启
2.分片中断、分片重启
3.延迟执行

这三个步骤与时间分片的三个特性一一对应

实现分片开启 - 固定

时间分片是独立于React的节点遍历流程的，所以只需要把节点遍历的入口函数以回调函数的形式传入即可，这样就可以让时间分片来决定节点遍历执行时机。

// 节点遍历的入口函数
function Reconcile协调() {节点遍历()
}
function Schedule调度() {创建分片(Reconcile协调)
} 

第一步，需要将时间分片要调度的函数抽象为一个任务对象

function 创建分片(需要被调度的函数) {const 新的任务 = {callback: 需要被调度的函数}
} 

第二步，设定分片工作时长，为了方便后续，可以直接计算过期时间。分片工作时长一般为5ms，