[筆記] React Hooks 起來 – Ch6 – 建立自己的 Hook

Posted onAuthorANDY LIEN

章節連結

因為實務上的需要來熟悉 React，就趁機筆記一下從 Vue 3 轉 React Hooks 的一些細節差異。這邊筆記下如何建立自己的 Hook。

react logo

內容

1. customHook 有自己的 state 和生命週期
2. 在你開發函式時，會往往遇上重複性的邏輯，這是就可以抽出成一個共用函式。不過在 React 中，其內會使用到 use 開頭的內建函式
3. 自行開發的 Hook，一定要用 use 的名稱為開頭，也僅能在 Functional Component 中使用
4. 自行開發的 Hook，若你回傳的值是用 array 的型式，需自行指定型別。因為 TS 自行推斷的值會有機會出現錯誤

程式碼

https://github.com/andy922200/learn-react-from-hook/commit/c3a9e634a1ccea25299b372eec780452499428f3

系列文章

  • [筆記] React Hooks 起來 – Ch7 – 切換畫面元件
  • [筆記] React Hooks 起來 – Ch6 – useMemo 的使用
  • [筆記] React Hooks 起來 – Ch5 – useState 和 useEffect
  • [筆記] React Hooks 起來 – Ch5 – useCallback 和 TypeScript 注意事項
  • [筆記] React Hooks 起來 – Ch4 – 實作深色主題
  • [筆記] React Hooks 起來 – Ch4 – 增加狀態管理
  • [筆記] React Hooks 起來 – Ch4 – 前導
  • [筆記] React Hooks 起來 – Ch4 – SVG
  • [筆記] React Hooks 起來 – Ch3
  • [筆記] React Hooks 起來 – Ch1 ~ Ch2
    • 按讚加入粉絲團

    延伸閱讀