跟著官方文檔能學懂Hooks就怪了
回想下你入門Hooks的過程，是不是經歷過：
- 類比ClassComponent的生命周期，學習Hooks的執行時機
- 慢慢熟練以后，發現Hooks的執行時機和生命周期又有些不同。比如componentWillReceiveProps對應哪個Hooks?
- 感到困惑，去搜一些Hooks原理層面的文章閱讀
作為一個API，不該簡簡單單、可可愛愛的照著文檔調用就行么，Hooks為什么這么難?
React官方也發現了這個問題，在React要重寫文檔了講到，React要基于Hooks重寫文檔。
本文主要包括2方面內容：
- 解釋Hooks難學的原因
- 給出學習Hooks的建議
React的底層架構
可以用一個公式概括React：
- const UI = fn(state);
視圖可以看作狀態經過函數的映射。
用戶與界面的交互，可以看作這個公式的不斷執行。
這個公式太精簡了，沒有解釋state(狀態)從哪兒來，我們擴展下：
- const state = reconcile(update);
- const UI = fn(state);
- 用戶交互產生update(更新)
- update經過reconcile步驟計算出當前應用的state
- fn將state映射為視圖變化(UI)
我們給fn起個名字：commit：
- const state = reconcile(update);
- const UI = commit(state);
那么update在哪里產生呢?當然來自于用戶交互，比如：點擊事件。
所以React的底層架構可以簡化為三步：
- 用戶交互產生update
- state = reconcile(update);
- UI = commit(state);
了解了底層架構，我們再來看通過類比ClassComponent學習Hooks會帶來的問題。
生命周期函數的抽象層級
我們已經有了完整的驅動視圖更新的底層架構，開發者該怎么操作這套架構呢?
可以用計算機的抽象層級來類比：
- 高層：應用程序
- 中層：操作系統
- 底層：計算機組成架構
對應React：
- 高層：應用程序 ClassComponent生命周期
- 中層：操作系統 介入架構的API
- 底層：計算機組成架構 React底層架構
可以看到，生命周期函數屬于抽象程度比較高的層次。這么設計也是為了讓開發者更容易上手React。
設想一個Vue2開發者要轉React技術棧，只需要類比Vue的生命周期來學習React的生命周期就行了。
這一切在Hooks到來前都沒問題，然而......
Hooks的抽象層級
Hooks屬于中等抽象層級。也就是說，Hooks直接介入底層架構的運行流程。
- 高層：應用程序
- 中層：操作系統 Hooks
- 底層：計算機組成架構 React底層架構
當我們用生命周期函數來類比Hooks時，其實是用高抽象層級的事物來描述低抽象層級的事物。
動物 --> 哺乳動物 --> 牛 --> 奶牛
對于一個只見過奶牛，再沒見過其他動物的人，你怎么向他解釋哺乳動物是啥?
正是由于抽象層級的不對稱，造成通過生命周期函數類比學習Hooks會遇到問題。
該怎么學Hooks
既然Hooks屬于中等抽象層，離底層很近，那么更好的學習方式是通過底層向上學習。
祭出我們的三步公式：
- 用戶交互產生update
- state = reconcile(update);
- UI = commit(state);
對照公式，我們來講解幾個常見hook的工作流程：
useState
舉個例子：
- function App() {
- const [state, updateState] = useState(0);
- return <div onClick={() => updateState(state + 1)}></div>;
- }
useState返回值數組包含：
- 保存的state
- 改變state的方法updateState
對照公式，state屬于公式步驟2計算得出的：
- state = reconcile(update);
此時視圖還沒有更新。
- 用戶點擊div觸發updateState，對應公式步驟1:
用戶交互產生update
所以調用updateState能開啟底層架構的三步運行流程。
當reconcile計算出state后就會進入第三步：
- UI = commit(state);
最終渲染視圖。
useEffect
舉個例子：
- useEffect(doSomething, [xx, yy])
useEffect的回調函數doSomething在第三步執行完成后異步調用：
- UI = commit(state);
所以在doSomething函數內部能獲取到完成更新的視圖。
第二個參數[xx, yy]作為依賴項，決定了doSomething是否會被調用。
useLayout
Effect不同于useEffect在第三步執行完成后異步調用，useLayoutEffect會在第三步執行完UI操作后同步執行。
useRef
以上例子可以看到，useState與useEffect分別在三步流程的不同步驟被觸發，他們的觸發時機是確定的。
那么這三個步驟如何交流呢?通過useRef。
useState作用于第一、二步，useLayoutEffect作用于第三步，useEffect作用于第三步完成后。
使用useRef，就能達到在不同步驟間共享引用類型數據的目的。
可以看到，React為底層架構三步工作流程的每一步提供了對應的hook，同時提供了串聯這三步工作流程的hook。
開發者只需要根據業務需要，通過基礎Hooks組裝出自定義hook，就能在底層架構運行流程的各個時期運行邏輯。
自底向上學習是本末倒置么?
有同學會反駁：之前學React得學生命周期函數的執行時機，現在學Hooks得學底層架構運行流程。難道不是本末倒置，更復雜了么?
其實不然。我問你幾個問題：
- componentWillReceiveProps為什么被標記為unsafe?
- getDerivedStateFromProps用過么?
- this.setState是同步還是異步的?
這些和生命周期函數相關的問題一點都不簡單!很多用了幾年React的前端不一定回答的上。
作為高層次抽象，生命周期函數隱藏了太多實現細節。同時React又太靈活，不像Vue通過模版語言限制了開發者的操作。
結果就是：不同React開發者寫出各種奇奇怪怪的ClassComponent。
反觀通過底層架構運行流程學習Hooks：
- 底層架構運行流程就是React的絕對真理，不會隱藏更多抽象
- Hooks的寫法規范限制了開發者的奇葩操作
這里唯一的問題，就是缺少一份從底層出發的文檔。這也是官方要重寫文檔的初衷。
對于熟練使用React的開發者，在官方新文檔出來前，可以參考React技術揭秘[1](點擊閱讀原文)學習。
這里再提供些其他視角聊Hooks的文章：
- 從理念層面：代數效應與Hooks[2]
- 從微觀(代碼)層面：所有常見Hooks的源碼實現[3]
