前端面試必考題：React Hooks 原理剖析

array_huang發表於2020-06-29
前端面試ReactHook
接前文《React Hooks 加持下的函式元件設計》

為什麼要學習 React Hooks 原理

首先，功利點來說：目前前端框架三分天下：React、Vue、Angular，而 React 自從 v16.8.0 版本正式推出 React Hooks 概念後，風勢已經從原來的類元件猛地轉向函式元件，這是一個在設計模式、心智模型層次，且非常近期的革新，因此只要是你談到自己會 React ，就一定會在面試中被問到 React Hooks 的原理。

再者，從實際角度出發，瞭解 React Hooks 原理對我們日常開發除錯都有莫大的好處；我們可以認識到 React Hooks 其實也並不是什麼黑魔法，我們在開發中碰到的奇奇怪怪的問題，只不過是我們還沒有掌握 React Hooks 導致的，也不需要用一些 tricky 的方法來解決。

useState / useReducer

useState 和 useReducer 都是關於狀態值的提取和更新，從本質上來說沒有區別，從實現上，可以說 useState 是 useReducer 的一個簡化版，其背後用的都是同一套邏輯。

React Hooks 如何儲存狀態

React 官方文件中有提到，React Hooks 儲存狀態的位置其實與類元件的一致；翻看原始碼後，我發現這樣的說法沒錯，但又不全面：

  • 兩者的狀態值都被掛載在元件例項物件FiberNode的memoizedState屬性中。
  • 兩者儲存狀態值的資料結構完全不同；類元件是直接把 state 屬性中掛載的這個開發者自定義的物件給儲存到memoizedState屬性中；而 React Hooks 是用連結串列來儲存狀態的，memoizedState屬性儲存的實際上是這個連結串列的頭指標。

下面我們來看看這個連結串列的節點是什麼樣的 —— Hook 物件：

// react-reconciler/src/ReactFiberHooks.js
export type Hook = {
  memoizedState: any, // 最新的狀態值
  baseState: any, // 初始狀態值，如`useState(0)`，則初始值為0
  baseUpdate: Update<any, any> | null,
  queue: UpdateQueue<any, any> | null, // 臨時儲存對狀態值的操作，更準確來說是一個連結串列資料結構中的一個指標
  next: Hook | null,  // 指向下一個連結串列節點
};

官方文件一直強調 React Hooks 的呼叫只能放在函式元件/自定義 Hooks 函式體的頂層，這是因為我們只能通過 Hooks 呼叫的順序來與實際儲存的資料結構來關聯：
useState 與連結串列節點的對應關係.drawio.png

PS：雖然上面一致都是以 useState 和 useReducer 來作為例子說明，但實際上所有 React Hooks 都是用這種連結串列的方式來儲存的。

React Hooks 如何更新狀態

熟悉 useState API 的話，我們都知道怎麼去更新狀態：

const [name, setName] = useState('')
setName('張三')

那麼，由 useState 返回的這個用來更新狀態的函式（下文稱為 dispatcher），執行的原理是怎麼樣的呢？

當我們在每次呼叫 dispatcher 時，並不會立刻對狀態值進行修改（對的，狀態值的更新是非同步的），而是建立一條修改操作——在對應 Hook 物件的queue屬性掛載的連結串列上加一個新節點：
狀態更新操作連結串列對應關係.drawio.png

在下次執行函式元件，再次呼叫 useState 時， React 才會根據每個 Hook 上掛載的更新操作連結串列來計算最新的狀態值。你也許會好奇，為什麼要把更新操作都儲存起來呢，只儲存最新的一次更新操作不就行了嗎？你會這樣想，大概是忘了 useState 支援這樣的語法了吧：

const [name, setName] = useState('')
setName(name => name + 'a')
setName(name => name + 'b')
setName(name => name + 'c')

// 下次執行時就可以得到 name 的最新狀態值為'abc'啦

useEffect

useEffect 的儲存方式與 useState / useReducer 類似，也是以連結串列的形式掛載在FiberNode.updateQueue中。

下面我們按 mount 和 update 這兩個元件生命週期來闡述 useEffect 的執行原理：

mount 階段：mountEffect

  1. 根據函式元件函式體中依次呼叫的 useEffect 語句，構建成一個連結串列並掛載在FiberNode.updateQueue中，連結串列節點的資料結構為：
 const effect: Effect = {
    tag, // 用來標識依賴項有沒有變動
    create, // 使用者使用useEffect傳入的函式體
    destroy, // 上述函式體執行後生成的用來清除副作用的函式
    deps, // 依賴項列表
    next: (null: any),
};
  1. 元件完成渲染後，遍歷連結串列執行。

update 階段：updateEffect

  1. 同樣在依次呼叫 useEffect 語句時，判斷此時傳入的依賴列表，與連結串列節點Effect.deps中儲存的是否一致（基本資料型別的值是否相同；物件的引用是否相同），如果一致，則在Effect.tag標記上NoHookEffect。

執行階段

在每次元件渲染完成後，就會進入 useEffect 的執行階段：function commitHookEffectList()：

  1. 遍歷連結串列
  2. 如果遇到Effect.tag被標記上NoHookEffect的節點則跳過。
  3. 如果Effect.destroy為函式型別，則需要執行該清除副作用的函式（至於這Effect.destroy是從哪裡來的，下面馬上說到）
  4. 執行Effect.create，並將執行結果儲存到Effect.destroy（如果開發者沒有配置return，那得到的自然是undefined了，也就是說，開發者認為對於當前 useEffect 程式碼段，不存在需要清除的副作用）；注意由於閉包的緣故，Effect.destroy實際上可以訪問到本次Effect.create函式作用域內的變數。

我們重點請注意到：是先清除上一輪的副作用，然後再執行本輪的 effect 的。

其它 React Hooks Api

其它的的 React Hooks Api ，其實也差不多是這樣的原理：用連結串列資料結構來做全域性狀態保持；判斷依賴項決定是否要更新狀態等等，這裡不再累述。

總結

本文用比較精煉的語言來闡述了 React Hooks 的原理，目的是讓讀者有一個感性的認識，也便於應付面試；但實際上 React Hooks 還有非常多的實現細節，有興趣請閱讀原始碼，入口在此。

相關文章