前言
react17增加了concurrent mode的模式,这种模式的根本目的是为了让应用保持cpu和io的快速响应,它是一组新功能,包括Fiber、Scheduler、Lane,可以根据用户硬件性能和网络状况调整应用的响应速度,核心就是为了实现异步可中断的更新。concurrent mode也是未来react主要迭代的方向。
cup:让耗时的reconcile的过程能让出js的执行权给更高优先级的任务,例如用户的输入,
io:依靠Suspense
Fiber
react15之前的reconcile是同步执行的,当组件数量很多,reconcile时的计算量很大时,就会出现页面的卡顿,为了解决这个问题就需要一套异步可中断的更新来让耗时的计算让出js的执行权给高优先级的任务,在浏览器有空闲的时候再执行这些计算。所以我们需要一种数据结构来描述真实dom和更新的信息,在适当的时候可以在内存中中断reconcile的过程,这种数据结构就是Fiber。
Scheduler
Scheduler独立于react本身,相当于一个单独的package,Scheduler的意义在于,当cup的计算量很大时,我们根据设备的fps算出一帧的时间,在这个时间内执行cup的操作,当任务执行的时间快超过一帧的时间时,会暂停任务的执行,让浏览器有时间进行重排和重绘。在适当的时候继续任务。
在js中我们知道generator也可以暂停和继续任务,但是我们还需要用优先级来排列任务,这个是generator无法完成的。在Scheduler中使用MessageChannel实现了时间切片,然后用小顶堆排列任务优先级的高低,达到了异步可中断的更新。
Scheduler可以用过期时间来代表优先级的高低。
优先级越高,过期时间越短,离当前时间越近,也就是说过一会就要执行它了。
优先级越低,过期时间越长,离当前时间越长,也就是过很久了才能轮到它执行。
lane
Lane用二进制位表示任务的优先级,方便优先级的计算,不同优先级占用不同位置的‘赛道’,而且存在批的概念,优先级越低,‘赛道’越多。高优先级打断低优先级,新建的任务需要赋予什么优先级等问题都是Lane所要解决的问题。
Suspense
Suspense可以在请求数据的时候显示pending状态,请求成功后展示数据,原因是因为Suspense中组件的优先级很低,而离屏的fallback组件优先级高,当Suspense中组件resolve之后就会重新调度一次render阶段,此过程发生在updateSuspenseComponent函数中