React：虚拟DOM和diff算法

虚拟DOM：

概念：用JS对象的形式来模拟页面上DOM嵌套关系。（即虚拟DOM是以JS对象的形式存在的）

本质：用JS对象模拟DOM元素和嵌套关系。

目的：为了实现页面元素的高效更新。

Diff算法：

DOM DIFF是react应用中的精华所在，DOM DIFF在使用时有一些约定如下：

1、DOM节点跨层级的移动操作特别少，可以忽略不计（例如A原本和B平级，随后A变成B的子节点）

2、拥有相同类的两个组件将会生成相似的树形结构，拥有不同类的两个组件将会生成不同的树形结构（A和B组件结构不一致）

3、同一层级的一组子节点，它们可以通过uuid进行区分。

DIFF算法在执行时有三个维度，分别是Tree DIFF、Component DIFF和Element DIFF，执行时按顺序依次执行，它们的差异仅仅因为DIFF粒度不同、执行先后顺序不同。

Tree DIFF是对树的每一层进行遍历，如果某组件不存在了，则会直接销毁。如图所示，左边是旧属，右边是新属，第一层是R组件，一模一样，不会发生变化；第二层进入Component DIFF，同一类型组件继续比较下去，发现A组件没有，所以直接删掉A、B、C组件；继续第三层，重新创建A、B、C组件。 

如图所示，第一层遍历完，进行第二层遍历时，D和G组件是不同类型的组件，不同类型组件直接进行替换，将D删掉，再将G重建。

 

Element DIFF紧接着以上统一类型组件继续比较下去，常见类型就是列表。同一个列表由旧变新有三种行为，插入、移动和删除，它的比较策略是对于每一个列表指定key，先将所有列表遍历一遍，确定要新增和删除的，再确定需要移动的。如图所示，第一步将D删掉，第二步增加E，再次执行时A和B只需要移动位置即可。