1.React中的虚拟DOM

1.state 数据

2.JSX模板

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

4.state发生改变

5.数据 + 模板 结合，生成真实的DOM，替换原始的DOM

缺陷：

第一次生成了一个完整的DOM片断

第二次生成了一个完整的DOM片断

第二次的DOM替换第一次的DOM，很是耗性能

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（虚拟DOM就是一个JS对象，用他来描述真实DOM）   （损耗了性能）

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

4.数据 + 模板 结合，生成真实的DOM，来显示

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

5.state发生变化

6.数据 + 模板 生成新的虚拟DOM   （极大提高了性能）

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

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',{},'baybay']]

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',{},'baybay']]

7.比较原始虚拟DOM和新的虚拟DOM的区别，找到区别是span中的内容   （极大的提高了性能）

8.直接操做DOM，改变span中的内容

 优势：

1.性能提高了。

2.使得跨端应用得以实现。React native