react-use 是一个提供了各种 React Hooks 的开源库。react-use 通过提供各种自定义的 React Hooks，使得在函数式组件中更容易地管理状态、副作用、生命周期等。这些 Hooks 涵盖了很多常见的场景，总的来说，react-use 的作用就是扩展了 React Hooks 的功能，让你能够更方便地在函数式组件中实现各种功能，从而提高了 React 应用的开发效率和可维护性。

github开源地址：GitHub - streamich/react-use: React Hooks — 👍

安装

npm i react-use

// 或者

pnpm i react-use

文档说明和实例

提供在线说明文档和使用demo：Webpack App

中文说明文档：react-use-chinese/README.md at master · zenghongtu/react-use-chinese · GitHub

比如我们使用useSetState这个api，在创建一个状态的时候，我们可以单独修改这个状态里面的某个属性值，例如我们创建了：

    // 分页相关参数控制
    const [page, setPage] = useSetState<Page>({
        pageNum: 1,
        pageSize: 10,
        total: 0,
    })



    // 修改页码
    setPage({
        total: res.cont
    })

常用hooks说明

传感器相关

useBattery — 跟踪设备电池状态。 
useGeolocation — 跟踪用户设备的地理位置状态。 
useHover and useHoverDirty — 跟踪鼠标悬停某个元素的状态。 
useIdle — 跟踪用户是否处于非活动状态。
useKey, useKeyPress, useKeyboardJs, 和 useKeyPressEvent — 追踪按键。 
useLocation — 跟踪页面导航栏的位置状态。
useMedia — 跟踪CSS媒体查询的状态。 
useMediaDevices — 跟踪连接的硬件设备的状态。
useMotion — 跟踪设备的运动传感器的状态。
useMouse and useMouseHovered — 跟踪鼠标位置的状态。 
useNetwork — 跟踪用户的互联网连接状态。
useOrientation — 跟踪设备屏幕方向的状态。
usePageLeave — 当鼠标离开页面边界时触发。
useScroll — 跟踪HTML元素的滚动位置。 
useSize — 跟踪HTML元素的维度。
useStartTyping — 检测用户何时开始输入。
useWindowScroll — 跟踪 窗口 滚动位置。 
useWindowSize — 跟踪 窗口 尺寸。

用户界面相关

useAudio — 播放音频并公开其控件。 
useClickAway — 当用户点击目标区域外时触发回调。
useCss — 动态调整CSS。
useDrop and useDropArea — 跟踪文件，链接和复制粘贴。
useFullscreen — 全屏显示元素或视频。 
useSpeech — 从文本字符串合成语音。 
useVideo — 播放视频，跟踪其状态，以及公开播放控件。 
useWait — UI的复杂等待管理。

动画效果

useRaf — 在每个 requestAnimationFrame 上重新呈现组件。
useSpring — 根据弹簧动力学随时间插入数字。
useTimeout — 超时后返回true。
useTween — 重新渲染组件，同时补间0到1之间的数字。 
useUpdate — 返回一个回调，在调用时重新呈现组件。

副作用

useAsync — 解析一个 async 函数。
useAsyncFn — 异步函数的状态管理。
useAsyncRetry — useAsync 带有 retry()方法。
useBeforeUnload — 当用户尝试重新加载或关闭页面时显示浏览器警报。
useCopyToClipboard — 将文本复制到剪贴板。
useDebounce — 防抖函数。 
useFavicon — 设置页面的favicon。
useLocalStorage — 管理localStorage中的值。
useLockBodyScroll — 锁定body元素的滚动。
useSessionStorage — 管理sessionStorage中的值。
useThrottle and useThrottleFn — 节流一个函数。
useTitle — 设置页面标题。

生命周期

useEffectOnce — 仅运行一次的修改后的useEffect。
useEvent — 订阅事件。
useLifecycles — 调用mount和unmount回调。
useRefMounted — 跟踪组件是否已挂载。
usePromise — 仅在安装组件时解析promise。
useLogger — 在组件经历生命周期时登录控制台。
useMount — 调用mount回调。
useUnmount — 调用unmount回调。
useUpdateEffect — 仅在更新时运行一个effect。
useDeepCompareEffect — 运行一个effect通过深度比较其依赖项。

状态相关

createMemo — memoized hooks的工厂钩子。
useGetSet — 返回状态 getter get() 而不是原始状态。
useGetSetState — 就像 useGetSet 和 useSetState 有个孩子。
useObservable — 跟踪Observable的最新值。
useSetState — 创建类似this.setState的setState方法。
useToggle and useBoolean — 跟踪布尔值的状态。
useCounter and useNumber — 跟踪数字的状态。
useList — 跟踪数组的状态。
useMap — 跟踪对象的状态。

react-use让react开发速度70迈，心情是自由自在，爽