一、前言

Hook 的東西不太可能用幾篇就可以全部介紹完畢，所以在這邊先列出一些使用 Hook 時可能要注意的地方，再慢慢將這些知識點給補上。在第二章節介紹 Hook 有哪些功能，以及要注意的規則。而在第三章則是整理了使用 Hook 會遇到的問題。

二、Hook 基本功

2.1 Hook API

使用 Hook 不是只有useState和useEffect，它還有其他的功能可以使用，目前正慢慢地消化吸收中~

基礎的 Hook

• useState
• useEffect
• useContext

額外的 Hook

• useReducer
• useCallback
• useMemo
• useRef
• useImperativeHandle
• useLayoutEffect
• useDebugValue
• useDeferredValue
• useTransition
• useId

Library Hooks

• useSyncExternalStore
• useInsertionEffect

列表可以參考 React 官網【1】查詢。

2.2 Hook 使用規則

Hook 的使用規則有下列兩點：

1. 只在最上層呼叫 Hook。
2. 只在 React Function 中呼叫 Hook。
   • 在 React function component 中呼叫 Hook。
   • 在自定義的 Hook 中呼叫 Hook。

資料來源可以參考 React 官網【2】查詢。

2.3 ESLint Plugin

ESLint這個 Plugin 可以強制執行上一個小節的 2 個 Hook 規則，可用下列指令加入到你的專案中。

npm install eslint-plugin-react-hooks --save-dev

值得注意是Create React App 預設包含此 plugin。

關於ESLint 配置

{
  "plugins": [
    // ...
    "react-hooks"
  ],
  "rules": {
    // ...
    "react-hooks/rules-of-hooks": "error", // 檢查 Hook 的規則
    "react-hooks/exhaustive-deps": "warn" // 檢查 effect 的相依性
  }
}

三、Hook 補充資料

3.1 Hook 常見問題

採用策略

• React 哪一個版本中包含 Hook？
• 我需要重寫所有的 Class component 嗎？
• 我可以在 Hook 做什麼是我在 Class 所不能做的？
• Hook 與我的 React 知識有多少保持相關性？
• 我應該使用 Hook、Class 或是兩者兼具？
• Hook 包含所有 Class 的使用情境嗎？
• Hook 可以取代 Render Props 和 Higher-Order Component 嗎？
• Hook 對於 Redux connect() 和 React Router 等等其他流行的 API 意味著什麼？
• Hook 可以使用靜態型別嗎？
• 如何測試使用 Hook 的 component？
• Lint 規則究竟強制了些什麼？

從 Class 到 Hook

• 生命週期方法與 Hook 如何對應？
• 我如何使用 Hook fetch 資料？
• 是否有類似 Instance 變數的東西？
• 我應該使用一個或是多個 state 變數？
• 我可以只在更新時執行 effect 嗎？
• 如何取得先前的 prop 或 state？為什麼我在 function 內看到舊的 prop 或 state？
• 我該如何實作 getDerivedStateFromProps？
• 有類似 forceUpdate 的東西嗎？
• 我可以對 function component 建立一個 ref 嗎？
• 我該如何測量一個 DOM node？
• const [thing, setThing] = useState() 是什麼意思？

效能最佳化

• 我可以在更新時忽略 effect 嗎？
• 在依賴項目的列表中忽略 function 是安全的嗎？
• 如果我的 effect 依賴項目經常變化的話該怎麼辦？
• 我該如何實作 shouldComponentUpdate？
• 如何 memoize 計算？
• 如何延遲建立昂貴的 object？
• 在 render 時建立 function，Hooks 會變慢嗎？
• 如何避免向下傳遞 callback？
• 如何從 useCallback 讀取一個經常變化的值？

深入理解

• React 如何將 Hook 呼叫與 component 關聯？
• Hook 現有的技術是什麼？

資料來源可以參考 React 官網【3】查詢。

四、推薦資源

1. React hooks 讓我相信一見鍾情
2. [FE302] React 基礎：hooks（2） - HackMD
3. 不在大型專案導入 React.js 的 5 個原因
4. React 教學: React Hooks 入門 (useState & useRef)
5. React 16.7 的 Hooks 為何讓人眼睛一亮

五、結論

本篇介紹了 React 的 Hook 相關的文件，這些資料大多來自於 React 的官方網站，如果需要看更詳細的資訊，可以上官網查詢。而這裡主要是整理出一個學習路徑，讓我們在學習 Hook 時，不至於找不到學習方向。關於 React 的簡單入門就先寫到這邊，等到我熟悉了 Hook 的用法時，應該會在寫一個系列來好好介紹 React ～那麼，今天的內容就先到這邊結束，我們明天見！

原本想寫個 5 篇 React 文章的介紹，如果要深入理了解程式原理，可能會影響到鐵人賽寫文章的時間，在權衡利弊之下，決定先結束掉 React 系列。

六、參考資料

1. Hooks API 參考
2. Hook 的規則
3. Hooks 常見問題