React Hook 提升代碼複用性

代碼複用一直是程序員所追求的，本文主要講解如何利用 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)