隨著 React 進入 Hook 時代，我們會把很多之前寫的「檢測窗口縮放」、「元素拖放」等等功能重構成 Hook 的形式。
這些功能說難也不難，就是一個字：「繁」。需要調用各種 Web API，還得考慮各種邊際情況，寫測試、debug…
Beautiful React Hooks
那麼為什麼不直接用現成的「絕美 ReactHooks」呢？
以一個小功能為例：產品經理讓我們在手機端頁面離線時展示一個小提示：「您好，請檢查網絡是否掉線」，這時候我們可能第一反應就是上 MDN 查一下 Navigator.onLine 的文檔，參考一下樣板代碼來實現我們的功能。
但這時候就可以想到，beautiful-react-hooks 已經提供了 useOnlineState 的功能：
<code>import { useOnlineState } from 'beautiful-react-hooks'; const ConnectionTest = () => { const isOnline = useOnlineState(); return ( <page> 很棒的設計，產品經理真厲害呀（棒讀）{isOnline && <info>您好，請檢查網絡是否掉線/<info>}
/<page> );};/<code>這樣一行代碼就能實現我們需要的功能，而且從 hook 中得到的 isOnline 變量用起來非常方便，讓我們可以聲明式地實現功能，降低代碼的維護負擔。
如果要實現元素拖動呢？以前我們可能會寫一大攤的 onDrag 回調函數，但現在，時代不同了，只需一兩行足矣：
<code>import { useRef } from 'react';import { useDrag } from 'beautiful-react-hooks'; const MyComponent = () => { const ref = useRef(); const isDragged = useDrag(ref); return ( <page> 可拖動元素 {isDragged && 正在被拖動} /<page> );};/<code> 傳入更多參數可以實現更多功能，詳情可以到其 github 主頁 beautifulinteractions/beautiful-react-hooks 上查看。
至於Hook本身，其實代碼都不復雜，都是 useEffect、useState、useCallback 等「原語」的排列組合。閒暇時翻看一下這個庫寥寥數行的源碼，對於未來代碼的寫作思路也大有助益；在面試時回憶起這麼 beautiful 的庫的源碼，面試結果也會 beautiful 哦。
閱讀更多 張聖聽 的文章
