Day 7 自定義鉤子

學習 React 框架 - 007 自定義鉤子 useHooks

React 實作了許多可以以依賴驅動的 Hooks 函式，在不同的需求及邊界處理上，我們能搭配之前所學的 Hooks 做一些妥善的處理， 接下來就是最有趣的自己動手封裝了，React 所提供的 Hooks 就像工具箱，現在就由我們來動手封裝並日常開發好用的 useHooks 吧~

封裝自己的 Hooks 有何好處?

1. 重用性 ( Reusability ) ： 封裝 Hooks 讓邏輯和狀態切割開，在不同的組件中重用。可以大幅減少重複的程式碼，提高維護性。
2. 組織性 ( Organization)： Hooks 可以更好地組織程式碼，將相關邏輯放在一起，使代碼更清晰、更易理解。
3. 邏輯解耦 ( Decoupling Logic)： Hooks 可以將邏輯與組件的實現解耦。可以專注在開發邏輯的細節上與 UI 解藕。
4. 測試性 ( Testability ) ： 透過封裝 Hooks，更容易地進行單元測試，只需針對抽出的邏輯做測試，而不用擔心觸發頁面的 sideEffect。
5. 避免命名衝突 ( Avoiding Naming Conflicts ) ： Hooks 可避免在組件之間出現命名衝突，因為程式碼本身只存在各自的區塊之中。
6. 代碼重構 ( Code Refactoring): 有了 Hooks 針對某一部分的程式碼重構，相較之前容易許多，也不用擔層層相疊的邏輯本身。
7. 共享( Sharing ): 當我們封裝出一個好用的自定義函式後，我們可以分享到社群，分享供其他人使用，相對地我們也能坐享齊人之福~

要注意甚麼?

1. 自定義 Hook 允許您共享狀態邏輯，但不能共享狀態本身。對 Hook 的每次調用完全獨立於對同一 Hook 的所有其他調用。
   • 也就是說要小心共用記憶體位址的問題，不要把原先的資料給改壞了。
2. 邏輯以及輸出的一致性，在 React Hooks 中，我們可以輕易地發現，絕大多數的 Hooks 的使用方式是相同的，有關測的依賴及固定的返回值，我們的自定義 Hooks 也應該是如此的，擁有一致性及清晰的命名，不會對使用者本身造成過多的記憶及使用負擔。
3. 不要甚麼邏輯都進行封裝，要知道封裝是有代價的，要知道必須做才做，而不是手上拿著鐵鎚就看甚麼都是釘子。
   • 任何操作都是有其代價的
4. 每次組件重新渲染時，所有 Hooks 都將重新執行。
5. 自定義 Hooks 的代碼應該是純粹的，一個封裝只專注在一個邏輯上，不要將 sideEffect 給搞混了。

實際場景

參考資料

• useHooks
• React-use
• forwardRef
• custom-hooks