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