簡評：React Hooks 提供了一種非常簡便的方法來實現(xiàn)代碼重用克胳。本文介紹如何使用 React Hooks 重用代碼漠另，并簡單介紹和 HOC 實現(xiàn)方式的區(qū)別跃赚。
什么是React Hooks纬傲？
Hook 是一項新功能提案叹括，可以在 Functional React Component 中使用 state 和其他 React 功能（React Component 生命周期函數(shù)，React Context）米同，這大大簡化了 React 的使用面粮。目前還處于 React v16.7.0-alpha 中熬苍，不太建議在生產(chǎn)環(huán)境中使用它柴底。
使用 Hooks 分離可重用的功能
假設(shè)需要創(chuàng)建一個組件 ColoredBanner 柄驻，ColoredBanner 可以在點擊按鈕的時候隨機設(shè)置一種背景顏色鸿脓，效果如下：
很明顯我們需要使用 state 來持有當前 color野哭，并使用 this.state.color 為 banner 指定顏色和使用 setState 來更新 color拨黔。使用 React Hooks 的代碼如下：
如果想要給其他組件添加 changeColor 功能篱蝇，需要將這部分功能分離出來态兴，在使用 React Hooks 之前可以使用 HOC 來實現(xiàn)這個功能狠持，如果使用 React Hooks 來拆分這部分邏輯也很簡單。
前面我們使用 userState 為 functional Component 添加 state 功能瞻润。我們還可以把對 state 的操作移到 Functional Component 外部。這里創(chuàng)建一個新的函數(shù) userRandomColor甜刻，接收 color 列表绍撞，和初始化狀態(tài)，并返回 color state 和更新 color 的方法得院。
重構(gòu)后的 ColoredBanner 代碼如下：
可以比較一下 React Hooks 和 HOC 分離復(fù)用代碼的區(qū)別傻铣，React Hooks 只需要對 useState 進行封裝，不需要新建一個類 （不需要處理 this 問題）祥绞，相對來說簡單很多非洲。還有一點例子沒有體現(xiàn)出來，我們可以將 state 拆分蜕径，新的組件不再需要維護一個大的 state 對象两踏，可以按功能劃分成多個細小的 state 放到 React Hooks 中來維護梦染，每個 Hook 處理自己獨立的狀態(tài)，這樣還可以避免 state mergin 覆蓋的問題。
