React Diff算法一覽

前言

diff算法一直是React系統最核心的部分，而且因爲演化自傳統diff，使得比較方式從O(n^3)降級到O(n)，而後又改爲了鏈表方式，可謂是變化萬千。

傳統Diff算法

傳統diff算法須要循環比較兩棵樹，全部節點的循環，那麼單純比較次數就是O(n^2)，n*n

P                         L
          A                     A  
         / \                   / \
        /   \                 /   \
       B     D     ====>     D     B
      /                             \
     C                               C

刷刷刷，每次都須要循環遍歷，因而有如下的查找過程：

PA->LA
PA->LB
PA->LC
PA->LD
PB->LA
...

除了查找過程消耗了O(n^2)以外，找到差別後還要計算最小轉換方式，最終結果爲O(n^3)。

因此，傳統的diff算法的時間複雜度爲O(n^3)。

若是React運用這種算法，那麼節點過多，將會有大量的開銷，雖然CPU的秒速達到30億次計算，但依舊是很是耗費性能的。

有沒有什麼方式能夠下降時間複雜度呢？

因而，React15對傳統的diff作了一些限制，使得時間複雜度變爲了O(n)。

React 15的Diff算法

《深刻React技術棧》這本書，給出了三種Diff策略分析，文字描述太過抽象，直接表述以下：

Tree diff、Component diff、Element diff

Tree diff

什麼是Tree diff？先上圖：

 

首先，進行同級比較，並不是循環比較。這樣比較次數就降爲一層一次，時間複雜度直接降爲O(n)

若是同級相同位置節點不同，則直接刪除替換，簡單粗暴。

而對於節點移動，一樣道理，也是簡單粗暴的刪除重建。以下圖所示（圖中第四步應該是刪除左側的整棵A樹）：

Component diff

很少說，先上圖：

其實component diff至關因而子樹的diff，基本方案和tree diff是一致的，若是如上圖D變爲G，那麼直接刪除D這一整棵樹，而後從新渲染G樹。

依舊是簡單粗暴。

Element diff

對於同一節點的元素，diff算法提供了三種操做：插入、移動、刪除。仍是先上圖：

此時的操做，是B、D不作任何操做，AC移動到相應位置【前提是都有相同的key】

若是，此時的key不相同，全都發生了變化，那麼節點全都是要刪除從新構建，將會消耗大量性能。

React 16的Diff算法

React16相比React15的Diff算法發生了很大的變化，其中最主要就是引入了Fiber循環任務調度算法。

Fiber

Fiber是什麼？幹了什麼？

Fiber在diff階段，作了以下的操做：

一、能夠隨時將diff操做進行任務拆分。

二、diff階段的每一個任務能夠隨時執行或者停止。

三、diff階段任務調度優先級控制。

因此，Fiber至關因而，在15的diff算法階段，作了優先級的任務調度控制，

因此，Fiber是根據一個fiber節點（VDOM節點）來拆分，以fiber node爲一個任務單元，一 個組件實例都是一個任務單元。任務循環中，每處理完一個fiber node，能夠中斷/掛起/恢復。

它又是如何可以進行這樣的異步操做的呢？這就不得不說一個方法：requestIdleCallback

瀏覽器提供的requestIdleCallback API中的Cooperative Scheduling可讓瀏覽器在空閒時間執行回調（開發者傳入的方法），在回調參數中能夠獲取到當前幀（16ms）剩餘的時間。利用這個信息能夠合理的安排當前幀須要作的事情，若是時間足夠，那繼續作下一個任務，若是時間不夠就歇一歇，調用requestIdleCallback來獲知主線程不忙的時候，再繼續作任務
Fiber Node是什麼？

鏈表！

將要處理的節點，存在鏈表結構，那麼就可以作到節點複用。【這大概是Fiber的核心吧】

大致上的Diff引入了Fiber以後，咱們就增長了更多的鏈表複用功能，經過這一點，咱們可使得React Diff的性能獲得提高。

總結

其實，這篇文章着重講的仍是React15的diff，React 16的diff並未詳細探討，接下來會出一篇文章，單獨講解React 16的Diff策略。不過React 16Diff策略的核心Fiber是不可錯過的點。

參考資料

《深刻React技術棧》

https://segmentfault.com/a/1190000016723305

https://www.jianshu.com/p/3ba0822018cf

https://www.jianshu.com/p/21a445066d51?from=timeline

https://www.zhihu.com/question/66851503/answer/246766239

https://blog.csdn.net/P6P7qsW6ua47A2Sb/article/details/82322033

https://blog.csdn.net/VhWfR2u02Q/article/details/100011830

 

 

個人博客：http://www.gaoyunjiao.fun/?p=170