React虛擬dom和diff算法

什麼是虛擬dom？

這就要從react如何渲染出頁面開始 一般狀況下的步驟是這樣

1. 獲取state數據
2. JSX模板
3. state+JSX模板結合，生成真實dom並顯示

這個是在state不發生變化的狀況下，（state或者prop發生變化都會調用render函數，從新渲染頁面）

state數據變化時，一般理解下應該是下面的步驟

1. 獲取state數據
2. JSX模板
3. state數據+JSX模板結合，生成真實dom並顯示
4. state數據發生變化
5. 新的state數據+JSX模板結合，生成真實dom並顯示

這樣能夠實現，可是很是消耗性能，由於會渲染兩次dom樹，因此react就採用一種虛擬dom的方法來進行dom更新。

JSX轉成dom流程

用JSX語法時，渲染dom的流程：JSX——JS dom描述對象——真實dom

具體步驟：

1. 獲取state數據
2. JSX模板
3. 生成虛擬dom（虛擬dom就是一個JS對象，裏面包含了對真實dom的描述

['div',{id:'a'},['span',{},'hello']]
複製代碼

4. 用虛擬dom解構，生成真實dom並顯示

<div id='a'><span>hello</span></div>
複製代碼

5. state數據發生變化（好比hello變成了hi）
6. 生成新的虛擬dom

['div',{id:'a'},['span',{},'hi']]
複製代碼

7. 比較原始虛擬dom和新的虛擬dom的區別，找出區別是span裏的內容
8. 直接操做dom，只改變span裏的內容

虛擬dom的好處

1. 性能提高，dom比對變成js對象比對
2. 使得跨端應用得以實現（react native）

在瀏覽器中能夠用虛擬dom生成真實dom顯示，在原生應用中也能夠用虛擬dom生成對應的方式來顯示頁面

虛擬dom中的diff算法

在上面咱們介紹了react中state變化時，dom是如何發生變化的，在第七步中比較原始虛擬dom和新的虛擬dom的區別採用的方法，就是diff算法（diffrence）

虛擬dom在何時會發生比對？沒錯，數據發生變化時，也就是調用setState時

react的虛擬dom實際上是同級比較的

如上圖 他的對比步驟以下

1. 紅色原始虛擬dom和新的虛擬dom，沒有變化，保持不變，往下繼續比對
2. 藍色原始虛擬dom和新的虛擬dom，沒有變化，保持不變，往下繼續比對
3. 綠色原始虛擬dom和新的虛擬dom，沒有變化，保持不變，往下繼續比對，淺藍色原始虛擬dom和新的虛擬dom，沒有變化，保持不變，往下繼續比對

但凡在上面哪一步驟出現不一樣，就再也不繼續比對，而是刪除下面的所有節點，採用新的虛擬dom(例如：若是紅色框的原始虛擬dom和新的虛擬dom不一致，那麼就不在進行比對，採用新的虛擬dom來生成dom)

key的做用

react利用key來識別組件，它是一種身份標識標識，來提升虛擬dom的比對速度看下面

好比我要在abcde中添加一個f

若是咱們沒有key值，那咱們就須要A比對一遍，B對比一遍，以此類推很好性能，而有了key，就像下面的圖同樣，咱們很快就知道只有f與以前不一樣，提升了列表渲染的性能