什麼是React Fiber

React Fiber是類似雙向鍊錶的資料結構；ReactDom會根據jsx，為每個dom節點產生一個fiber節點，child指向第一個子節點、sibling指向下一個兄弟節點、return指向父節點的資料結構就是fiber資料結構。

本教學操作環境：Windows10系統、react17.0.1版、Dell G3電腦。

什麼是React Fiber

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

以上是fiber概念，在程式碼中fiber是什麼呢？其實fiber就是一個類似雙向鍊錶的資料結構。如下圖:

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

fiber工作原理

  已經了解了fiber的資料結構，那麼fiber是如何在react異步可中斷的更新中發揮作用的呢?

  首先我們先看下原來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，這就產生了bug。

  react v16解決的方式是雙快取技術，也就是在更新時，react儲存兩個fiber資料結構，如下圖：

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

  我們知道，當react v16前的版本更新時，會進行jsx和虛擬dom樹進行diff演算法，計算結果就是最終需要更新的視圖。而在rea​​ct v16 diff演算法是將jsx和workInProgress fiber進行計算，最終得出最終視圖，然後將current指標指向workInProgress fiber，渲染新的視圖。跟workInProgress fiber進行diff演算法是在記憶體中進行的，即使被中斷也對現有視圖不產生影響。

推薦學習：《react影片教學》

以上是什麼是React Fiber的詳細內容。更多資訊請關注PHP中文網其他相關文章！