程式碼複用一直是程式設計師所追求的，本文主要講解如何利用 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 [email protected] [email protected]
複製程式碼

我們來寫一個元件，取名叫 ColoredBanner，它可以通過點選按鈕隨機改變背景顏色：

很明顯，要實現這個元件，需要一個狀態來儲存顏色，以及一個點選事件來改變狀態，實現背景顏色的切換。

在沒有 Hook 之前，我們需要建立一個類，然後通過 this.state 和 this.setState 實現狀態管理。那麼用 Hook 怎麼實現呢？直接看程式碼：

可以看到在函式中也可以使用 React 的狀態機制。通過呼叫 React 提供的 useState()

還定義了一個方法 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)