虚拟DOM和Diff算法是React里面非常核心的两个概念，我们需要有一个全面的认识，这对于后面使用脚手架开发项目，尤其是企业中前后端分离的项目有很大的帮助

内部执行流程

     1).用JavaScript对象结构表示DON树的结构，然后用这个树结构建一个真正的DOM树，插入到文档中

     2).当状态变更时，重新构造一颗新的对象树，然后用新的树结构和旧的树结构进行对比，记录两颗树的差异

     3).把步骤2所记录的差异应用到步骤1所构建的真正的DOM树上，视图就更新了。

原理剖析

    虚拟DOM本质上就是在JS和DOM之间做了一个缓存，可以类比CPU和硬盘，硬盘读取速度比较慢，我们会在他们之间加缓存条。反之，既然DOM运行速度慢，那么我们就在JS和DOM之间加个缓存，JS只操作虚拟DOM，最后的时候再把变更的结果写入DOM

    1).如果两颗树的根元素类型不同，React会销毁旧树，创建新树

    2).对与类型相同的React DOM元素，React会对比两者的属性是否相同，只更新不同的属性，当处理完这个DOM节点，React就会递归处理子节点。

    3).遍历插入元素，如果没有key，React将改变每一个子节点删除重新创建，为了解决这个问题，React提供了一个key属性，当子节点带有key属性，React会通过key来匹配原始树和后来的树。

下面来看一下，diff算法的运行规则： 

1.key属性只会在React内部使用，不会传递给组件

2.在遍历数据时，推荐建议使用key属性

3.key只需要保持与他的兄弟节点唯一即可，不需要全局唯一（同一个父级）

4.尽可能的减少数组index作为key，数组中插入元素等操作时，会降低效率