6.React中的虚拟DOM及Diff算法 19-04-18

1.state 数据
2.JSX 模板
3.数据 + 模板 结合，生成真实DOM，来显示
4.state 发生改变
5.数据 + 模板 结合，生成真实的DOM，替换原始的DOM
缺陷：
第一次生成一个完整的DOM片段
第二次生成一个完整的DOM片段
第一次的DOM替换第一次的DOM，非常耗性能

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

1.state 数据
2.JSX 模板
3.数据 + 模板 结合，生成真实DOM，来显示
<div id='abc'><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中的内容
比较节省性能，实际顺序是：

1.state 数据
2.JSX 模板
3.数据 + 模板 结合, 生成虚拟DOM（虚拟DOM就是一个JS对象，用它来描述真实DOM）
   [ 'div' , { id: 'abc' }, ['span', { }, ' hello world '] ]
4.用虚拟DOM的结构生成真实DOM，来显示
   <div id='abc'><span>hello world</span></div>
5.state 发生变化
6.数据 + 模板 结合, 生成虚拟DOM（极大的提升性能）
   ['div' , { id: 'abc' } , ['span' , { }, 'bye bye'] ]
7.比较原始虚拟DOM和新的虚拟DOM的区别，找到的区别是span中的内容（极大的性能提升）
8.直接操作DOM，改变span中的内容

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

Diff算法
在第7步当中
7.比较原始虚拟DOM和新的虚拟DOM的区别，找到的区别是span中的内容（极大的性能提升）
js的比对方式 就叫做Diff算法，Diff全称叫做 Difference