1.傳統diff演算法：將所有節點遍歷，增刪減改
2.reactdiff演算法：分為三塊
1> 比較虛擬dom和實際dom的同一層節點，忽略子節點
2> 對比元件型別，如果一樣繼續比較dom節點，如果不同，直接替換整個元件節點
3> 提供節點操作（同一層節點）（插入、移動、刪除）
附錄：傳統diff演算法：
let result = ;
// 比較葉子節點
const diffleafs = function(beforeleaf, afterleaf) );
// 刪除 beforetag 節點
} else if (aftertag === undefined) );
// 節點名改變時，刪除 beforetag 節點，新增 aftertag 節點
} else if (beforetag.tagname !== aftertag.tagname) );
result.push();
// 節點不變而內容改變時，改變節點
} else if (beforetag.innerhtml !== aftertag.innerhtml) );
} else }}
return result;
}
React的Diff演算法
要掌握react的diff演算法我們必須先了解一下其渲染的機制 在每一次的狀態或者屬性更新的時候，react元件的render方法會進行渲染，返回乙個虛擬dom物件，這個就是react的渲染機制。但是這裡就有個問題，每次生成新的dom結構，也還是要轉化為真實的dom，還是會帶來大量的真實dom的操作...
React的diff演算法
react的diff演算法主要是兩個tree的比較。傳統的tree diff演算法複雜度是o n 3 react是演算法通過一些策略將複雜度將為o n 1.優化策略 1.網頁中的dom跨層級移動的特別少，可以忽略不計 2.相同型別的元件生成相似的樹形結構，不同型別的元件生成不同的樹形結構 3.同一層...
react虛擬DOM 中的 diff 演算法
定義 state,有了資料 有乙個模板 資料 模板生成虛擬 dom 虛擬 dom 就是乙個 js物件,用它來描述真實 dom 用虛擬 dom 的結構生成真實的 dom,來顯示 state 發生變化 資料 模板 生成新的虛擬 dom 極大地提公升效能 比較原始虛擬 dom和原始虛擬 dom的區別,找到...