React-use一个很好用的React Hooks库

2022-03-10512次阅读React

React-use一个很好用的React Hooks库
github地址:https://github.com/streamich/react-use

传感器

useBattery  - 跟踪设备电池状态。
useGeolocation - 跟踪用户设备的地理位置状态。
useHover and useHoverDirty - 跟踪某个元素的鼠标悬停状态。
useIdle - 跟踪用户是否处于非活动状态。
useIntersection - 跟踪HTML元素的交集。
useKey, useKeyPress, useKeyboardJs, and useKeyPressEvent - 跟踪按键。
useLocation and useSearchParam - 跟踪页面导航栏位置状态。
useLongPress - 跟踪某个元素的长按手势。
useMedia - 跟踪CSS媒体查询的状态。
useMediaDevices - 跟踪连接的硬件设备的状态。
useMotion  - 跟踪设备的运动传感器的状态。
useMouse and useMouseHovered - 跟踪鼠标位置的状态。
useNetwork - 跟踪用户的internet连接状态。
useOrientation - 跟踪设备屏幕方向的状态。
usePageLeave - 当鼠标离开页面边界时触发。
useScroll  - 跟踪HTML元素的滚动位置。
usescrolling - 跟踪HTML元素是否正在滚动。
useSize - 跟踪HTML元素的大小。
useStartTyping - 检测用户何时开始键入。
useWindowScroll - 跟踪窗口滚动位置。
useWindowSize - 跟踪窗口尺寸。
useMeasure - 使用Resize Observer API跟踪HTML元素的维度。
createBreakpoint - 跟踪innerWidth
useScrollbarWidth - 检测浏览器的本机滚动条宽度。

UI

useAudio - 播放音频并公开其控件。
useClickAway - 当用户在目标区域外单击时触发回调。
useCss - 动态调整CSS。
useDrop and useDropArea -  跟踪文件、链接和复制粘贴拖放。
useFullscreen - 全屏显示元素或视频。
useSlider - 在任何HTML元素上提供滑动行为。
useSpeech   - 从文本字符串合成语音。
useVibrate - 使用Vibration API提供物理反馈。
useVideo  - 播放视频,跟踪其状态,并公开播放控件。

动画

useRaf - 在每个requestAnimationFrame上重新呈现组件。
useInterval and useHarmonicIntervalFn - 使用setInterval在设置的间隔上重新渲染组件。
useSpring  - 根据spring dynamics随时间插值。
useTimeout - 超时后重新呈现组件。
useTimeown - 超时后调用给定函数。
useTween - re-renders组件,同时将数字从0变为1。
useUpdate - 返回回调,在调用时重新呈现组件。

副作用

useAsync、useAsyncFn and useAsyncRetry - 解析异步函数。
useBeforeUnload  - 当用户尝试重新加载或关闭页面时显示浏览器警报。
useCookie - 提供读取、更新和删除cookie的方法。
useCopyToClipBoard - 将文本复制到剪贴板。
useDebounce - 对函数进行消噪。
useError - 错误调度程序。
useFavicon - 设置页面的favicon。
useLocalStorage - 管理localStorage中的值。
useLockBodyScroll - 锁定body元素的滚动。
useRafLoop - 在RAF循环中调用给定的函数。
UseSessionStore - 管理SessionStore中的值。
useThrottle and useThrottleFn - 限制函数。
useTitle - 设置页面标题。
usePermission - 查询浏览器API的权限状态。

生命周期

usEffectOnce - 一个只运行一次的修改的useffect挂钩。
useEvent - 订阅事件。
useLifecycles - 调用mount和unmount回调。
useMountedState and useUnmountPromise - 如果已挂载组件,则跟踪。
usePromise - 仅在安装组件时解析promise。
useLogger - 在组件经历生命周期时登录控制台。
useMount - 调用mount回调。
useUmount - 调用unmount回调。
useUpdateEffect -  仅对更新运行效果。
useIsomorphicLayoutEffect - 在服务器端呈现时不显示警告的useLayoutEffect。
useDeepCompareEffect、useShallowCompareEffect和useCustomCompareEffect - 根据对其依赖项的深入比较运行一个效果

状态

createMemo - 记忆挂钩工厂。
createReducer - 带有定制中间件的reducer钩子工厂。
createReducerContext and createStateContext -  组件之间共享状态的钩子工厂。
useDefault - 当state为空或未定义时返回默认值。
useGetSet - 返回state getter get() 而不是原始状态。
useGetSetState - 就好像useGetSet和useSetstate有了孩子一样。
usePrevious - 返回以前的状态或道具。
usePreviousDistinct - 与usePrevious类似,但使用谓词来确定是否应更新previous。
useObservable - 跟踪可观测数据的最新值。
useRafState - 创建仅在requestAnimationFrame之后更新的setState方法。
useSetState - 创建工作方式如this.setState的setState方法。
useStateList - 循环遍历数组。
usettoggle and useBoolean - 跟踪布尔值的状态。
useCounter and useNumber - 跟踪数字的状态。
useList and useUpsert - 跟踪数组的状态
useMap - 跟踪对象的状态。
useSet - 跟踪集合的状态。
useQueue - 实现简单队列。
useStateValidator - 跟踪对象的状态。
useStateWithHistory - 存储以前的状态值并提供用于遍历这些值的句柄。
useMultiStateValidator - 类似于useStateValidator,但一次跟踪多个状态。
useMediatedState - 与常规useState类似,但具有自定义函数中介。
useFirstMountState - 检查当前渲染是否为第一个。
useRendersCount - count组件渲染。
createGlobalState - 跨组件共享状态。
useMethods - useReducer的完美替代品。

其他

useEnsureForwardedRef and EnsureForwardRef - 安全使用React.forwardedRef。
上一篇: react-router不同路由使用相同组件无法渲染问题  下一篇: Grid 用于布局,Flexbox 用于组件  

React-use一个很好用的React Hooks库相关文章