react入門系列之虛擬DOM

### 什麼是虛擬DOM

#### 數據變化頁面同步渲染的邏輯，這裏分析三種邏輯。

1. 先有數據 （state）

2. 模版（render中的jsx）

3. 數據 + 模版 = 生成真實Dom，來顯示

4. state 發生改變

5. 數據 + 模版 = 生成真實Dom，替換原有的DOM

- 缺陷： 第一次生成真實dom，第二次又生成一個。最後替換。很是耗性能。

- 緣由： 生成一個完整的dom，和替換一個完整的dom，很是耗性能。並非每次數據變化dom的全部內容都要變。

1. 先有數據 （state）

2. 模版（render中的jsx）

3. 數據 + 模版 = 生成真實Dom，來顯示

4. state 發生改變

5. 數據 + 模版 = 生成真實Dom，並不直接替換原始的DOM

6. 新舊DOM作對比，找差別。注意新的DOM實際上是DoucumentFragment: 文檔碎片並無真實的掛載到頁面上。

7. 找出input框發生變換

8. 只用新DOM中的input元素，替換掉老的DOM中的input元素。

- 缺陷： 節約了完整dom替換的性能，可是消耗了對比的性能。效果不明顯。

1. 先有數據 （state）

2. 模版（render中的jsx）

3. 數據 + 模版 = 生成虛擬DOM（生成虛擬DOM是一個js對象，用它來描述真是DOM）（損耗性能很是小）

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

4. 用虛擬DOM的結構生成真實Dom，來顯示

1. <div id='abc'><span>hello,world</span></div>

5. state 發生改變

6. 數據 + 模版 = 生成新的虛擬DOM（極大提高了性能）

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

7. 比較原始虛擬DOM和新的虛擬DOM的區別，找到區別是span中的內容

8. 直接操做DOM改變span中的DOM

- 優點:

1. 減小了對真實DOM的建立，性能提升很大

2. js對象的比對很是不消耗性能的。

- 緣由:

1. js去生產一個虛擬DOM其實就是一個js對象，而使用js去生成一個js對象是不怎麼消耗性能的。

2. 對比上面兩種方法，不只減小了真實DOM的生產，同時也沒有了真實DOM的對比，虛擬DOM對比也是很是節約新能的。

### 深刻了解虛擬DOM

1. jsx --> createElement --> js對象（虛擬dom） --> 真實DOM

2. jsx實際上就是一個模版。

3. react將數據和jsx模版結合經過createElement方法生成js對象，也就是虛擬dom。

- React.createElement('div', {}, 'item') // {}爲div屬性

- return <div>item</div>

- 以上兩行代碼效果是同樣的，都是建立了虛擬dom

4. 最後react再將虛擬dom生成真實dom

5. 虛擬dom帶來的好處

1. 性能提高：真實dom的比對變成了js對象比對

2. 它使得跨端應用得以實現，React Native

- 虛擬dom是js對象，他能夠同時在原生應用裏面和瀏覽器中都能識別。真實dom是不能在原生應用識別的。

- 在原生應用中，咱們可使用虛擬dom轉化成原生組件。這讓咱們可以開發原生應用。

### 虛擬dom中的diff算法

1. 算法運用在比較原始虛擬DOM和新的虛擬DOM的比對中

- 兩個虛擬dom的比對就叫diffrence算法（react底層會用到），大大提升了比對效率

2. 何時會發生比對。

- 當你調用setState()的時候，就會發生比對。

- setState()是一個異步方法。

1. 爲何是一個異步呢。

2. 假設你調用了3次setState()方法。若是不是異步函數，是否是要進行3次虛擬dom比對呢？因此react將它設計成異步函數。

3. diff算法

- 同級比較

1. 從第一層虛擬DOM開始比較，若是差別，他就再也不對比，他會將第一層以及該層對應的子節點都替換掉。

2. 這樣比較確實會形成渲染的浪費，由於可能子節點會有相同的地方。

3. 優點在於比對算法簡單，他能夠大大減小比對的時間。

- 爲何在咱們給dom的key值賦值時候，不要使用index？

1. 首先咱們要知道，爲何咱們在循環遍歷DOM的時候要給DOM設置一個key值。

2. 每一個DOM設置一個key，至關於給每一個dom起了一個名字。在作虛擬dom對比的時候，咱們只須要按名字對比，不須要經過dom內容現找到對應的dom再進行對比，這樣就節省了新能。

3. 爲何不能用index呢？由於index不具有穩定性，當你刪除某一個dom後，可能你整個dom樹的key值都會發生變化。

4. 咱們可使用dom的內容去作key，由於內容改變自己dom就須要從新渲染。就拿todolist來講key能夠綁定value值。