React之虚拟dom和diff算法

虚拟DOM介绍

虚拟DOM的本质： 虚拟DOM本质上一个对象，使用JS对象来模拟DOM树，并不是真实的DOM。
虚拟DOM的目的： 实现DOM节点的更新，而不需要改变页面的其他元素。

为什么要用到虚拟DOM？

问题背景：
当页面的某个元素发生了变化时，如果重新绘制整个DOM树，页面元素就需要全部进行重新绘制渲染，非常影响页面的性能及用户体验。

解决方法：
只把发生改变的那个dom元素进行更新即可。

具体实现：
1、在页面更新之前拿到内存中存储的网页dom树。
2、再拿出页面更新之前新渲染获得的dom树
3、使用某种算法对比这两个DOM树，并找出需要重新创建和修改的元素。（该算法称为：diff算法，后面会讲）
当页面元素发生改变后，依次i对比DOM树，只对变化的部分做修改。

那么，如何获取上面所说的两棵DOM树呢？
方法：由于DOM树存放在浏览器内存中，但是浏览器提供的JavaScript相关API来获取DOM树，因此，那我们可以模拟两个DOM树，方法如下：
1、使用JS创建一个对象，这个对象的每一个属性用于模拟当前DOM树的子节点。
2、每个子结点又可以作为父亲，里面囊括了自己的DOM子节点。
3、DOM节点之间因此形成了嵌套关系，模拟出了一棵DOM树。

diff算法

作用：对新旧DOM树进行对比，找出需要修改的dom元素，其他部分不动。

常见的diff算法

1. tree diff：新旧DOM树逐层对比。类似于树的层序遍历，将每一层的节点依次对比，找到需要被更新的元素。

2. component diff：进行组件之间的对比。当对比组件的时候，如果两个组件的类型相同，则暂时认为这个组件不需要被更新；如果组件的类型不同，则立即将旧组件移除，新建一个组件，替换到被移除的位置。（对比组件）

3. element diff：对比组件中的每个元素。