必不可少的 React Hooks集合. 移植 libreact.
安装:npm i react-use
注:React版本 >= 16.8.0
-
useBattery— 跟踪设备电池状态。useGeolocation— 跟踪用户设备的地理位置状态。useHoveranduseHoverDirty— 跟踪鼠标悬停某个元素的状态。useIdle— 跟踪用户是否处于非活动状态。useKey,useKeyPress,useKeyboardJs, 和useKeyPressEvent— 追踪按键。useLocation— 跟踪页面导航栏的位置状态。useMedia— 跟踪CSS媒体查询的状态。useMediaDevices— 跟踪连接的硬件设备的状态。useMotion— 跟踪设备的运动传感器的状态。useMouseanduseMouseHovered— 跟踪鼠标位置的状态。useNetwork— 跟踪用户的互联网连接状态。useOrientation— 跟踪设备屏幕方向的状态。usePageLeave— 当鼠标离开页面边界时触发。useScroll— 跟踪HTML元素的滚动位置。useSize— 跟踪HTML元素的维度。useStartTyping— 检测用户何时开始输入。useWindowScroll— 跟踪窗口滚动位置。useWindowSize— 跟踪窗口尺寸。
-
useAudio— 播放音频并公开其控件。useClickAway— 当用户点击目标区域外时触发回调。useCss— 动态调整CSS。useDropanduseDropArea— 跟踪文件,链接和复制粘贴。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中的值。useThrottleanduseThrottleFn— 节流一个函数。useTitle— 设置页面标题。
-
useEffectOnce— 仅运行一次的修改后的useEffect。useEvent— 订阅事件。useLifecycles— 调用mount和unmount回调。useRefMounted— 跟踪组件是否已挂载。usePromise— 仅在安装组件时解析promise。useLogger— 在组件经历生命周期时登录控制台。useMount— 调用mount回调。useUnmount— 调用unmount回调。useUpdateEffect— 仅在更新时运行一个effect。useDeepCompareEffect— 运行一个effect通过深度比较其依赖项。
-
createMemo— memoized hooks的工厂钩子。useGetSet— 返回状态 getterget()而不是原始状态。useGetSetState— 就像useGetSet和useSetState有个孩子。useObservable— 跟踪Observable的最新值。useSetState— 创建类似this.setState的setState方法。useToggleanduseBoolean— 跟踪布尔值的状态。useCounteranduseNumber— 跟踪数字的状态。useList— 跟踪数组的状态。useMap— 跟踪对象的状态。
踩坑
useEvent
传入的handler需要用useCallback包裹一下,不然每次render hander都是一个新的,引发副作用重新注册事件,导致方法不触发,或触发了上一次注册的事件(第一次注册的不生效)。