快速理解 React 基礎：Fiber

發表於 分類於 ， Disqus：
快速理解 React Fiber

Fiber 是什麼？

Fiber 是一純 JavaScript object
在 React 16.3 釋出，抽換整個 React 底層，將舊版的Virtual DOM Tree -> Fiber Tree
主要是強化下列兩點:

  1. Animations (動畫)
  2. Responsiveness (反應能力)

Fiber 特性

  • 一個Fiber(即 Fiber node)，就是一個工作單位(a unit of work)
  • 可以將頁面渲染的任務切分成 chunks
  • 可以設定優先級(prioritize)，以調整工作順序
  • 任務可以暫停，之後再繼續執行(當有高優先級的任務進來時，暫停現有任務，處理完後再回來繼續處理)
  • 可以重複使用之前的 work，也可以將不需要的 work 丟棄掉
  • 非同步(異步)

Fiber node

  • 跟某個東西有1對1關聯(1-1 relationship)，如 component instance, DOM node, provider, Fragment…之類的
  • Fiber 跟 react element 很像，主要差別是 Fiber 會盡可能的重複利用。大部份 Fiber 都在 initial mount 就建立完成
  • Fiber 也會組成一棵樹(Fiber Tree)，其 relationship 包含 child, sibling, return
    • 取名為 Fiber Tree 就是要避免與舊版的 Virtual DOM Tree 混淆
    • Fiber Tree 會依深度優先搜尋 (DFS) 由上至下遍歷，再由 return 回到父節點拜訪 sibling
    • 拜訪順序: child -> 自身 -> sibling
    • 由LinkedList 組成，遍歷過程是 while loop 而非 recursive(遞迴)。16.3 以前的 Virtual DOM Tree 使用 stack

Phase

有 2 個 phases

  1. render phase (processing) -> 可排列優先順序(prioritized)、可暫停、廢棄掉。此時皆在背景作業，user 看不到
  2. commit phase (committing) -> 同步動作，不可被中斷。結束後反應到畫面上

可以把 render phase 的主要目的想成需要產出

  • 一個 Fiber Tree
  • 一個 Effect List

Effect List(副作用清單): 當 Fiber Tree 處理完後，會組出 Effect List。再遍歷 effect list 處理副作用(同時解決舊版 stack 過深造成的效能問題)

以 React 來說主要的 side effect 有兩種：

  • DOM 操作
  • calling lifecycle method

參考資料

medium / React 開發者一定要知道的底層機制 — React Fiber Reconciler
YouTube / What Is React Fiber? React.js Deep Dive #2