REACT的DIFF算法與虛擬DOM
1、什么是虛擬DOM
VDOM就是js數據結構，用js對象構建一棵虛擬DOM樹，VDOM和真實DOM結構之前有一個映射關系
2、原生DOM慢的原因
瀏覽器收到一個DOM操作，就會走一遍完整的渲染流程，像計算元素坐標的操作就會浪費掉，因為下次DOM操作可能會改變之前計算的坐標
3、VDOM渲染方式
利用batching把所有的DOM操作收集起來，一次性提交給真實的DOM，diff算法通過對比新舊虛擬DOM,記錄之間的差異
中心思想：在一個不在render tree的元素統一統計所有操作，再把節點加到render tree上，這樣復雜的DOM操作最后就只進行一次layout
4、虛擬DOM的基本步驟
1、用js對象構建一個虛擬DOM樹，然后用虛擬樹構建一個真實的DOM樹，然后插入到文檔中
2、當狀態變更時，重新構建一個新的對象樹(還是虛擬DOM樹)，和舊的對比，記錄差異
3、把差異應用到構建的真實DOM樹上，視圖更新
5、diff算法（基本粒度：標簽）
1、傳統算法
對比該節點的前后兩個節點，若該節點改變，會繼續比較該節點的子節點，一層一層對比，循環進行，復雜度就到了n的3次方
2、react算法
只比較同層次的節點（同一個父節點下的所有子節點，分層次），如果發現節點不存在了，就完全刪除該節點及其子節點，不進行比較，，只需要對樹進行一次遍歷，就能把整個DOM樹比較。復雜度為n
3、跨層級操作
react不會判斷出是移動，而是直接銷毀，重新創建。再掛在目標的DOM樹上，官方也不推薦我們做出跨層級的騷操作
4、組件之間的比較
同一類型組件，按照VDOM原策略比較（會update）
不是同一類型，判斷其為臟組件銷毀掉，直接替換整個組件下的所有子節點
5、同一層級根據key在老集合查找是有相同元素，找到后比較進行類型比較，類型不同直接銷毀創建，類型相同更新部分內容