React | Hook 的使用須知

本篇將探討 Hook 為 Function Component 帶來了哪些便利性

Hooks 的誕生

在 Hook 出現之前，React 在寫法上可分為：

1. Class Component: 透過 Class 生成的元件，可管理 state 及生命週期
2. Function Component: 透過 Function 生成元件，將從父層接收的狀態渲染到畫面上

以上可以明確看到，Function Component 主要作用為：

1. 接收 props 並渲染到畫面
2. 沒有自己的 state 及生命週期 (stateless component)

相信很多人都有的疑問: Hook 的推出是為解決什麼問題？

先來看 React 官網對 Hook 的定義～

Hook 是 function，他讓你可以從 function component「hook into」React state 與生命週期功能。

沒錯，就是讓我們可以將 state, life cycle hook into function!!

那 Hook 還有其他什麼優勢嗎？來看看下面 Hook 作者的文章

Making Sense of React Hooks

大致讀完後可以看到將 Hook 加入 Function Component 解決了 Class Component 的幾個問題：

1. 難以重構及邏輯複用的龐大 Component
2. Component 之間重複的生命週期及生命週期導向開發導致邏輯散亂
3. 複雜的 pattern，例如 HOC, render props

下面引用作者文章中的範例。採用 Hook 寫法後除了 code 變少了以外，也可以將處理相同邏輯的程式封裝在一起，除了更容易辨識 Component 處理了哪些事也更方便釐清變數與 function 之間的相依性。

儘管得知了結論，還是搭配下面的範例驗證自己的理解：

上面是簡易 Form 表單註冊，使用者需要在 input 輸入 user name 點擊送出，並於兩秒後取得註冊成功通知。

接著我們改用 Hook 撰寫：

改用 Hook 後，比起 Class Component，Function Component 更為直覺及簡潔，且沒有 this 指向的問題。

在 Function Component 可寫多組 useState, useEffect 將相同邏輯處理集中在一起達到關注點分離。當系統龐大時，如有多個元件使用類似的 Hook 操作，也可以 Hook 拆出來 (Custom Hook) 讓多個元件共用，這在 Class Component 要做到是相對有難度的。

說了那麼多 Hook 的優點，但它還是無法完全取代 Class Component，原因在於 Class Component 除了可以對生命週期有更細緻的操作外，Hook 只限於 Function Component 來使用，且只能回傳 State 無法回傳 JSX 這無疑也是侷限，端看開發者的使用習慣。

結論

Hooks 的出現一定有它的必然性，後面會陸續針對 Hooks API 做更深入的說明以及它如何優化 HOC 的不足，瞭解 Hook 與原本寫法的差異才能為專案帶來更好的架構設計。

參考資料來源

Making Sense of React Hooks

介紹 Hook - React