react fiber的實現邏輯

前言

react在16版本實現了react fiber。
那麼react fiber究竟是什麼呢？
官方的一句話解釋是「React Fiber是對核心算法的一次從新實現」
對於使用者而言，不須要作什麼額外操做來使用它。

react fiber出現的緣由是什麼？

在複雜的DOM結構中，若是有大量的組件要被渲染，那麼會形成頁面響應特別慢的狀況，好比頁面響應延遲幾百毫秒，用戶就可能感受到卡頓
另外一方面是作一些複雜的動畫的時候，動畫的卡頓是顯而易見的

爲了優化react在改變狀態時的效率，react官方用fiber的方式從新實現了核心邏輯。具體來講，就是setState的邏輯重寫（useState同理）。

具體來講有什麼改變呢？聽我慢慢道來

1.virtual Dom數據結構改變

在react16之前，虛擬樹的存在形式、渲染方式都是樹狀的。什麼是樹狀的呢？就是從根節點開始，遞歸嵌套地渲染根節點的子節點。

如圖，先渲染第一層的節點，再渲染第二層的第一個節點、第二層第一個節點的子節點……
重要的是，這個過程是一個不可打斷的過程，只能等渲染完，才能去作別的事

react fiber實現以後，是用一個單鏈表的形式去渲染的

如圖
渲染的順序是
a1->b1->b2->c1->d1->d2->b3->c2
順序並無改變，可是構成結點之間相互聯繫的結構改變了。
原來的結構，只是單純的父節點->子節點的關係
如今，變成了單純的鏈式關係
從圖中能夠看出，a1跟b2並無直接的關係（除了return，後面會說return），a1只是「通知」b1要進行渲染，由b1「通知」b2進行渲染。
b2及其子節點渲染完以後，再「通知」a1：「我渲染完了」
等b3及其子節點也渲染完以後，a1會變成「渲染完成」的狀態，就完成了整棵樹的渲染

2.添加了render和commit階段

fiber的渲染分爲兩個階段
第一個階段是render階段，肯定哪些組件須要更新、如何更新。這個過程能夠被打斷
第二個階段是commit階段，肯定怎麼更新以後，作DOM的具體渲染更新。這個過程不能被打斷，並且是同步渲染。

3.添加「時間分片」

時間分片，通俗地說，就是將任務分紅幾種類型，具體爲：
1.當即須要執行的任務
2.用戶無操做期間須要執行的任務
3.正常任務
4.低優先級任務
5.瀏覽器空閒時才執行的任務
按照優先級執行，若是插入了新的任務，那麼也按照優先級從新排序
這個模塊是用兩個es6的新API實現的，分別是window.requestAnimationFrame和window.requestIdleCallback。具體用法能夠查MDN

結語

以上就是fiber的實現邏輯，我的認爲其邏輯主要改變的是渲染的數據結構部分。固然其對於咱們使用react來講並無太大的影響。