虚拟DOM和DIFF算法的理解

什么是虚拟DOM

当我们更新了state里的值之后，render方法就会被重新调用渲染ui，显然这样会极大地消耗性能，很不爽，所有react出了个虚拟dom，react在虚拟dom实现了diff算法，当render再次渲染的时候他不会去把整个render方法去重新渲染，他会去一一对应，发现不一致的话就会停止查找，取而代之替换掉，所以说react并不是渲染整个dom树，虚拟dom就是js数据结构，

虚拟DOM

谈谈虚拟DOM的底层原理

1. state数据
2. jsx模板
3. 数据+模板+生成虚拟DOM（虚拟DOm就是个js对象，用它来描述真实的DOM）（损耗性能）

['div',{id:'adb'},['sapn',{},'hello']]

4. 用虚拟DOM的结构生成真实的DOM，来显示

<div id='abc'><span>hello</span></div>

5. state发生变化
6. 数据+模板 生成新的虚拟DOM（极大的提升性能）

['div',{id:'adb'},['sapn',{},'bybe']]

7. 比较原始虚拟DOM和新的虚拟DOm的区别，摘到区别是span中内部（极大提升性能）
8. 直接操作dom，改变span的内容
   优点：
9. 性能提升
10. 他使得跨端应用得以实现，react native

虚拟dom的diff算法

在上面的第七步很关键，比较原始虚拟DOM和新的虚拟DOm的区别，比对的方式叫做diff算法（找他两的差异）

当state数据发生改变的时候，虚拟dom才会作比对，
先说setstate这个方法他是个异步，为什么是异步，为了提升底层的性能，比如setstate变更三组数据，react会做三次数据比对，然后更新三次页面，比较浪费性能 所以react会把三次浓缩成一次，提高性能

diff算法讲解

同级比较

左侧是个虚拟dom，当数据发生改变的时候右侧又会生成新的虚拟dom，他要做的就是比对差异，他会同层比对
首先比对第一层的数据，是否一致，假如一致，他会去比对第二层和，第二层数据不一致，react他不会往下比对，他发现数据不一致，它只比对一层虚拟dom他发现不对的话，他就不会在比较，整个原始dom从新渲染
问题来了他如果只比对一层下面都没法复用了么，不是很提高性能，这种比对好处，比对算法简单，速度快，大大减少两个虚拟dom直接算法上的性能消耗。

key值比较

在vue或者react里面如果使用for循环不加key值他都会出现警告建议我们加，有了key值就有了他们自己的名字好做对比，用上了key对很多操作提供了很好的操作

再循环为什么不建议用index？
问得好，因为你如果key用的index的话，在做删除的操作时候他是这个样子

对应的数据发生很大改变，不便于对比
如果index换成item呢，他是这样的

他会一一对应，好做对比，充分发挥了diff算法的作用