• reactuse 基本使用


    github地址:https://github.com/streamich/react-use

    安装依赖:npm i react-use

    使用:(需要安装React 16.8.0或更高版本才能使用Hooks API)

    import {useToggle} from 'react-use'

    传感器

    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 — 跟踪对象的状态。

  • 相关阅读:
    边缘节点为什么不能直接通过 kubernetes service 直接访问云端 master 节点中的 API Server
    Leaflet中原生方式实现测距
    http网页是否能引用https资源/调用https接口?https网页是否能引用http资源/调用http接口?
    Vite2 Vue3 SSR
    SQL模糊查询的四种匹配模式
    vue3中ref、reactive、toRef、toRefs区别
    iis在访问vue服务时报错
    vue3中使用elform
    koa2cors实现过程以及应用
    chrome v8的垃圾回收机制和内存泄漏分析
  • 原文地址:https://www.cnblogs.com/huayang1995/p/15951200.html
Copyright © 2020-2023  润新知