React Fiber的概念是什么

這篇文章主要介紹了React Fiber的概念是什么的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇React Fiber的概念是什么文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。

React Fiber是一個(gè)類(lèi)似雙向鏈表的數(shù)據(jù)結(jié)構(gòu)；ReactDom會(huì)根據(jù)jsx，為每個(gè)dom節(jié)點(diǎn)生成一個(gè)fiber節(jié)點(diǎn)，child指向第一個(gè)子節(jié)點(diǎn)、sibling指向下一個(gè)兄弟節(jié)點(diǎn)、return指向父節(jié)點(diǎn)的數(shù)據(jù)結(jié)構(gòu)就是fiber數(shù)據(jù)結(jié)構(gòu)。

本教程操作環(huán)境：Windows10系統(tǒng)、react17.0.1版、Dell G3電腦。

什么是React Fiber

fiber是個(gè)什么東西？因?yàn)镋nglish是國(guó)外程序員的母語(yǔ)，所以他們對(duì)代碼中的命名都是有考究。fiber意思是纖程，大家都知道進(jìn)程、線(xiàn)程，纖程是較線(xiàn)程更細(xì)的東西。因?yàn)镴S是單線(xiàn)程的，所以從這個(gè)角度分析，fiber的命名是很有考究的。

以上是fiber概念，在代碼中fiber是什么呢？其實(shí)fiber就是一個(gè)類(lèi)似雙向鏈表的數(shù)據(jù)結(jié)構(gòu)。如下圖:

reactDom會(huì)根據(jù)jsx，為每個(gè)dom節(jié)點(diǎn)生成一個(gè)fiber節(jié)點(diǎn)，(注意：當(dāng)textNode是唯一的子節(jié)點(diǎn)時(shí)，不會(huì)單獨(dú)生成fiber節(jié)點(diǎn))，child指向第一個(gè)子節(jié)點(diǎn)，sibling指向下一個(gè)兄弟節(jié)點(diǎn)，return指向父節(jié)點(diǎn)。這樣的數(shù)據(jù)結(jié)構(gòu)就是fiber數(shù)據(jù)結(jié)構(gòu)，當(dāng)然fiber中還有存儲(chǔ)了其他數(shù)據(jù)。

fiber工作原理

??已經(jīng)了解了fiber的數(shù)據(jù)結(jié)構(gòu)，那么fiber是如何在react異步可中斷的更新中發(fā)揮作用的呢?

??首先我們先看下原來(lái)react虛擬dom(v16之前版本)為什么支持不了可中斷的更新，首先我們假設(shè)虛擬都沒(méi)可以中斷(實(shí)際不可中斷)，比如以下代碼

// 更新前
 <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
 </ul>
 // 更新一
 <ul>
    <li>2</li>
    <li>3</li>
    <li>4</li>
 </ul>

??我們把123更新為234(更新一)，在更新過(guò)程中，當(dāng)1->2, 2->3完成時(shí)被中斷了，3沒(méi)有變成4，那么結(jié)果就是233，這就產(chǎn)生了bug。

??react v16解決的方式是雙緩存技術(shù)，即在更新時(shí)，react存儲(chǔ)兩個(gè)fiber數(shù)據(jù)結(jié)構(gòu)，如下圖：

??上圖中，rootFiber是react應(yīng)用，footFiberNode是應(yīng)用掛在的節(jié)點(diǎn)，current指向的fiber是渲染在頁(yè)面中的fiber(即出現(xiàn)在屏幕中的視圖)，我們稱(chēng)它未current fiber，current fiber的每一個(gè)fiber節(jié)點(diǎn)都有一個(gè)alternode指向另一個(gè)棵樹(shù)的相同fiber節(jié)點(diǎn)，我們稱(chēng)這個(gè)fiber為workInProgress fiber。

??我們知道，當(dāng)react v16前的版本更新時(shí)，會(huì)進(jìn)行jsx和虛擬dom樹(shù)進(jìn)行diff算法，計(jì)算結(jié)果就是最終需要更新的視圖。而在react v16 diff算法是將jsx和workInProgress fiber進(jìn)行計(jì)算，最終得出最終視圖，然后將current指針指向workInProgress fiber，渲染新的視圖。跟workInProgress fiber進(jìn)行diff算法是在內(nèi)存中進(jìn)行的，即使被中斷也對(duì)現(xiàn)有視圖不產(chǎn)生影響。

關(guān)于“React Fiber的概念是什么”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“React Fiber的概念是什么”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。