前言
一提到React，學過的人都會想到提高效能的兩大神奇特色：虛擬DOM & diff演算法。React diff作為Virtual DOM的加速器，其演算法的改進優化是React整的介面渲染的基礎，以及效能提高的保障。雖然開發中不需要知道其執行機制，但是理解之後有助於更好的理解React元件的生命週期，以及優化React程式。
React diff表示什麼？表示React針對傳統的diff演算法進行了React風格的優化！
傳統diff演算法
計算一棵樹形結構轉換成另一棵樹形結構的最少操作，是一個複雜且值得研究的問題。
傳統 diff 演算法通過迴圈遞迴對節點進行依次對比，效率低下，演算法複雜度達到 O(n^3)，其中 n 是樹中節點的總數。O(n^3) 到底有多可怕，這意味著如果要展示1000個節點，就要依次執行上十億次的比較。代價太高。
如果 React 只是單純的引入 diff 演算法而沒有任何的優化改進，那麼其效率是遠遠無法滿足前端渲染所要求的效能。
因此，想要將 diff 思想引入 Virtual DOM，就需要設計一種穩定高效的 diff 演算法，而 React 做到了！
那麼，React diff 到底是如何實現的呢？
React diff優化
傳統的diff演算法的複雜度為O(n^3),顯然無法滿足效能要求。Facebook工程師通過大膽的策略，將O(n^3)複雜度簡化成了O(n),怎麼做到的呢？
diff策略
- Web UI 中 DOM 節點跨層級的移動操作特別少，可以忽略不計。
- 擁有相同類的兩個元件將會生成相似的樹形結構，擁有不同類的兩個元件將會生成不同的樹形結構。
- 對於同一層級的一組子節點，它們可以通過唯一 id 進行區分。
基於以上三個前提策略，React團隊對傳統diff演算法優化基於三個策略（《深入React技術棧》等講的確實有點難理解且模糊，這邊經過理解給出了自己的理解）
- a->tree diff
- b->component diff
- c->element diffd
優化策略a: tree diff
基於tree diff策略，React對Virtual DOM樹進行 分層比較、層級控制，只對相同顏色框內的節點進行比較(同一父節點的全部子節點)，當發現某一子節點不在了直接刪除該節點以及其所有子節點，不會用於進一步的比較，在演算法層面上就是說只需要遍歷一次就可以了，而無需在進行不必要的比較，便能完成整個DOM樹的比較。
如圖：
同屬於分層比較、層級控制範疇，還會出現DOM節點跨層級的移動操作(React中這種情況DOM節點不穩定，損害效能，所以開發中不推薦這種情況的出現)，React diff怎麼解決的呢？如下圖情況：
上面描述的是同一層次不同DOM節點範疇，React diff用趨近於‘暴力’的方式，並不是把A B C 直接拼接到 D 節點上，而是刪除A B C 三個節點之後在 D 下面在建立的 A B C。這裡不做詳細分析，想直觀理解該過程，建議閱讀這篇用在生命週期裡打log的方式展示上述過程
優化策略b: component diff
React是基於元件構建應用的，對於元件間的比較所採用的策略也是簡潔高效。
- 對於同一型別的元件，根據Virtual DOM是否變化也分兩種，可以用shouldComponentUpdate()判斷Virtual DOM是否發生了變化，若沒有變化就不需要在進行diff，這樣可以節省大量時間，若變化了，就對相關節點進行update
- 對於非同一類的元件，則將該元件判斷為 dirty component，從而替換整個元件下的所有子節點。
如下圖，當 component D 改變為 component G 時，即使這兩個 component 結構相似，一旦 React 判斷 D 和 G 是不同型別的元件，就不會比較二者的結構，而是直接刪除 component D，重新建立 component G 以及其子節點。雖然當兩個 component 是不同型別但結構相似時，React diff 會影響效能，但正如 React 官方部落格所言：不同型別的 component 是很少存在相似 DOM tree 的機會，因此這種極端因素很難在實現開發過程中造成重大影響的。
而如果上圖中左一中的D節點只是單純的改變什麼state，update就好了。
優化策略c: element diff
所有同一層級的子節點.他們都可以通過key來區分-----並遵循策略a、b。
沒經過優化的演算法，實現新老交替的方法是將A B C D全部刪除之後，在新建B A D C，這樣的實現方法顯然很垃圾，React diff怎麼優化呢？是通過為每一個節點新增key值標識。
新老集合所包含的節點，如上圖所示，新老集合進行 diff 差異化對比，通過 key 發現新老集合中的節點都是相同的節點，因此無需進行節點刪除和建立，只需要將老集合中節點的位置進行移動，更新為新集合中節點的位置，此時 React 給出的 diff 結果為：B、D 不做任何操作，A、C 進行移動操作，即可。
上述分析的是新老集合中存在相同節點但是位置不同，要是有新加入的節點且有舊節點需要刪除呢？這裡不再囉嗦，如下圖：
加了key的好處：
如果不加key，map遍歷的時候控制檯發出warn，既然是warn就說明不加也能實現遍歷，但是是經過刪除、建立、插入實現，這樣的話損害效能可想而知，而加上key就可以有助於React diff演算法結合Virtual DOM找到最合適的方式進行diff，最大限度的實現高效diff，即哪裡需要改變，就改變哪裡！
總結
- React 通過分層求異的策略，對 tree diff 進行演算法優化；
- React 通過相同類生成相似樹形結構，不同類生成不同樹形結構的策略，對 component diff 進行演算法優化；
- React 通過設定唯一 key的策略，對 element diff 進行演算法優化；
- React 通過制定大膽的 diff 策略，將 O(n3) 複雜度的問題轉換成 O(n) 複雜度的問題；
- 建議，開發時保持穩定的DOM結構有助於效能的提升；
參考
- 《深入React技術棧》
- React 原始碼剖析系列 － 不可思議的 react diff
- 淺談React diff演算法與key