React架构演变

老版React架构

React 16之前的架构

其实就分为两个部分：

• Reconciler协调器
• Render渲染器

Reconciler协调器负责本次更新有什么组件需要被渲染，diff算法就发生在这个步骤中，在diff算法中会将上次更新的组件和本次更新的组件做一个对比，判定出本次需要更新的组件会交给Render（渲染器）渲染到视图中，不同的渲染器会将组件渲染到不同的宿主环境的视图中。

新版React架构

分为三大部分：

• Scheduler调度器
• Reconciler协调器
• Render渲染器

在新的架构中，更新首先会被调度器处理，调度器会调度这些更新的优先级，更高优的更新会首先进入协调器，在协调器正在进行diff算法时，如果出现更高优先级的更新，那么正在协调的更新会被中断，由于调度器和协调器的工作都是在内存中工作，不会执行具体的视图操作，因此出现了中断发生，用户也不会看到更新不完全的视图。当某次更新完成了在协调器中的工作时，协调器会通知渲染器本次更新有哪些组件需要执行对应的视图操作，最后由渲染器来执行这些视图操作，后面就是重复执行整个流程。

解析新版React架构的示例

代码很简单，就是点击一个按钮让每个数字乘法运算，最终效果如下：

• 1 -> 2
• 2 -> 4
• 3 -> 6
  

分析