学习二十五、React 架构

react 16版本的架构可以分为三层：调度层、协调层、渲染层

• Scheduler 调度层： 调度任务的优先级、高优任务优先进入协调层
• Reconciler 协调层： 构建 fiber 数据结构，比对 fiber 对象找出差异，记录 fiber 对象要进行的 DOM 操作
• renderer 渲染层： 负责将发生变化的部分渲染到页面上

Scheduler 调度层

在 React 15 的版本中，采用了循环加递归的方式进行了 virtualDOM 的比对，由于递归使用 javascrip 自身的执行栈，一旦开始就无法停止，知道任务执行完成。如果 virtualDOM 树的层级比较深， virtualDOM 的比对就会长期占用 javascript 主线程，由于 javascrip 又是单线程的无法同时执行其他任务，所以在比对的过程中无法相应用户操作，无法立即执行元素动画，造成了页面卡顿。

在 React 16 的版本中， 放弃了 javascript 递归的方式进行 virtualDOM 的比对，而是采用循环模拟递归，而且比对的过程是利用浏览的空闲时间完成，不会长期占用主线程，这就解决了 virtualDOM 比对造成页面卡顿的问题。

在 window 对象中提供了 requestIdleCallback API，他可以利用浏览器的空闲时间执行任务，但是他自身也存在一些问题，比如说并不是所有的浏览器都支持它，而且它的触发频率也不是很稳定，所以react最终放弃了 requestIdleCallback 放入使用。

在 react 中，官方实现了自己的任务调库，这个库就叫做 Scheduler，他可以实