学习React技术揭秘(三)

340 阅读2分钟

前言

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

文章内容均来自于React技术揭秘,此文章仅作为学习笔记。


由于React15架构不能支持异步更新,以至于需要重构,那么React16是如何支持异步更新的呢?

React16 架构(三层)

  • Scheduler(调度器) —— 调度任务的优先级,高优任务优先进入Reconciler

  • Reconciler(协调器) —— 负责找出变化的组件

  • Renderer(渲染器) —— 负责将变化的组件渲染到页面上

Scheduler(调度器)

以浏览器是否有剩余时间来作为任务中断的标准,部分浏览器有这个API(requestIdleCallback)。但是React放弃使用:

  1. 浏览器兼容性

  2. 触发频率不稳定,比如切换浏览器的tab后,之前tab注册的requestIdleCallback触发的频率会变得很低

所以,React实现了功能更完备的requestIdleCallback polyfill(Scheduler),除了在空闲时间触发回调的功能外,还提供了多种调度优先级供任务设置。

Scheduler是独立于React的库

Reconciler(协调器)

在React15中Reconciler是递归处理虚拟DOM,而React16的Reconciler

React16Reconciler.png

更新工作从递归变成了可以中断的循环过程。每次循环都会调用shouldYield来判断当前是否有剩余时间。

在React16中,Reconciler和Renderer不再是交替工作。当Scheduler将任务交给Reconciler后,Reconciler会给变化的虚拟DOM打上增、删、更新的标记:

React16标记.png

整个Scheduler与Reconciler的工作都是在内存中进行。只有当所有组件都完成Reconciler的工作,才会统一交给Renderer。

官网对React16的Reconciler的解释

Renderer(渲染器)

Renderer根据Reconciler为虚拟DOM打的标记,同步执行对应的DOM操作。

在React16架构中整个更新流程为:

React16更新流程.png

红框中的步骤随时可能被打断:

  • 有其他的高优任务需要先更新

  • 当前帧没有剩余时间

由于Scheduler和Reconciler都是在内存中工作的,不会更新页面上的DOM,所以即使反复中断,用户也不会看见更新不完全的DOM。

实际上,由于Scheduler和Reconciler都是平台无关的,所以React为它们单独发了一个包react-Reconciler。可以用这个包自己实现一个ReactDOM.

总结

React16采用新的Reconciler,但是Reconciler内部采用了Fiber架构。后面好好学习了再记录。