簡(jiǎn)評(píng)：React Hooks 提供了一種非常簡(jiǎn)便的方法來(lái)實(shí)現(xiàn)代碼重用。本文介紹如何使用 React Hooks 重用代碼，并簡(jiǎn)單介紹和 HOC 實(shí)現(xiàn)方式的區(qū)別。
什么是React Hooks？
Hook 是一項(xiàng)新功能提案，可以在 Functional React Component 中使用 state 和其他 React 功能（React Component 生命周期函數(shù)，React Context），這大大簡(jiǎn)化了 React 的使用。目前還處于 React v16.7.0-alpha 中，不太建議在生產(chǎn)環(huán)境中使用它。
使用 Hooks 分離可重用的功能
假設(shè)需要?jiǎng)?chuàng)建一個(gè)組件 ColoredBanner ，ColoredBanner 可以在點(diǎn)擊按鈕的時(shí)候隨機(jī)設(shè)置一種背景顏色，效果如下：
很明顯我們需要使用 state 來(lái)持有當(dāng)前 color，并使用 this.state.color 為 banner 指定顏色和使用 setState 來(lái)更新 color。使用 React Hooks 的代碼如下：
如果想要給其他組件添加 changeColor 功能，需要將這部分功能分離出來(lái)，在使用 React Hooks 之前可以使用 HOC 來(lái)實(shí)現(xiàn)這個(gè)功能，如果使用 React Hooks 來(lái)拆分這部分邏輯也很簡(jiǎn)單。
前面我們使用 userState 為 functional Component 添加 state 功能。我們還可以把對(duì) state 的操作移到 Functional Component 外部。這里創(chuàng)建一個(gè)新的函數(shù) userRandomColor，接收 color 列表，和初始化狀態(tài)，并返回 color state 和更新 color 的方法。
重構(gòu)后的 ColoredBanner 代碼如下：
可以比較一下 React Hooks 和 HOC 分離復(fù)用代碼的區(qū)別，React Hooks 只需要對(duì) useState 進(jìn)行封裝，不需要新建一個(gè)類(lèi) （不需要處理 this 問(wèn)題），相對(duì)來(lái)說(shuō)簡(jiǎn)單很多。還有一點(diǎn)例子沒(méi)有體現(xiàn)出來(lái)，我們可以將 state 拆分，新的組件不再需要維護(hù)一個(gè)大的 state 對(duì)象，可以按功能劃分成多個(gè)細(xì)小的 state 放到 React Hooks 中來(lái)維護(hù)，每個(gè) Hook 處理自己獨(dú)立的狀態(tài)，這樣還可以避免 state mergin 覆蓋的問(wèn)題。
