react虚拟DOM

虚拟DOM总的来说就是一个JS对象，用来描述真实的DOM。
<div id='abc'><span>hello</span></div>
相当于
[ ' div ' , { id : ' abc ' } , [ ' span ' , { } , ' hello' ] ]
性能提升的地方在于，数据改变时，改变js对象
然后用对比js对象的方式替代对比新旧DOM的方式。

大致步骤
1.state数据
2.JSX模板
3.数据+模板生成虚拟DOM
4.根据虚拟DOM生成真实DOM
5.state改变
6.数据+模板生成新的虚拟DOM
7.比较新旧虚拟DOM的区别
8.直接操作DOM，改变结构

JSX——>JS对象——>真实的DOM

diff算法中有一个概念叫同级比较

image.png

从顶层开始同层对比，如果一层有差异，则这一层下面几层就不对比了，直接销毁，重新生成。

image.png
key的作用其实就是提高虚拟DOM比对的性能