[React Hook 筆記] Custom Hooks 之打造自己的 Hook

React Hook 系列文

1. 從最基本的 Hook 開始 useState, useEffect
2. Memorized Hook- useMemo, useCallback
3. useRef
4. useContext
5. useReducer
6. useLayoutEffect
7. Custom Hooks

打造客製化 Hooks 其實相當容易，基本上也只有 ”必須以 「 use 」為開頭命名的 JavaScript function” 一個規則要遵守

🔖 文章索引
1. Why need Custom Hook?
2. How to create Custom Hook?
3. 小結

Why need Custom Hook?

撰寫程式碼過程中，常常會碰到相同的邏輯，把他們單獨拉出來寫成一個 function (React Hook 其實就只是 JS function) 就可以一直重覆利用。

以前我們要共用這種 stateful 的 component 通常會使用 higher-order components 跟 render props，自己很少使用 render props，所以這邊就來比較一下 HOC (higher-order components) 跟 Custom React Hook，他們做的事其實大同小異(Reuse component)只是寫法不同而已

用簡單例子來解釋: 今天我想做三種時鐘，會依據地區不同而顯示不同時鐘，傳入的 data 時間是一樣的。

之前鐵人賽曾經用過的範例 HOF 的好友 HOC

(以下程式碼不會是完整，為了方便理解只會把重點寫出)

HOC

High-Order Component 可以經由不同的組合 compose、覆寫 overwrite、編輯上層資料與UI ，成為一個新元件的函式，讓元件一直被重覆利用。