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 可以用来禁止页面滚动