一、虚拟DOM
虚拟DOM不是真实的DOM，而是一个JS对象。它的作用是判断DOM是否改变、哪些部分需要被重新渲染。这样，不需要操纵真实的DOM,极大的提高了React的性能。
- React的DOM渲染步骤
- state 数据
- JSX语法 模板
- 数据 + 模板 生成虚拟DOM(就是用js对象表示真实DOM)
- 用虚拟DOM 结构生成真实DOM 渲染页面
- state改变
- 数据 + 模板 生成新的虚拟DOM
- 旧的虚拟DOM和新的虚拟DOM做对比，找出发送改变的DOM
- 操作真实的DOM,把改变的内容替换掉
- 优点
- 性能提升了
- 它使得跨端应用得以实现。React Native，因为不使用真实DOM,而是虚拟DOM,js对象可以在浏览器，或者node，原生应用中
二、Diff算法
- Diff算法就是在虚拟DOM树从上至下进行同层比对，如果上层已经不同了，那么下面的DOM全部重新渲染。这样的好处是算法简单，减少比对次数，加快算法完成速度。
- 示意图
Diff.jpg
- key值的作用
由于key值用于循环输出的DOM，比如ul下的li，那么这些li在同一层。在旧虚拟DOM和新虚拟DOM比对时，需要标识比对对象。比如上图，旧的4需要和新的4比对，如果没有key就需要遍历查找比较对象，耗费性能。
由此可见，key关系到虚拟DOM的比对对象查找，所以key需要唯一且不可变，所以说index作为key值不合适，因为index可能会随li的个数的改变而改变
