react的一大特點就是虛擬dom的diff演算法，下圖為diff實現流程圖。
圖很清楚，其實傳統演算法就是對每個節點一一對比，迴圈遍歷所有的子節點，然後判斷子節點的更新狀態，分別為remove、add、change。如果before的子節點仍有子節點依舊順次執行。
我們來觀察下複雜度,傳統 diff 演算法的複雜度為 o(n^3)，單純從demo看，複雜度不到n3，但實際上。
react 通過制定大膽的策略，將 o(n^3) 複雜度的問題轉換成 o(n) 複雜度的問題。
其實演算法直接降低這麼多，肯定是有多犧牲的，或者說是是指定了特定的策略，定製化的實現了所需演算法。react就是如此，他根據自己的特點，實現了部分**的簡化。
上面的特點為react的核心，其實react的核心**並不多，所以很多人都深究過，很多文章都有詳細解釋，在下面的好文章收錄中都有提到，這裡不再贅述，只做總結。
下篇我們就會講講diff演算法的詳細流程圖
**演算法詳解：
react原始碼剖析（這篇文章對圖中移位演算法有詳細解釋）：
原始碼分析：
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 之 diff 演算法
寫前端的人都知道 react 框架採用的是虛擬 dom。而虛擬 dom 就是 js 物件到真實 dom 的一種對映。list item item 1 li ul children children item 1 從上述案例中可以看到，真實 dom 對映出來的 js 物件 虛擬 dom 是一種樹形結構...