使用React或者RN開發APP如果不知道Diff演算法的話簡直是說不過去啊。畢竟“知其然，知其所以然”這句老話從遠古喊到現代了。

以下內容基本是官網文章的一個總結、壓縮。這次要謙虛一下，畢竟深入研究RN的時間不多，如果有什麼理解的不對的地方還請各位讀者指正。

React的元件在渲染之後組成了一個樹形結構。在React繪製的時候，會在記憶體裡對應每一個元件建立一個節點，並最終形成一個和元件樹結構一樣的樹。我們就叫這個樹叫影子樹（這個叫法不是出自官方）。我們可以理解為這個影子樹包含了React App組建的結構和一些屬性值。

在元件發生變化的時候（一般是呼叫了setState），React會形成一個影子樹二號。然後對比影子樹1號和影子樹2號的不同。

我們知道對比兩個樹的最小不同的時間複雜度是O(n3
)，n是樹裡的節點數。這個複雜度下，稍有量級的應用都會遇到一個問題：無法忽略的慢。於是，FB的同學們使用了更加高效的啟發式演算法，把複雜度降低到了O(n)。

但是，不管是什麼演算法最後都需要對比兩個節點的不同。有三種情況需要考慮：

一、節點之間的比較

節點，英語裡的Node，包括兩種型別:一個是React元件，一個是HTML的DOM。下文也是同樣的含義。

節點型別不同

如果是HTML DOM不同的話，直接使用新的替換舊的。

如果是元件型別不同的話也直接使用新的替換舊的。

HTML DOM型別相同

在React裡樣式並不是一個純粹的字串，而是一個物件，這樣的話在樣式發生改變的時候只需要改變替換變化以後的樣式。修改完當前節點之後，遞迴處理該節點的子節點。

元件型別相同

元件型別相同的，使用React機制處理。一般是使用新的props替換掉舊的props，並在之後呼叫元件的componentWill/DidReceiveProps方法，之前的元件的render方法會被呼叫。節點的比較機制開始遞迴作用於這個它的子節點上。

二、兩個列表之間的比較

一列節點中的一個發生了改變，React並沒有什麼好方法來處理這個問題。迴圈新舊兩個列表，並找出不同是React唯一的處理方法。

但是，有一個可以把這個演算法的複雜度降低的辦法。那就是我們在生成一列節點的時候給每一個節點上新增一個key。這個key只需要在這一列節點中唯一，不需要全域性唯一。

三、取捨

需要注意的是，上面的啟發式演算法是基於兩點假設:
*型別想聽的節點總是生成同樣的樹，而型別不同的節點也總是生成不同的樹。
*可以為多次render都表現穩定的節點設定key。

上面的節點之間的比較演算法基本就是基於這兩個假設而實現的。也就是要提高React應用的效率，需要我們按照這兩點假設來開發。

否則，React會重獲整個APP。那就是噩夢一樣的情況了。