啥是React Fiber？

React Fiber，簡(jiǎn)單來(lái)說(shuō)就是一個(gè)從React v16開(kāi)始引入的新協(xié)調(diào)引擎，用來(lái)實(shí)現(xiàn)Virtual DOM的增量渲染。

說(shuō)人話(huà)：就是一種能讓React視圖更新過(guò)程變得更加流暢順滑的處理手法。

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

為什么會(huì)有React Fiber？

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

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

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

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

太卡了，真的。

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

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

React Fiber到底怎么工作的？

首先，React Fiber并沒(méi)有解決更新龐大組件樹(shù)耗時(shí)長(zhǎng)的問(wèn)題，實(shí)際上總的耗時(shí)還是一樣的長(zhǎng)。但是它解決了一個(gè)被廣大開(kāi)發(fā)者口誅筆伐的惡行：長(zhǎng)時(shí)間霸占主線(xiàn)程不放。

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

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

簡(jiǎn)單來(lái)說(shuō)，就是降了視圖更新的優(yōu)先級(jí)，把更新過(guò)程碎片化。

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

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

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

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

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

而對(duì)于后者，則用到了requestAnimationFrame和requestIdelCallback這兩個(gè)API，其中requestAnimationFrame是瀏覽器在每一幀都一定會(huì)執(zhí)行的，可以放一些高優(yōu)先級(jí)的任務(wù)；而requestIdelCallback則是瀏覽器在一幀中最后如果有空閑時(shí)間才會(huì)去執(zhí)行，可以放一些低優(yōu)先級(jí)的任務(wù)，需要polyfill（因?yàn)榧嫒菪圆患眩?/p>

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

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

• componentWillMount
• componentWillUpdate
• componentWillReceiveProps
• shouldComponentUpdate
  

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

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

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

最新評(píng)論