要掌握react的diff演算法我們必須先了解一下其渲染的機制：在每一次的狀態或者屬性更新的時候，react元件的render方法會進行渲染，返回乙個虛擬dom物件，這個就是react的渲染機制。
但是這裡就有個問題，每次生成新的dom結構，也還是要轉化為真實的dom，還是會帶來大量的真實dom的操作，會影響程式的執行效率。這時就涉及了react的比較狀態變化前後的兩個樹的diff演算法：在狀態變化後通過比較兩次虛擬dom樹結構的變化，找出兩者的差異部分，再去更新到真實的dom樹上，這樣就減少了對dom的操作，提公升了程式效率。
我們都知道react元件必須由乙個根節點包裹，當根節點發生變化，例如：從div變為span或元件之間a換成b時，react會認為新舊兩棵樹完全不同，不會再繼續向下比較，會拆掉整課舊樹，整個更新到真實的dom樹上，提一點這時會呼叫componentwillunmount函式。
如果根節點不變化，只會去更新變化的屬性，如下：
diff演算法這時回去比較他們的屬性變化，也只會去更新classname。
呼叫的是相同的元件的時候，如果狀態變化，會使用到週期函式componentwillreceiveprops()和componentwillupdate()，元件比較的原則是在render執行之後，從根節點開始向下比較進行渲染。比較完差異後再進行渲染。
下面來具體看一下：
我們比較一下上下兩個樹的變化，diff演算法從根節點開始進行比較，只會認為新增了乙個third，後進行插入渲染。我們再看一下下面這個例子：
我們觀察可以看到third節點提公升至第一位，這時比較兩樹的變化時react就會認為ul下每個節點都發生了變化：first變為third，second變為first，並新增了second，這時的渲染就會消耗過大，效率很低。
react應對這種情況是給節點新增key值，key值的唯一性在渲染時就會自動進行判斷，例如上面的兩棵樹：
這時候就只會認為只有新增third的變化，所以另外有一點我們要注意key值不要用index，因為如果順序變化，key就會變化，在和之前的key比較，key一樣的但是元素卻不同了，資料的賦值取值會受到影響，所以不建議使用。
react的diff演算法，比較新舊兩棵虛擬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 是一種樹形結構...
react中Diff演算法的不同
1.傳統diff演算法 將所有節點遍歷，增刪減改 2.reactdiff演算法 分為三塊 1 比較虛擬dom和實際dom的同一層節點，忽略子節點 2 對比元件型別，如果一樣繼續比較dom節點，如果不同，直接替換整個元件節點 3 提供節點操作 同一層節點 插入 移動 刪除 附錄 傳統diff演算法 l...