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

接前文《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),
};
複製代碼

2. 組件完成渲染後，遍歷鏈表執行。

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 還有很是多的實現細節，有興趣請閱讀源碼，入口在此。