课程地址 https://xiaochen1024.com/courseware/60b1b2f6cf10a4003b634718/60b1b55ccf10a4003b634728
react17
支持 concurrent mode
,这种模式的根本目的是为了让应用保持 cpu和io的快速响应
,它是一组新功能,包括 Fiber
、Scheduler
、Lane
,可以根据用户硬件性能和网络状况调整应用的响应速度,核心就是为了实现异步可中断的更新。concurrent mode
也是未来react主要迭代的方向。
cpu
:让 耗时的reconcile的过程
能 让出js的执行权
给 更高优先级的任务
,例如用户的输入,
io
:依靠 Suspense
Fiber
在 concurrent mode
下 Fiber
的意义,react15 之前的 reconcile
是同步执行的,当组件数量很多,reconcile
时的计算量很大时,就会出现页面的卡顿,为了解决这个问题就需要一套异步可中断的更新来让耗时的计算让出js的执行权给高优先级的任务,在浏览器有空闲的时候再执行这些计算。所以我们需要 一种数据结构来描述真实dom和更新的信息
,在适当的时候可以在内存中中断 reconcile
的过程,这种数据结构就是Fiber。
Scheduler
Scheduler
的意义在于,当cpu的计算量很大时,我们根据设备的fps算出一帧的时间,在这个时间内执行cup的操作,当任务执行的时间快超过一帧的时间时,会暂停任务的执行,让浏览器有时间进行重排和重绘。在适当的时候继续任务。
在 Scheduler
中使用 MessageChannel
实现了时间切片,然后用小顶堆排列任务优先级的高低,达到了异步可中断的更新。
Scheduler
可以用过期时间来代表优先级的高低。
优先级越高,过期时间越短,离当前时间越近,也就是说过一会就要执行它了。
优先级越低,过期时间越长,离当前时间越长,也就是过很久了才能轮到它执行。
lane
Lane
用二进制位表示任务的优先级,方便优先级的计算,不同优先级占用不同位置的‘赛道’,而且存在批的概念,优先级越低,‘赛道’越多。高优先级打断低优先级,新建的任务需要赋予什么优先级等问题都是 Lane
所要解决的问题。
batchedUpdates
在一个上下文中同时触发多次更新,这些更新会合并成一次更新。
在之前的react版本中如果脱离当前的上下文就不会被合并,例如把多次更新放在setTimeout中,原因是处于同一个 context
的多次 setState
的 executionContext
都会包含 BatchedContext
,包含 BatchedContext
的 setState
会合并,当 executionContext
等于 NoContext
,就会同步执行 SyncCallbackQueue
中的任务,所以setTimeout中的多次 setState
不会合并,而且会同步执行。
在 Concurrent mode
上面的例子也会合并为一次更新,根本原因在如下一段简化的源码,如果多次 setState
,会比较这几次 setState
回调的优先级,如果优先级一致,则先return 掉,不会进行后面的 render阶段
那为什么在 Concurrent mode
下,在setTimeout回调多次 setState
优先级一致呢,因为在获取 Lane
的函数 requestUpdateLane
,只有第一次 setState
满足currentEventWipLanes === NoLanes
,所以他们的 currentEventWipLanes
参数相同,而在 findUpdateLane
中 schedulerLanePriority
参数也相同(调度的优先级相同),所以返回的 lane
相同。
Suspense
Suspense
可以在请求数据的时候显示 pending
状态,请求成功后展示数据,原因是因为 Suspense
中组件的优先级很低,而离屏的 fallback
组件优先级高,当 Suspense
中组件 resolve
之后就会重新调度一次 render阶段
,此过程发生在 updateSuspenseComponent
函数中