這篇文章主要介紹了React Fiber的概念是什么的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇React Fiber的概念是什么文章都會有所收獲，下面我們一起來看看吧。

成都創(chuàng)新互聯(lián)公司專注于企業(yè)成都營銷網(wǎng)站建設、網(wǎng)站重做改版、南岳網(wǎng)站定制設計、自適應品牌網(wǎng)站建設、H5響應式網(wǎng)站、電子商務商城網(wǎng)站建設、集團公司官網(wǎng)建設、成都外貿網(wǎng)站建設公司、高端網(wǎng)站制作、響應式網(wǎng)頁設計等建站業(yè)務，價格優(yōu)惠性價比高，為南岳等各大城市提供網(wǎng)站開發(fā)制作服務。

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

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

什么是React Fiber

fiber是個什么東西？因為English是國外程序員的母語，所以他們對代碼中的命名都是有考究。fiber意思是纖程，大家都知道進程、線程，纖程是較線程更細的東西。因為JS是單線程的，所以從這個角度分析，fiber的命名是很有考究的。

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

reactDom會根據(jù)jsx，為每個dom節(jié)點生成一個fiber節(jié)點，(注意：當textNode是唯一的子節(jié)點時，不會單獨生成fiber節(jié)點)，child指向第一個子節(jié)點，sibling指向下一個兄弟節(jié)點，return指向父節(jié)點。這樣的數(shù)據(jù)結構就是fiber數(shù)據(jù)結構，當然fiber中還有存儲了其他數(shù)據(jù)。

fiber工作原理

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

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

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

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

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

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

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

關于“React Fiber的概念是什么”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“React Fiber的概念是什么”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

新聞標題：ReactFiber的概念是什么
標題來源：http://www.chinadenli.net/article0/jigoio.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供標簽優(yōu)化、靜態(tài)網(wǎng)站、品牌網(wǎng)站設計、虛擬主機、Google、品牌網(wǎng)站建設

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)