為什么要學(xué)習(xí) React Hooks 原理

首先，功利點(diǎn)來(lái)說(shuō)：目前前端框架三分天下：React、Vue、Angular，而 React 自從 v16.8.0 版本正式推出 React Hooks 概念后，風(fēng)勢(shì)已經(jīng)從原來(lái)的類組件猛地轉(zhuǎn)向函數(shù)組件，這是一個(gè)在設(shè)計(jì)模式、心智模型層次，且非常近期的革新，因此只要是你談到自己會(huì) React ，就一定會(huì)在面試中被問(wèn)到 React Hooks 的原理。

再者，從實(shí)際角度出發(fā)，了解 React Hooks 原理對(duì)我們?nèi)粘ｉ_(kāi)發(fā)調(diào)試都有莫大的好處；我們可以認(rèn)識(shí)到 React Hooks 其實(shí)也并不是什么黑魔法，我們?cè)陂_(kāi)發(fā)中碰到的奇奇怪怪的問(wèn)題，只不過(guò)是我們還沒(méi)有掌握 React Hooks 導(dǎo)致的，也不需要用一些 tricky 的方法來(lái)解決。

useState / useReducer

useState 和 useReducer 都是關(guān)于狀態(tài)值的提取和更新，從本質(zhì)上來(lái)說(shuō)沒(méi)有區(qū)別，從實(shí)現(xiàn)上，可以說(shuō) useState 是 useReducer 的一個(gè)簡(jiǎn)化版，其背后用的都是同一套邏輯。

React Hooks 如何保存狀態(tài)

React 官方文檔中有提到，React Hooks 保存狀態(tài)的位置其實(shí)與類組件的一致；翻看源碼后，我發(fā)現(xiàn)這樣的說(shuō)法沒(méi)錯(cuò)，但又不全面：

•  兩者的狀態(tài)值都被掛載在組件實(shí)例對(duì)象FiberNode的memoizedState屬性中。
•  兩者保存狀態(tài)值的數(shù)據(jù)結(jié)構(gòu)完全不同；類組件是直接把 state 屬性中掛載的這個(gè)開(kāi)發(fā)者自定義的對(duì)象給保存到memoizedState屬性中；而 React Hooks 是用鏈表來(lái)保存狀態(tài)的，memoizedState屬性保存的實(shí)際上是這個(gè)鏈表的頭指針。

下面我們來(lái)看看這個(gè)鏈表的節(jié)點(diǎn)是什么樣的 —— Hook 對(duì)象： 

// react-reconciler/src/ReactFiberHooks.js  
export type Hook = {  
  memoizedState: any, // 最新的狀態(tài)值  
  baseState: any, // 初始狀態(tài)值，如`useState(0)`，則初始值為0  
  baseUpdate: Update<any, any> | null,  
  queue: UpdateQueue<any, any> | null, // 臨時(shí)保存對(duì)狀態(tài)值的操作，更準(zhǔn)確來(lái)說(shuō)是一個(gè)鏈表數(shù)據(jù)結(jié)構(gòu)中的一個(gè)指針  
  next: Hook | null,  // 指向下一個(gè)鏈表節(jié)點(diǎn)  
}; 

官方文檔一直強(qiáng)調(diào) React Hooks 的調(diào)用只能放在函數(shù)組件/自定義 Hooks 函數(shù)體的頂層，這是因?yàn)槲覀冎荒芡ㄟ^(guò) Hooks 調(diào)用的順序來(lái)與實(shí)際保存的數(shù)據(jù)結(jié)構(gòu)來(lái)關(guān)聯(lián)：

PS：雖然上面一致都是以 useState 和 useReducer 來(lái)作為例子說(shuō)明，但實(shí)際上所有 React Hooks 都是用這種鏈表的方式來(lái)保存的。

React Hooks 如何更新?tīng)顟B(tài)

熟悉 useState API 的話，我們都知道怎么去更新?tīng)顟B(tài)： 

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

那么，由 useState 返回的這個(gè)用來(lái)更新?tīng)顟B(tài)的函數(shù)（下文稱為 dispatcher），運(yùn)行的原理是怎么樣的呢？

當(dāng)我們?cè)诿看握{(diào)用 dispatcher 時(shí)，并不會(huì)立刻對(duì)狀態(tài)值進(jìn)行修改（對(duì)的，狀態(tài)值的更新是異步的），而是創(chuàng)建一條修改操作——在對(duì)應(yīng) Hook 對(duì)象的queue屬性掛載的鏈表上加一個(gè)新節(jié)點(diǎn)：

在下次執(zhí)行函數(shù)組件，再次調(diào)用 useState 時(shí)， React 才會(huì)根據(jù)每個(gè) Hook 上掛載的更新操作鏈表來(lái)計(jì)算最新的狀態(tài)值。你也許會(huì)好奇，為什么要把更新操作都保存起來(lái)呢，只保存最新的一次更新操作不就行了嗎？你會(huì)這樣想，大概是忘了 useState 支持這樣的語(yǔ)法了吧： 

const [name, setName] = useState('')  
setName(name => name + 'a')  
setName(name => name + 'b')  
setName(name => name + 'c')  
// 下次執(zhí)行時(shí)就可以得到 name 的最新?tīng)顟B(tài)值為'abc'啦 

useEffect

useEffect 的保存方式與 useState / useReducer 類似，也是以鏈表的形式掛載在FiberNode.updateQueue中。

下面我們按 mount 和 update 這兩個(gè)組件生命周期來(lái)闡述 useEffect 的執(zhí)行原理：

mount 階段：mountEffect

1.  根據(jù)函數(shù)組件函數(shù)體中依次調(diào)用的 useEffect 語(yǔ)句，構(gòu)建成一個(gè)鏈表并掛載在FiberNode.updateQueue中，鏈表節(jié)點(diǎn)的數(shù)據(jù)結(jié)構(gòu)為： 

 const effect: Effect = {  
    tag, // 用來(lái)標(biāo)識(shí)依賴項(xiàng)有沒(méi)有變動(dòng)  
    create, // 用戶使用useEffect傳入的函數(shù)體  
    destroy, // 上述函數(shù)體執(zhí)行后生成的用來(lái)清除副作用的函數(shù)  
    deps, // 依賴項(xiàng)列表  
    next: (null: any),  
}; 

1.  組件完成渲染后，遍歷鏈表執(zhí)行。

update 階段：updateEffect

1.  同樣在依次調(diào)用 useEffect 語(yǔ)句時(shí)，判斷此時(shí)傳入的依賴列表，與鏈表節(jié)點(diǎn)Effect.deps中保存的是否一致（基本數(shù)據(jù)類型的值是否相同；對(duì)象的引用是否相同），如果一致，則在Effect.tag標(biāo)記上NoHookEffect。

執(zhí)行階段

在每次組件渲染完成后，就會(huì)進(jìn)入 useEffect 的執(zhí)行階段：function commitHookEffectList()：

1.  遍歷鏈表
2.  如果遇到Effect.tag被標(biāo)記上NoHookEffect的節(jié)點(diǎn)則跳過(guò)。
3.  如果Effect.destroy為函數(shù)類型，則需要執(zhí)行該清除副作用的函數(shù)（至于這Effect.destroy是從哪里來(lái)的，下面馬上說(shuō)到）
4.  執(zhí)行Effect.create，并將執(zhí)行結(jié)果保存到Effect.destroy（如果開(kāi)發(fā)者沒(méi)有配置return，那得到的自然是undefined了，也就是說(shuō)，開(kāi)發(fā)者認(rèn)為對(duì)于當(dāng)前 useEffect 代碼段，不存在需要清除的副作用）；注意由于閉包的緣故，Effect.destroy實(shí)際上可以訪問(wèn)到本次Effect.create函數(shù)作用域內(nèi)的變量。

我們重點(diǎn)請(qǐng)注意到：是先清除上一輪的副作用，然后再執(zhí)行本輪的 effect 的。

其它 React Hooks Api

其它的的 React Hooks Api ，其實(shí)也差不多是這樣的原理：用鏈表數(shù)據(jù)結(jié)構(gòu)來(lái)做全局狀態(tài)保持；判斷依賴項(xiàng)決定是否要更新?tīng)顟B(tài)等等，這里不再累述。

總結(jié)

本文用比較精煉的語(yǔ)言來(lái)闡述了 React Hooks 的原理，目的是讓讀者有一個(gè)感性的認(rèn)識(shí)，也便于應(yīng)付面試；但實(shí)際上 React Hooks 還有非常多的實(shí)現(xiàn)細(xì)節(jié)，有興趣請(qǐng)閱讀源碼，入口在此。