关于React中DOM,虚拟DOM及diff算法的理解

前言

初次学习React，最先接触的关键字应该就是响应式UI，虚拟DOM，组件
本文中，我们来讲讲Dom，虚拟Dom，以及diff算法的理解。

DOM

DOM的全称是“Document Object Model”,即文档对象模型。

通过这个截图我们可以发现，其实简单点我们可以将DOM理解为一棵树，一颗倒长的树。也可以说是一颗家谱树，而家谱树本身就是一种模型，其典型用法是表示人类家族谱系。它能很容易表明家族成员之间的关系，把复杂的关系简明地表示出来。

一般的，在传统的Web开发模式中,原生JavaScript是直接对DOM进行更新操作的，这样的做法会非常浪费资源，每操作一次DOM都会对页面进行重新渲染，且新生成一颗DOM树。

对于我们熟悉的jQuery，他是一个JS库。JQuery的Dom操作就是把html里面的元素进行提取和修改然后对文档进行相应的操作。可以很容易的进行样式的设计，内容的提取等等。这样可以很好的操作前端然后获取到你所需要的很多东西。方便了我们的操作和达到我们要求的效果。

而在React中，开发者再也不需要直接与DOM进行沟通。他在开发者与DOM间扮演的一个中间角色，降低了两者之间的开发成本，同时简化了使用的过程。

虚拟DOM

定义：

虚拟DOM其实就是将真实DOM转化为一个抽象的JS对象

背景：

大家都知道，在网页中浏览器资源开销最大便是DOM节点了，DOM很慢并且非常庞大，网页性能问题大多数都是有JavaScript修改DOM所引起的。我们使用Javascript来操纵DOM，操作效率往往很低，由于DOM被表示为树结构，每次DOM中的某些内容都会发生变化，因此对DOM的更改非常快，但更改后的元素，并且它的子项必须经过Reflow / Layout阶段，然后浏览器必须重新绘制更改，这很慢的。因此，回流/重绘的次数越多，您的应用程序就越卡顿。

但是，Javascript运行速度很快，虚拟DOM是放在JS 和 HTML中间的一个层。它可以通过新旧DOM的对比，来获取对比之后的差异对象，然后有针对性的把差异部分真正地渲染到页面上，从而减少实际DOM操作，最终达到性能优化的目的。

树的算法，只会对同层次的两棵树进行比较。遍历时React会逐层次对节点进行比较，只考虑同层次的节点变化，其他层次的节点只进行删除和创建的操作。

此外，虚拟DOM对比与真实DOM没有那么多无用的东西，例如DOM事件，属性等…它只对页面上真正发生变化的内容进行DOM操作，再统一地映射到真实DOM中。所以当浏览器去进行遍历的时候，虚拟DOM的速度是比真实DOM快很多的。

原理：

• 用JavaScript模拟DOM树，并渲染这个DOM树

• 比较新老DOM树，得到比较的差异对象

• 把差异对象应用到渲染的DOM树。
  

diff算法

背景

• 我们已经完成了创建虚拟DOM并将其映射成真实DOM，这样所有的更新都可以先反应到虚拟DOM上，那么是如何反应的呢？这就需要用到Diff算法了。

• 虚拟DOM性能更快一个重要因素也是使用了diff算法。

• diff算法的作用是计算出Virtual DOM中真正变化的部分，并只针对该部分进行原生DOM操作，而非重新渲染整个页面。

React中的diff算法

1. 调和

• 将Virtual DOM树转换成actual DOM树的最少操作的过程称为调和 。
• diff算法是调和的具体实现。

2. diff策略

React用 三大策略 将O(n^3)复杂度 转化为 O(n)复杂度

• 策略一（tree diff）：
  Web UI中DOM节点跨层级的移动操作特别少，可以忽略不计。
• 策略二（component diff）：
  拥有相同类的两个组件 生成相似的树形结构， 拥有不同类的两个组件 生成不同的树形结构。
• 策略三（element diff）：
  对于同一层级的一组子节点，通过唯一id区分。

参考文档：
https://segmentfault.com/a/1190000016647776
https://www.jianshu.com/p/3ba0822018cf