接前文《 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 調用的順序來與實際保存的數據結構來關聯：

PS：雖然上面一致都是以 useState 和 useReducer 來作爲例子說明，但實際上所有 React Hooks 都是用這種鏈表的方式來保存的。

React Hooks 如何更新狀態

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

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

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

當我們在每次調用 dispatcher 時，並不會立刻對狀態值進行修改（對的，狀態值的更新是異步的），而是創建一條修改操作——在對應 Hook 對象的 queue 屬性掛載的鏈表上加一個新節點：

在下次執行函數組件，再次調用 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 還有非常多的實現細節，有興趣請閱讀源碼，入口 在此 。

相關文章