结合栈调和一起看：https://www.yuque.com/linhe-8mnf5/fxyxkm/gfdiu2

React15架构可以分为两层：

  • Reconciler（协调器）—— 负责找出变化的组件
  • Renderer（渲染器）—— 负责将变化的组件渲染到页面上

一、Reconciler（协调器）

触发更新：

  • 调用函数组件、或class组件的render方法，将返回的JSX转化为虚拟DOM
  • 将虚拟DOM和上次更新时的虚拟DOM对比
  • 通过对比找出本次更新中变化的虚拟DOM
  • 通知Renderer将变化的虚拟DOM渲染到页面上

二、Renderer（渲染器）

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

三、React15架构的缺点

同步更新一旦开始，中途就无法中断。当层级很深时，递归更新时间超过了16ms，用户交互就会卡顿。