React 新老架构

React15 架构

React15 架构可以分为两层：

我们知道，在React中可以通过this.setState、this.forceUpdate、ReactDOM.render等 API 触发更新。

每当有更新发生时，Reconciler会做如下工作：

你可以在这里 (opens in a new tab)看到React官方对Reconciler的解释

由于React支持跨平台，所以不同平台有不同的Renderer。我们前端最熟悉的是负责在浏览器环境渲染的Renderer —— ReactDOM (opens in a new tab)。

除此之外，还有：

在每次更新发生时，Renderer接到Reconciler通知，将变化的组件渲染在当前宿主环境。

你可以在这里 (opens in a new tab)看到React官方对Renderer的解释

在Reconciler中，mount的组件会调用mountComponent (opens in a new tab)，update的组件会调用updateComponent (opens in a new tab)。这两个方法都会递归更新子组件。

由于递归执行，所以更新一旦开始，中途就无法中断。当层级很深时，递归更新时间超过了 16ms，用户交互就会卡顿。解决方法关键是解决 CPU 的瓶颈与 IO 的瓶颈。而落实到实现上，则需要将同步的更新变为可中断的异步更新。

React16 架构可以分为三层：

可以看到，相较于 React15，React16 中新增了Scheduler（调度器），让我们来了解下他。

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

其实部分浏览器已经实现了这个 API，这就是requestIdleCallback (opens in a new tab)。但是由于以下因素，React放弃使用：

基于以上原因，React实现了功能更完备的requestIdleCallbackpolyfill，这就是Scheduler。除了在空闲时触发回调的功能外，Scheduler还提供了多种调度优先级供任务设置。

Scheduler (opens in a new tab)是独立于React的库

在 React16 中，Reconciler与Renderer不再是交替工作。当Scheduler将任务交给Reconciler后，Reconciler会为变化的虚拟 DOM 打上代表增/删/更新的标记。

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

你可以在这里 (opens in a new tab)看到React官方对 React16 新Reconciler的解释

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

Scheduler和Reconciler步骤随时可能由于以下原因被中断：

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