React 虚拟DOM：

一个DOM需要数据+模板组合生成，state或props中数据状态变化时，render函数会重新执行即刷新当前DOM，更新页面显示。

image.png

第一种是原始的DOM替换，用新的DOM替换旧的DOM，DOM替换或生成都会消耗大量性能。

第二种只替换对比时不同的DOM片段，降低了DOM替换时的性能，但增加了新旧DOM对比这一步骤，性能提升不明显。

image.png

第三种

生成真实DOM来显示的同时也生成了一个虚拟DOM，这里虚拟DOM本质即为js对象，用以描述DOM结构。

组成部分为：标签名字，标签属性的集合对象，标签中的元素内容。因div中嵌套span所以这里显示为多层数组。

在虚拟DOM对比时(本质为js对象的对比)消耗了很少的性能，对上面两种方案来说这种提升了极大性能。
优点：

image.png

因为DOM节点在安卓ios端无法识别，只能在浏览器识别，但是虚拟DOM可以被识别，生成原生的应用组件，可以在原生应用上显示。
React的Diff算法：

image.png

在调用setState方法改变state中的数据状态时，会产生虚拟DOM，为了页面更新提升性能当前的虚拟DOM与旧虚拟DOM发生比较，此时使用了Diff算法。

如果改变state数据次数多频率很高，时间间隔相近，为了提升性能，setState就采用异步的方式，一次性改变状态。

Diff算法比对：

image.png

React的虚拟DOM采用的同层比对的方法，对比两个虚拟DOM的每一层，如果遇到不同的情况则下面的层不再进行比对，从最新虚拟DOM的不同的那一层开始，覆盖旧的虚拟DOM，进行替换。

key 循环中的key值比对，比对的是key和value之间的映射关系。