如何掌握Hooks

本篇內容介紹了“如何掌握Hooks”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

回想下你入門Hooks的過程，是不是經歷過：

1. 類比ClassComponent的生命周期，學習Hooks的執行時機

2. 慢慢熟練以后，發現Hooks的執行時機和生命周期又有些不同。比如componentWillReceiveProps對應哪個Hooks?

3. 感到困惑，去搜一些Hooks原理層面的文章閱讀

作為一個API，不該簡簡單單、可可愛愛的照著文檔調用就行么，Hooks為什么這么難?

React官方也發現了這個問題，在React要重寫文檔了講到，React要基于Hooks重寫文檔。

本文主要包括2方面內容：

1. 解釋Hooks難學的原因

2. 給出學習Hooks的建議

React的底層架構

可以用一個公式概括React：

const UI = fn(state);

視圖可以看作狀態經過函數的映射。

用戶與界面的交互，可以看作這個公式的不斷執行。

這個公式太精簡了，沒有解釋state(狀態)從哪兒來，我們擴展下：

const state = reconcile(update); const UI = fn(state);

1. 鴻蒙官方戰略合作共建——HarmonyOS技術社區

2. 用戶交互產生update(更新)

3. update經過reconcile步驟計算出當前應用的state

4. 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返回值數組包含：

1. 保存的state

2. 改變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得學底層架構運行流程。難道不是本末倒置，更復雜了么?

其實不然。我問你幾個問題：

1. componentWillReceiveProps為什么被標記為unsafe?

2. getDerivedStateFromProps用過么?

3. this.setState是同步還是異步的?

這些和生命周期函數相關的問題一點都不簡單!很多用了幾年React的前端不一定回答的上。

作為高層次抽象，生命周期函數隱藏了太多實現細節。同時React又太靈活，不像Vue通過模版語言限制了開發者的操作。

結果就是：不同React開發者寫出各種奇奇怪怪的ClassComponent。

反觀通過底層架構運行流程學習Hooks：

• 底層架構運行流程就是React的絕對真理，不會隱藏更多抽象

• Hooks的寫法規范限制了開發者的奇葩操作

這里唯一的問題，就是缺少一份從底層出發的文檔。這也是官方要重寫文檔的初衷。

“如何掌握Hooks”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！