React中的虚拟DOM diff算法

1.state数据
2.JSX模板，
3.数据+模板 结合，生成真实的DOM来显示
4.state数据改变
5.数据+模板 结合，生成真实的DOM，并不直接替换原始DOM
6.新的DOM（DocumentFragment）和原始的DOM做比对，找差异
7.找出input框发生变化
8.只用新的DOM中的input元素，替换掉老的DOM中的input元素

缺陷：性能提升不明显

1.state数据
2.JSX模板
3.数据+模板 结合，生成真实的DOM来显示

<div id="abd"> <span> hello world</span></div>

4.生成虚拟DOM（虚拟DOM就是一个JS对象，用它来描述真实DOM） （损耗了性能）

['div',{id:'abc'},['span',{},'hello world']]

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

['div',{id:'abc'},['span',{},'bye bye']]

7.比较原始虚拟DOM和新的虚拟DOM的区别，找到区别是span中内容（极大提升性能）
8.直接操作DOM，改变span中的内容

JSX==>createElement==>虚拟DOM（JS对象）==>真实DOM

return <div>item</div>
return React.createElement('div',{},'item');

优点：
1.性能提升了
2.它使得跨端应用得以实现，React Native

setState底层性能优化：
将多次的setState异步结合成一次setState减少DOM比对次数

虚拟DOM的diff算法：
在虚拟DOM进行比对时，会逐层进行DOM比对，当有一层的DOM不同时，就会停止下一层的比对，直接将下层的所有DOM进行替换。
虽然DOM的替换比较麻烦，但是由于比对的算法简单，所以比对的速度上还是大大增加的，也就提高了性能

key值的问题：
引入key值是为了提高DOM比对的性能，key值应该保持稳定，能不用index做key值就不用index。

待续~