// Github项目每日优选 第3篇
// 正文共 1996 字
// 预计阅读时间：10 分钟各位宝友大家好，今天给大家带来了 react-use 。咱说心里话，这个东西我第一次看见真觉得捡到了宝儿。React hooks我相信很多同学已经门清了，这个库实现了基本上我们常见的所有自定义Hooks,需要哪个直接查看源代码复制到你的项目中，二次在改一改，你的同事夸你666呢😁
Github是个巨大的仓库，里面有非常多优秀的项目。其实并不是一定star多的项目才值得关注，有很多小而美的项目我们完全可以去关注学习，并及时fork。站在前人的肩膀上造轮子或者直接应用到项目中，这样才能不怕🙅🏻♀️被卷。我们每天争取用最短小的文章，最短的时间，给你带来最大的收益。
ℹ️ 一句话概述他就是必不可少的 React Hooks 集合.
react-use详情
1 传感器
-
useBattery— 跟踪设备电池状态。
-
useGeolocation— 跟踪用户设备的地理位置状态。 -
useHoveranduseHoverDirty— 跟踪鼠标悬停某个元素的状态。 -
useHash—跟踪用户hash变化。 -
useIdle— 跟踪用户是否处于非活动状态。 -
useIntersection— 跟踪元素的视窗变化区域（用于懒加载IntersectionObserver） -
useKey,useKeyPress,useKeyboardJs, anduseKeyPressEvent— 追踪按键。 -
useLocationanduseSearchParam— 跟踪页面导航栏的位置状态。 -
useLongPress— 跟踪某些元素的长按手势。 -
useMedia—跟踪 CSS 媒体查询的状态。 -
useMediaDevices— 跟踪连接的硬件设备的状态。 -
useMotion— 跟踪设备运动传感器的状态。 -
useMouseanduseMouseHovered— 跟踪鼠标位置的状态。 -
useMouseWheel— 跟踪滚动鼠标滚轮的 deltaY。 -
useNetworkState— 跟踪浏览器网络连接的状态。 -
useOrientation— 跟踪设备屏幕方向的状态。 -
usePageLeave— 当鼠标离开页面边界时触发。 -
useScratch— 跟踪鼠标点击和滑动状态。 -
useScroll— 跟踪 HTML 元素的滚动位置。 -
useScrolling— 跟踪 HTML 元素是否正在滚动。 -
useStartTyping— 检测用户何时开始输入。 -
useWindowScroll— 跟踪窗口滚动位置。 -
useWindowSize— 跟踪窗口尺寸。 -
useMeasureanduseSize— 跟踪 HTML 元素的尺寸。 -
createBreakpoint— 跟踪innerWidth -
useScrollbarWidth— 检测浏览器的原生滚动条宽度。
2 UI
-
useAudio— 播放音频并展示其控件。 -
useClickAway—当用户点击目标区域外时触发回调。 -
useCss— 动态调整 CSS。 -
useDropanduseDropArea— 跟踪文件、链接和复制粘贴放置。 -
useFullscreen—全屏显示元素或视频。 -
useSlider— 在任何 HTML 元素上提供滑动行为。 -
useSpeech— 从文本字符串合成语音。 -
useVibrate— 使用振动 API 提供物理反馈。Vibration API. -
useVideo— 播放视频、跟踪其状态并展示播放控件。
3 Animations
-
useRaf—在每个 requestAnimationFrame 上重新渲染组件。 -
useIntervalanduseHarmonicIntervalFn— 使用 setInterval 在设定的间隔上重新渲染组件。 -
useSpring— 根据弹簧动力学随时间插入数字。 -
useTimeout— 超时后重新渲染组件。 -
useTimeoutFn— 超时后调用给定函数。 -
useTween— 重新渲染组件，同时对从 0 到 1 的数字进行补间。 -
useUpdate—返回一个回调，它在调用时重新渲染组件。
4 Side-effects
-
useAsync,useAsyncFn, anduseAsyncRetry— 解析异步函数。 -
useBeforeUnload— 当用户尝试重新加载或关闭页面时显示浏览器警报。 -
useCookie— 提供读取、更新和删除 cookie 的方法。 -
useCopyToClipboard— 将文本复制到剪贴板。 -
useDebounce—函数去抖] -
useError— 错误调度程序。 -
useFavicon— 设置页面的 favicon。 -
useLocalStorage— 管理 localStorage 中的值。 -
useLockBodyScroll— 锁定主体元素的滚动。 -
useRafLoop— 在 RAF 循环内调用给定的函数。 -
useSessionStorage— 管理 sessionStorage 中的值。 -
useThrottleanduseThrottleFn— throttles a function. -
useTitle— 置页面的标题。 -
usePermission— 查询浏览器 API 的权限状态。
5 Lifecycles
-
useEffectOnce— 修改后的 useEffect 钩子，只运行一次。 -
useEvent— 订阅事件。 -
useLifecycles— callsmountandunmountcallbacks. -
useMountedStateanduseUnmountPromise— 踪组件是否已安装。 -
usePromise— resolves promise only while component is mounted. -
useLogger— 在组件经历生命周期时控制台打印。 -
useMount— 调用挂载回调。 -
useUnmount— 调用卸载回调。 -
useUpdateEffect— 仅对更新运行效果。 -
useIsomorphicLayoutEffect— 服务端渲染时不显示警告的 useLayoutEffect。 -
useDeepCompareEffect,useShallowCompareEffect, anduseCustomCompareEffect— 根据其依赖项的深度比较运行效果
6 State
-
createMemo— 记忆钩子工厂。 -
createReducer— 带有自定义中间件的 reducer 钩子工厂。 -
createReducerContextandcreateStateContext— 组件之间共享状态的钩子工厂。 -
useDefault— 当 state 为 null 或 undefined 时返回默认值。 -
useGetSet— 返回状态 getter get() 而不是原始状态。 -
useGetSetState— as ifuseGetSetanduseSetStatehad a baby（这句原谅我不厚道的笑了）. -
useLatest— 返回最新的 state 或 props -
usePrevious— 返回最新的 state 或 props. -
usePreviousDistinct— 与 usePrevious 类似，但使用谓词来确定是否应更新以前的内容。 -
useObservable— 跟踪 Observable 的最新值。 -
useRafState— 创建仅在 requestAnimationFrame 之后更新的 setState 方法。 -
useSetState— 创建类似于 this.setState 的 setState 方法。 -
useStateList—循环迭代数组。 -
useToggleanduseBoolean— 跟踪布尔值的状态。 -
useCounteranduseNumber— 跟踪数字的状态。 -
useListanduseUpsert— 跟踪数组的状态。 -
useMap— — 跟踪对象的状态。 -
useSet— 跟踪 Set 的状态。 -
useQueue—实现简单的队列。 -
useStateValidator— 跟踪对象的状态。 -
useStateWithHistory— 存储先前的状态值并提供遍历它们的句柄。 -
useMultiStateValidator— 与 useStateValidator 类似，但一次跟踪多个状态。 -
useMediatedState—与常规 useState 类似，但通过自定义函数进行调解。 -
useFirstMountState—检查当前渲染是否是第一个。 -
useRendersCount— 计算组件渲染。 -
createGlobalState— 跨组件共享状态。 -
useMethods— useReducer 的简洁替代品。
7 其他各种各样的
-
useEnsuredForwardedRefandensuredForwardRef— 安全地使用 React.forwardedRef。
8. 代码演示
import {useBattery} from 'react-use';
const Demo = () => {
const batteryState = useBattery();
if (!batteryState.isSupported) {
return (
<div>
<strong>Battery sensor</strong>: <span>not supported</span>
</div>
);
}
if (!batteryState.fetched) {
return (
<div>
<strong>Battery sensor</strong>: <span>supported</span> <br />
<strong>Battery state</strong>: <span>fetching</span>
</div>
);
}
return (
<div>
<strong>Battery sensor</strong>: <span>supported</span> <br />
<strong>Battery state</strong>: <span>fetched</span> <br />
<strong>Charge level</strong>: <span>{ (batteryState.level * 100).toFixed(0) }%</span> <br />
<strong>Charging</strong>: <span>{ batteryState.charging ? 'yes' : 'no' }</span> <br />
<strong>Charging time</strong>:
<span>{ batteryState.chargingTime ? batteryState.chargingTime : 'finished' }</span> <br />
<strong>Discharging time</strong>: <span>{ batteryState.dischargingTime }</span>
</div>
);
};
本文分享自微信公众号 - 前端先锋（jingchengyideng）。
如有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。
