react中的虚拟dom

数据-模板-页面自动生成

state数据
jsx模板
数据+模板生成真实dom
数据变化
数据+模板结合，生成真实dom，替换原始dom

##缺陷
第一次生成了 完整的dom片段
第二次生成了完整的dom片段
第二次dom替换第一次dom 耗性能
局部改变也要生成完整的dom片段，很耗性能

1.state数据
2.模板
3.数据+模板生成真实dom
4数据改变
5.数据+模板生成真实的dom，并不直接替换原始的dom
6 新的dom与旧dom结构做比对，找出差异
7.找出input框发生变化
8.只用新的input元素替换到老dom中的input元素。
减少不必要的dom替换，提升了性能
##缺陷 性能提升并不明显
解决办法：虚拟dom

1.state数据
2.模板
3.数据+模板生成真实dom
4.生成虚拟dom，虚拟dom就是vnode，就是js对象，用来模拟真实dom数据

<div id='abc'><span>hello world</span></div>
['div',{id:'abc'},['span',{},'hello world']]

5.state发生变化
6.数据+模板 生成新的虚拟dom
7.比较原始虚拟dom和新的虚拟dom的区别

<div id='abc'><span>baibai</span></div>
['div',{id:'abc'},['span',{},'baibai']]

8.直接操作dom

js创建js对象很简单，损耗小，而js要创建dom对象要调用webApplication层级的api，损耗很大。
减少了对真实dom创建次数
##实际上
react底层是先生成了虚拟dom，然后才生成真实dom
虚拟dom带来了什么好处？
1.性能提升 dom比对换成了js对象的比对
2.使得跨端应用得以实现 react Native
diff算法
两个虚拟dom如何被比对，比对的方法就叫diff算法
连续调用3次setState，react会合并成一次setState，setState是异步的，为了提高性能
同层比对-算法简单-比对速度很快，减少了比对算法的消耗。
keys
key给dom起了一个名字，比对时，更快速
用index做key值，有可能不稳定，
比如a,b,c三个li，(a->0,b->1,c->2);
这时，如果删除掉a元素，bc元素会变成(b->0,c->1)这时，key值不稳定