啥是React Fiber？

React Fiber，簡單來說就是一個從React v16開始引入的新協(xié)調(diào)引擎，用來實現(xiàn)Virtual DOM的增量渲染。

說人話：就是一種能讓React視圖更新過程變得更加流暢順滑的處理手法。

我們都知道：進(jìn)程大，線程小。而Fiber（纖維）是一種比線程還要細(xì)粒度的處理機制。從這個單詞也可以猜測：React Fiber會很“細(xì)”。到底怎么個細(xì)法，我們接著往下看。

為什么會有React Fiber？

之前說了，React Fiber是為了讓React的視圖更新過程變得更加流暢順滑。怎么，之前React的視圖更新不流暢，不順滑了？

還真是的，在React v16之前，React的視圖更新確實存在很大的性能問題，其中首當(dāng)其沖的，就是它的同步更新機制。

在React決定要加載或更新一顆組件樹之前，會大致做出如下一系列動作：調(diào)用各組件的生命周期函數(shù) --> 計算和對比Virtual DOM --> 更新真實的DOM樹。這個過程是同步的，也就是說，一旦這個過程開始，它就會一鼓作氣跑完，一直到真實DOM樹更新完畢。

然而，當(dāng)組件樹比較龐大時，這種機制的問題就來了：一顆擁有300個組件的組件樹需要全部更新，假設(shè)一個組件更新只需耗時1ms，整棵樹更新一次就需要耗時300ms。在這300ms期間，瀏覽器的主線程一直在“專心致志”地忙著更新這顆組件樹（這時函數(shù)的調(diào)用棧會非常長），對于頁面上的任何操作都是“不聞不問”的。在這期間，假如用戶在一個輸入框敲了幾個字，頁面上也不會有任何反應(yīng)，因為渲染按鍵輸入結(jié)果也需要主線程來做，然而此時主線程正忙著更新組件樹呢。等到300ms結(jié)束了，瀏覽器主線程有空了，才把剛剛敲的那幾個字渲染到input輸入框內(nèi)。

太卡了，真的。

由于JavaScript的單線程工作特點，業(yè)內(nèi)一直有個這樣的原則：任何動作都不要長時間霸占主線程，如果遲遲不歸還主線程，那么在這期間程序就沒法對其他輸入作出響應(yīng)。輸入了卻沒有響應(yīng)，或者說響應(yīng)來的很慢，也就是我們常常說的“卡頓”。顯然，React的同步更新機制在組件樹龐大時就違反了這一原則，犯了大忌。

這就是React Fiber出現(xiàn)的原因：為了解決舊版React視圖更新的性能瓶頸。

React Fiber到底怎么工作的？

首先，React Fiber并沒有解決更新龐大組件樹耗時長的問題，實際上總的耗時還是一樣的長。但是它解決了一個被廣大開發(fā)者口誅筆伐的惡行：長時間霸占主線程不放。

而它解決的方法就是：分片。

它的工作原理是這樣的：把耗時長的更新任務(wù)拆解成一個個小的任務(wù)分片，每執(zhí)行完一個小的任務(wù)分片，都?xì)w還一次主線程，看看有沒有什么其他緊急任務(wù)要做。如果在歸還主線程時恰巧發(fā)現(xiàn)有緊急任務(wù)，那么會馬上停掉當(dāng)前更新任務(wù)，轉(zhuǎn)而讓主線程去做緊急任務(wù)，等主線程做完緊急任務(wù)，再重新做更新任務(wù)。（注意⚠️：是重新！不是從上次被打斷的點繼續(xù)）；如果沒有緊急任務(wù)，才敢唯唯諾諾地繼續(xù)做接下來的任務(wù)分片。

簡單來說，就是降了視圖更新的優(yōu)先級，把更新過程碎片化。

現(xiàn)在我們捋一捋，React Fiber會這樣處理一個更新過程：

1. 將一個更新過程分為Reconciliation階段和Commit階段，Reconciliation階段（調(diào)度階段）會更新數(shù)據(jù)并生成新的虛擬DOM，并且對新舊的虛擬DOM進(jìn)行diff，得到需要更新的元素，放到新的更新隊列中；而Commit階段（渲染階段）則會遍歷更新隊列，并且將所有的變更一次性更新到真實DOM中；
2. 對于Reconciliation階段進(jìn)行分片處理，這個階段可以被更緊急的任務(wù)打斷，分片任務(wù)做到一半可能要重來；
3. 對于Commit階段，直接一鼓作氣把DOM更新完，不能被打斷。
   

React Fiber的實現(xiàn)原理

React Fiber實現(xiàn)的難點有兩個：暫停/重啟如何實現(xiàn)？任務(wù)如何分散執(zhí)行？

對于前者，暫停/重啟意味著我們需要保存狀態(tài)，這里在實現(xiàn)上用到了具有鏈表和指針的“單鏈表樹遍歷算法”，能夠記錄遍歷過程中的上一步和下一步。

而對于后者，則用到了requestAnimationFrame和requestIdelCallback這兩個API，其中requestAnimationFrame是瀏覽器在每一幀都一定會執(zhí)行的，可以放一些高優(yōu)先級的任務(wù)；而requestIdelCallback則是瀏覽器在一幀中最后如果有空閑時間才會去執(zhí)行，可以放一些低優(yōu)先級的任務(wù)，需要polyfill（因為兼容性不佳）。

React Fiber對我們?nèi)粘ｉ_發(fā)有什么影響？

React Fiber在Reconciliation階段可能會調(diào)用以下生命周期函數(shù)（這也意味著在這個階段的生命周期函數(shù)在一次加載和更新過程中可能會被多次調(diào)用）：

• componentWillMount
• componentWillUpdate
• componentWillReceiveProps
• shouldComponentUpdate
  

如果你恰巧沒有上react hooks的車，而是使用傳統(tǒng)的類組件進(jìn)行開發(fā)，那么切記，不要在以上幾個生命周期函數(shù)中做只需要做一次的操作（比如：頁面初始化時發(fā)起一個ajax請求獲取數(shù)據(jù)）。

如果你平常使用react hooks進(jìn)行開發(fā)，那沒事了，就當(dāng)看了個熱鬧。

以上就是詳解React Fiber的工作原理的詳細(xì)內(nèi)容，更多關(guān)于React Fiber的工作原理的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論