前言
小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。
文章内容均来自于React技术揭秘,此文章仅作为学习笔记。
由于React15架构不能支持异步更新,以至于需要重构,那么React16是如何支持异步更新的呢?
React16 架构(三层)
-
Scheduler(调度器) —— 调度任务的优先级,高优任务优先进入Reconciler
-
Reconciler(协调器) —— 负责找出变化的组件
-
Renderer(渲染器) —— 负责将变化的组件渲染到页面上
Scheduler(调度器)
以浏览器是否有剩余时间来作为任务中断的标准,部分浏览器有这个API(requestIdleCallback)。但是React放弃使用:
-
浏览器兼容性
-
触发频率不稳定,比如切换浏览器的tab后,之前tab注册的requestIdleCallback触发的频率会变得很低
所以,React实现了功能更完备的requestIdleCallback polyfill(Scheduler),除了在空闲时间触发回调的功能外,还提供了多种调度优先级供任务设置。
Scheduler是独立于React的库
Reconciler(协调器)
在React15中Reconciler是递归处理虚拟DOM,而React16的Reconciler
更新工作从递归变成了可以中断的循环过程。每次循环都会调用shouldYield来判断当前是否有剩余时间。
在React16中,Reconciler和Renderer不再是交替工作。当Scheduler将任务交给Reconciler后,Reconciler会给变化的虚拟DOM打上增、删、更新的标记:
整个Scheduler与Reconciler的工作都是在内存中进行。只有当所有组件都完成Reconciler的工作,才会统一交给Renderer。
官网对React16的Reconciler的解释
Renderer(渲染器)
Renderer根据Reconciler为虚拟DOM打的标记,同步执行对应的DOM操作。
在React16架构中整个更新流程为:
红框中的步骤随时可能被打断:
-
有其他的高优任务需要先更新
-
当前帧没有剩余时间
由于Scheduler和Reconciler都是在内存中工作的,不会更新页面上的DOM,所以即使反复中断,用户也不会看见更新不完全的DOM。
实际上,由于Scheduler和Reconciler都是平台无关的,所以React为它们单独发了一个包react-Reconciler。可以用这个包自己实现一个ReactDOM.
总结
React16采用新的Reconciler,但是Reconciler内部采用了Fiber架构。后面好好学习了再记录。