React全家桶-虚拟DOM与Diff算法（2）

目录

一、定义

二、虚拟DOM的作用（优点）

保证性能下限制：框架的虚拟DOM需要适配任何上层的API可能产生的操作，所以它的一些DOM操作必须是普适的，性能达不到最优；但是相比较直接操作DOM，还是可以提供不错的性能；

无需手动操作DOM；

虚拟DOM除了可以渲染成DOM节点，还可以渲染到其他平台如ssr(nuxt.js/next.js)、原生应用（weex/rn）、小程序等，增加了跨平台能力

三、虚拟DOM的使用基本流程（前四步骤）

四、Diff算法

tree diff

componnet diff

element diff

---

一、定义

       DOM：文档对象模型（DOM）是一个独立于语言的，用于操作XML和HTML文档的接口程序（API）。

       虚拟DOM：所谓虚拟DOM，也就是虚拟节点。它通过JS的Object对象模拟DOM中的节点，然后再通过特定的Render方法将其渲染成真实的DOM节点。

• 本质：用JS对象，来模拟DOM元素和嵌套关系。
• 目的：为了实现页面元素的高效更新。

注：虚拟DOM是相对真实DOM而言的，在React，Vue等技术栈出现之前，我们要改变页面元素只能通过遍历查询DOM树的方式找到需要修改的DOM，然后修改样式或者结构，来达到更新UI的目的。这种方式相当消耗计算资源，因为每次查询DOM几乎都需要遍历整颗DOM树，如果建立一个与DOM树对应的虚拟DOM对象（ js 对象），以对象嵌套的方式来表示DOM树及其层级结构，那么每次DOM的更改就变成了对 js 对象的属性的增删改查，这样一来查找 js 对象的属性变化要比查询 dom 树的性能开销小。

二、虚拟DOM的作用（优点）

• 保证性能下限制：框架的虚拟DOM需要适配任何上层的API可能产生的操作，所以它的一些DOM操作必须是普适的，性能达不到最优；但是相比较直接操作DOM，还是可以提供不错的性能；

• 无需手动操作DOM；

• 虚拟DOM除了可以渲染成DOM节点，还可以渲染到其他平台如ssr(nuxt.js/next.js)、原生应用（weex/rn）、小程序等，增加了跨平台能力。

三、虚拟DOM的使用基本流程（前四步骤）

1. 获取数据
2. 创建虚拟DOM
3. 通过Render函数解析jsx，将其转换成虚拟DOM结构
4. 将虚拟DOM渲染成真实DOM
5. 数据更改
6. 使用Diff算法进行对比，生成patch对象
7. 根据key将patch对象渲染到页面改变的结构上，而其他没有改变的地方是不做任何修改的（虚拟DOM的惰性原则）

四、Diff算法

• 定义：Diff算法作为虚拟DOM的加速器，其算法的改进优化是React整个页面渲染的基础和性能的保障。Diff算法运行结束后返回一个key值。
• 作用：用于比较两个新旧虚拟DOM树的差异，比较完之后会得到一个差异对象，我们称之为patch补丁对象，比较之后会出现以下四种情况：
  
  1、此节点是否被移除——>添加新的节点；
  2、属性是否被改变——>旧属性改为新属性；
  3、文本内容是否被改变——>旧内容改为新内容；
  4、节点要被整个替换——>结构完全不相同，移除并整个替换。
• 传统Diff：计算一棵树形结构转换为另一棵树形结构需要的最少步骤，如果使用传统Diff算法通过循环递归遍历节点进行对比，其复杂度要达到O(n^3)，其中n是节点总数，效率十分低下。
• React中Diff算法的优化：基于三个策略，react分别对tree diff,component diff,element diff进行算法优化。

1. Web UI中DOM节点跨层级的移动操作特别少，可以忽略不计。（tree diff）
2. 拥有相同类的两个组件将会生成相似的树形结构，拥有不同类的两个组件将会生成不同的树形结。（component diff）
3. 对于同一层级的一组子节点，它们可以通过唯一ID进行区分。（element diff）

• tree diff

       React对虚拟DOM树进行层级控制，只会对相同层级的DOM节点进行比较，即同一个父元素下的所有子节点，当发现节点已经不存在了，则会删除掉该节点下所有的子节点，不会再进行比较。这样只需要对DOM树进行一次遍历，就可以完成整个树的比较，复杂度变为O(n)；
       当出现节点跨层级移动时，并不会出现想象中的移动操作，而是会进行删除并重新创建的动作，这是一种很影响React性能的操作。因此官方也不建议进行DOM节点跨层级的操作。

• componnet diff

       如果是同一个类型的组件，则按照原策略进行虚拟DOM比较。
       如果不是同一类型的组件，则将其判断为dirty component，替换整个组价下的所有子节点。
       如果是同一个类型的组件，有可能经过一轮虚拟DOM比较下来，并没有发生变化。如果我们能够提前确切知道这一点，那么就可以省下大量的diff运算时间。因此，React允许用户通过shouldComponentUpdate()来判断该组件是否需要进行diff算法分析。

• element diff

       INSERT_MARKUP（插入）：新的组件类型不在旧集合中，即全新的节点，需要对新节点进行插入操作。
       MOVE_EXISTING（移动）：旧集合中有新组件类型，且element是可更新的类型，这时候就需要做移动操作，可以复用以前的DOM节点。
       REMOVE_NODE（删除）：旧组件类型，在新集合里也有，但对应的element不同则不能直接复用和更新，需要执行删除操作，或者旧组件不在新集合里的，也需要执行删除操作。