react diff演算法剖析總結

標籤：怎麼辦   理解   diff   one   tar   dom   virtual   比較   tree   

原文：https://zhuanlan.zhihu.com/p/20346379

總結一下個人看完之後的理解：

1、tree diff：只對相同層級的節點進行比較，如果子樹在新樹種不存在了，則直接刪除。如果新加了樹就是建立，那麼如果進行了跨層級的樹的移動怎麼辦？答案是直接刪除移動前的樹，在移動後的位置建立一顆一模一樣的。

所以在react中盡量還是不要進行跨層級的移動。

2、component diff：如果是相同的組件，則繼續比較virtual DOM tree。如果不是，則直接刪除整個組件並替換成相同的組件

3、element diff：有移動，建立和刪除操作，這個不用說都直接什麼意思。具體的演算法細節可以看原文，這裡不深究。

 

react diff演算法剖析總結