前端好库：用 beautiful-react-hooks 大幅加速你的 React 开发

随着 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 哦。

閱讀更多 張聖聽 的文章

關鍵字: 产品经理 好库 加速