### 什么是虛擬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值。