React架构介绍-三个部件

前言

React16及以后版本的架构主要由三个关键部分组成：调度器（Scheduler）、协调器（Reconciler）和渲染器（Renderer）。

调度器（Scheduler）

调度器是React架构的新增部分，它在React 16版本中被引入。

主要作用: 管理任务的优先级和调度顺序。调度器允许高优先级的任务优先进入协调器进行处理，确保这些任务能够及时得到关注和执行。

例如: 某个更新任务具有更高的优先级，调度器就会让它优先进入协调器。

协调器（Reconciler）

主要作用: 通过Diff算法找出哪些组件发生了变化。

在React中，协调器会在内存中进行Diff算法，比较上一次更新的组件和这一次更新的组件，从而找出需要更新的组件。这个过程是在内存中进行的(可中断)，因此即使有更高优先级的更新任务到来，也不会影响到当前的任务，保证了更新的连续性和稳定性。

渲染器（Renderer）

主要作用: 负责将变化的组件渲染到视图中。

在React中，渲染器会将协调器找出的需要更新的组件渲染到视图中。不同的渲染器可以将组件渲染到不同的宿主环境的视图中，

例如: React DOM会将组件渲染成HTML，而React Native则会渲染App的原生组件。

总结

这三个组件共同协作，实现了React的高效和响应式的更新。调度器负责调度任务的优先级，协调器负责找出变化的组件，渲染器负责将变化的组件渲染到视图中，从而实现了整个更新流程的高效和稳定。