傳統： 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 和原始的dom 做對比，找差異 // 真實dom做對比 。效能消耗 7. 找出哪裡發生了變化 8. 只用新的發生了變化的部分，替換掉老的對應的之前的部分。 效能有所提升 缺陷： 效能的提升並不明顯，有所消耗也有所提升。

React：

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>bye bye </span></div>

虛擬dom實際上生成了一個js物件，生成一個js物件和生成一個真實dom相比，效能損耗是極低的。 流程示意： jsx → createElement → 虛擬dom（js物件） → 真實dom React.createElement(‘div’, {屬性:‘屬性值’} , ‘內容’)

虛擬dom的好處： 1.效能提升 。dom比對變成 js物件的比對 2.使得跨端應用得以實現 。React Native （js物件 → 生成原生應用元件）

Diff演算法 虛擬dom的比對（js物件）方式，就叫做diff演算法。 setState是非同步的（呼叫時間間隔小的多次的setState呼叫合併成一次的setState呼叫）提升react底層的效能

1. 關鍵：同級比較 同層比對 演算法簡單 當某一層的dom不一致時，把原始的dom不一致之後的所有的dom進行刪除，重新生成節點下所有的dom，替換原始的dom。當有一層的節點不一致時，不會再往下進行比較，而是刪除不一致節點之後的所有dom，重新生成不一致節點之後的dom。 key值的關鍵。 形成一一對應的比對關係