使用 React Hooks 分離可重用程式碼
簡評：React Hooks 提供了一種非常簡便的方法來實現程式碼重用。本文介紹如何使用 React Hooks 重用程式碼，並簡單介紹和 HOC 實現方式的區別。
什麼是React Hooks？
Hook 是一項新功能提案，可以在 Functional React Component 中使用 state 和其他 React 功能（React Component 生命週期函式，React Context），這大大簡化了 React 的使用。目前還處於 React v16.7.0-alpha 中，不太建議在生產環境中使用它。
使用 Hooks 分離可重用的功能
假設需要建立一個元件 ColoredBanner ，ColoredBanner 可以在點選按鈕的時候隨機設定一種背景顏色，效果如下：
很明顯我們需要使用 state 來持有當前 color，並使用 this.state.color 為 banner 指定顏色和使用 setState 來更新 color。使用 React Hooks 的程式碼如下：
如果想要給其他元件新增 changeColor 功能，需要將這部分功能分離出來，在使用 React Hooks 之前可以使用 HOC 來實現這個功能，如果使用 React Hooks 來拆分這部分邏輯也很簡單。
前面我們使用 userState 為 functional Component 新增 state 功能。我們還可以把對 state 的操作移到 Functional Component 外部。這裡建立一個新的函式 userRandomColor，接收 color 列表，和初始化狀態，並返回 color state 和更新 color 的方法。
重構後的 ColoredBanner 程式碼如下：
可以比較一下 React Hooks 和 HOC 分離複用程式碼的區別，React Hooks 只需要對 useState 進行封裝，不需要新建一個類 （不需要處理 this 問題），相對來說簡單很多。還有一點例子沒有體現出來，我們可以將 state 拆分，新的元件不再需要維護一個大的 state 物件，可以按功能劃分成多個細小的 state 放到 React Hooks 中來維護，每個 Hook 處理自己獨立的狀態，這樣還可以避免 state mergin 覆蓋的問題。