react的diff演算法主要是兩個tree的比較。
傳統的tree diff演算法複雜度是o(n^3)，react是演算法通過一些策略將複雜度將為o(n).
1. 優化策略
1. 網頁中的dom跨層級移動的特別少，可以忽略不計
2. 相同型別的元件生成相似的樹形結構，不同型別的元件生成不同的樹形結構
3. 同一層級的節點，可以通過唯一id來區分
2. 優化演算法
基於以上的策略，react對diff演算法進行了一下優化
1. tree diff
只對同一層級的節點進行比較，跨層級移動，直接銷毀子樹，在目的節點完全插入子樹，這樣只需對樹進行一次遍歷，便能完成整個dom樹的比較
2. component diff
1. 同一型別元件，按照tree diff進行同級比較，並且增加了shouldcomponentupdate鉤子來判斷元件是否發生變化，無變化，不比較，從而節省diff時間
2. 不同型別元件，將元件標記為dirty component，從而替換整個元件下的所有子節點
3. element diff
對於同一層級的element，通過唯一id，可以優化其新增，修改，刪除操作
在開發react元件時，保持dom結構的穩定有助於提示性能。
參考：
React的Diff演算法
要掌握react的diff演算法我們必須先了解一下其渲染的機制 在每一次的狀態或者屬性更新的時候，react元件的render方法會進行渲染，返回乙個虛擬dom物件，這個就是react的渲染機制。但是這裡就有個問題，每次生成新的dom結構，也還是要轉化為真實的dom，還是會帶來大量的真實dom的操作...
深入 React 之 diff 演算法
寫前端的人都知道 react 框架採用的是虛擬 dom。而虛擬 dom 就是 js 物件到真實 dom 的一種對映。list item item 1 li ul children children item 1 從上述案例中可以看到，真實 dom 對映出來的 js 物件 虛擬 dom 是一種樹形結構...
react中Diff演算法的不同
1.傳統diff演算法 將所有節點遍歷，增刪減改 2.reactdiff演算法 分為三塊 1 比較虛擬dom和實際dom的同一層節點，忽略子節點 2 對比元件型別，如果一樣繼續比較dom節點，如果不同，直接替換整個元件節點 3 提供節點操作 同一層節點 插入 移動 刪除 附錄 傳統diff演算法 l...