虚拟DOM 和DOM diff算法

DOM diff

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

• Tree DIFF：是对树的每一层进行遍历，如果某组件不存在了，则会直接销毁
• Component DIFF：第二层进入Component DIFF，同一类型组件继续比较下去，发现A组件没有，所以直接删掉A、B、C组件；继续第三层，重新创建A、B、C组件。
• Element DIFF紧接着以上统一类型组件继续比较下去，常见类型就是列表。同一个列表由旧变新有三种行为，插入、移动和删除，它的比较策略是对于每一个列表指定key，先将所有列表遍历一遍，确定要新增和删除的，再确定需要移动的。

虚拟DOM

表示虚拟DOM的JS对象上面有如下三个属性：

1. tagName: 用来表示这个元素的标签名。
2. props: 用来表示这元素所包含的属性。
3. children: 用来表示这元素的children（数组）。
   虚拟DOM快取决于两个前提：1. JavaScript在浏览器上运行很快 2.DOM的渲染过程很慢，性能消耗高