Hooks-react-using NPM

Features

封装了常用React Hooks的库
更轻松地管理组件中的状态和逻辑
支持 TypeScript

Install

by using npm:

npm install hooks-react-using --save

by using yarn:

yarn add hooks-react-using

by using pnpm:

pnpm install hooks-react-using --save

Basic usage

import { useToggle, useCountDown, useClickOutside } from 'hooks-react-using';

API Hooks

`Lifecycles`

useMount — useMount 只在组件初始化时执行。
useUnmount — useUnmount 在组件卸载时执行的。

`State`

useSetState — useSetState 管理 object 类型 state
useDebounce — useDebounce 控制值在多次更新的防抖。
useThrottle — useThrottle 控制值在多次更新的节流。
useLocalStorageState — useLocalStorageState 将状态持久化到 localStorage 本地存储中
useSessionStorageState — useSessionStorageState 将状态持久化到 sessionStorage 本地存储中
usePrevious — usePrevious 用来获取组件上一次渲染时某个状态或属性的值
useBoolean — useBoolean 管理一个布尔类型的状态值
useArray — useArray 管理一个Array类型的状态
useToggle — useToggle 可用于管理布尔值状态，还可以用于管理任何类型的状态的真假值
useCountDown — useCountDown 可用于实现倒计时
useRafCountDown — useRafCountDown 可用于实现倒计时，基于 requestAnimationFrame 实现
useLatest — 获取一个值的最新引用
useStableState — useStableState 与 useState 类似，在 state 是最新值并且 setState 和最新值相等时会阻止 setState
useForceUpdate — useForceUpdate 强制组件重新渲染
useMap — useMap 管理 new Map() 创建的映射对象的状态
useWeakMap — useMap 管理 new WeakMap() 创建的映射对象的状态，弱引用版本的 Map
useSet — useSet 管理 new Set() 集合类型的数据结构
useWeakSet — useWeakSet 管理 new WeakSet() 集合类型的数据结构,弱引用版本的 Set
useQueue — useQueue 简单的队列，用于管理队列数据结构
useTaskQueue — useTaskQueue 任务队列，用于管理队列数据结构，主要处理异步任务的队列

`Effect`

useWatchEffect — useWatchEffect 与 useEffect 类似，可以观察哪个依赖变化触发了 useEffect 的执行，观察依赖变更的新值和旧值，并且可以取消观察。
useWatchLayoutEffect — useWatchLayoutEffect 与 useLayoutEffect 类似，可以观察哪个依赖变化触发了 useEffect 的执行，观察依赖变更的新值和旧值，并且可以取消观察。
useDeepWatchEffect — useDeepWatchEffect 与 useEffect 类似，可以深度观察哪个依赖变化触发了 useEffect 的执行，观察依赖变更的新值和旧值，并且可以取消观察。
useDeepWatchLayoutEffect — useDeepWatchLayoutEffect 与 useLayoutEffect 类似，可以深度观察哪个依赖变化触发了 useEffect 的执行，观察依赖变更的新值和旧值，并且可以取消观察。
useUpdateEffect — useUpdateEffect 与 useEffect 类似，但只在依赖项更新时运行，不包括初次渲染
useUpdateLayoutEffect — useUpdateLayoutEffect 与 useLayoutEffect 类似，但只在依赖项更新时运行，不包括初次渲染
useAsyncEffect — useAsyncEffect 与 useEffect 类似，可以使用异步函数
useDeepCompareEffect — useDeepCompareEffect 与 useEffect 类似，用于在函数组件中实现具有深比较
useDeepCompareLayoutEffect — useDeepCompareLayoutEffect 与 useLayoutEffect 类似，用于在函数组件中实现具有深比较
useOnceEffect — useOnceEffect 与 useEffect 类似，但只在依赖项更新时执行一次，后续依赖变更不再执行
useOnceUpdateEffect — useOnceUpdateEffect 与 useEffect 类似，但是不包括初次渲染，并且只在依赖项更新时执行一次，后续依赖变更不再执行
useOnceLayoutEffect — useOnceLayoutEffect 与 useLayoutEffect 类似，但只在依赖项更新时执行一次，后续依赖变更不再执行
useOnceUpdateLayoutEffect — useOnceUpdateLayoutEffect 与 useLayoutEffect 类似，但是不包括初次渲染，并且只在依赖项更新时执行一次，后续依赖变更不再执行
useDebounceFn — useDebounceFn 控制函数在多次触发的防抖。
useDebounceEffect — useDebounceEffect 可以有效地控制 useEffect 防抖。
useThrottleFn — useThrottleFn 限制函数的执行频率，节流。
useThrottleEffect — useThrottleEffect 可以有效地控制 useEffect 节流。
useTimeoutFn — useTimeoutFn 在指定的时间后执行一个函数
useRafTimeoutFn — useRafTimeoutFn 在指定的时间后执行一个函数，基于 requestAnimationFrame 实现
useIntervalFn — useIntervalFn 定时器执行一个函数
useRafIntervalFn — useRafIntervalFn 定时器执行一个函数，基于 requestAnimationFrame 实现

`Elements`

useClickOutside — useClickOutside 监听点击目标元素外部时执行某个回调函数，点击事件也可以自定义，可以是其它的鼠标事件
useElementSize — useElementSize 可以用于获取DOM元素的尺寸信息
useScroll — useScroll 用于获取页面滚动位置的信息
useHover — useHover 鼠标是否正在悬停目标元素上
useTitle — useTitle 用来动态修改网页的标题
useDocumentVisibility — useDocumentVisibility 检测当前页面是否处于活动状态（即当前窗口的可见性）
useEventListener — useEventListener 用于封装原生的 addEventListener 方法，使得在函数式组件中添加事件监听器更加方便
useLongPress — useLongPress 用于在长按某个元素时触发回调函数
useFocusWithin — useFocusWithin 监听元素的焦点变化
useScrollLock — useScrollLock 可以用来禁止页面滚动