程式碼複用一直是程式設計師所追求的，本文主要講解如何利用 React Hook 提高程式碼的複用性。
什麼是 React Hook？
Hook 是 React 新特性，讓你不用寫 class，也可以使用 React 的 state 以及其他功能。目前該特性發布在 v16.7.0-alpha 版本中，所以還不推薦在生產環境中使用。
想用 React 的 state，討厭寫 class，被 this 搞得暈頭轉向？Hook 來幫你。不僅如此，Hook 還可以幫你優雅的複用程式碼。
舉個例子
這個例子是通過
create-react-app來建立的，由於 Hook 還沒釋出正式版，所以需要手動安裝 react 和 react-dom 的 alpha 版本：yarn add react@16.7.0-alpha.2 react-dom@16.7.0-alpha.2 複製程式碼
我們來寫一個元件，取名叫 ColoredBanner，它可以通過點選按鈕隨機改變背景顏色：
很明顯，要實現這個元件，需要一個狀態來儲存顏色，以及一個點選事件來改變狀態，實現背景顏色的切換。
在沒有 Hook 之前，我們需要建立一個類，然後通過 this.state 和 this.setState 實現狀態管理。那麼用 Hook 怎麼實現呢？直接看程式碼：
可以看到在函式中也可以使用 React 的狀態機制。通過呼叫 React 提供的 useState() 方法，傳入引數為初始值，返回一個陣列，包含兩個物件，一個是 color，另一個是 setColor，類似於 this.state 和 this.setState。
還定義了一個方法 changeColor()，隨機選擇一個顏色，然後通過 setColor 更新顏色。
如何複用程式碼呢？
假如我們還需要寫另外一個元件，他的功能和 ColoredBanner 元件幾乎一樣，唯一區別是不需要使用者點選，而是設定一個定時器來自動改變背景。
我們不能直接使用 ColoredBanner 元件，因為裡面有點選事件的邏輯，只需要 ColoredBanner 中隨機更新顏色狀態的功能。
很明顯需要把 ColoredBanner 元件中隨機更新顏色狀態的邏輯抽離出來。
怎麼做呢？
自定義 Hook。類似於 Higher Order Components（高階元件）和 Render Props 的處理方式。
隨機更新顏色狀態的自定義 Hook：
建立一個名為 useRandomColor 的函式，接收兩個引數，colors 和 initialColor，在 changColor() 方法中呼叫 setColor 鉤子函式實現顏色的更新。這樣自定義 Hook 就實現了。
在 ColoredBanner 元件中使用：
呼叫自定義 Hook useRandomColor，傳入顏色陣列和初始化顏色，解構返回 color 和 changeColor。ColoredBanner 元件就可以通過這個自定義 Hook 來隨機改變背景顏色了。
同理，利用這個 Hook 來實現自動更換隨機背景顏色的元件。達到程式碼複用的目的。
自定義 Hook 除了能提高程式碼複用性，還帶來了另一個好處，可以把專案中巢狀很深的 state，拆成一個個小的 Hook，既可以避免更新失效的問題，又方便後期的擴充套件和維護。
感謝閱讀
參考：
Simple Code Reuse with React Hooks
React Hooks in Action: Building a Todo App (hint: no classes)