How React works

React15 架构

react15可以分为2层：

1. reconciler (协调器)：负责找出变化的组件

2. renderer (渲染器)：负责将reconciler找出的改变的地方更新到渲染到页面上

reconciler(协调器)

在react中触发更新后，reconciler会执行以下操作：

• 调用函数组件、或class组件的render方法，将返回的JSX转化为虚拟DOM

• 将虚拟DOM和上次更新时的虚拟DOM对比

• 通过对比找出本次更新中变化的虚拟DOM

• 通知Renderer将变化的虚拟DOM渲染到页面上

renderer(渲染器)

接收到reconciler的更新通知后，renderer将变化的组件渲染到当前宿主环境

缺点

同步更新，当js执行时间过长，浏览器将没有时间执行样式布局和界面绘制，这会导致跳过帧，界面卡顿

解决办法

使用异步可中断更新代替同步递归不可中断更新

React16架构

1. scheduler (任务调度器) - 调度任务优先级，优先级高的先进入reconciler

2. reconciler (协调器) - 找出变化的组件

3. renderer (渲染器) - 将变化的地方渲染到宿主页面

scheduler

既然我们以浏览器是否有剩余时间作为任务中断的标准，那么我们需要一种机制，当浏览器有剩余时间时通知我们。

目前浏览器的实现是window.requestIdleCallback，但是有如下缺点

• 兼容性

• 触发频率不稳定，受很多因素影响。比如当我们的浏览器切换tab后，之前tab注册的requestIdleCallback触发的频率会变得很低

基于以上原因，react开发了scheduler，作为requestIdleCallback的polyfill并且实现了多种任务优先级调度