proste-react-use

中文|EN

更多使用方法可以查看测试中的示例

生命周期

- useMounted,useLayoutMounted

只有在加载时触发一次

- useSuspense

配合 Suspense 组件使用 可以使用任意的 Promise 函数 key 需要是一个唯一值， 如果你想复用父组件的信息可以使用和父组件相同的 key

- useUpdateEffect,useUpdatedLayoutEffect

只有在依赖更新（除了第一次）触发

Web API

- useRequestAnimationFrame

requestAnimationFrame hook

- useMemory

获取当前内存信息。 useMemory使用的是performance.memory API，是谷歌浏览器提供的非标准扩展，注意使用方式！

- useIntersectionObserver,useIntersectionObserverState

创建一个IntersectionObserver的API，useIntersectionObserver和useIntersectionObserverState的区别是useIntersectionObserver通过回调获取信息，useIntersectionObserverState会将回调的内容作为state返回。两者都可以中断监听和恢复监听。

- useClipboard

可以通过 ref 绑定某个 input 节点复制对应的 value 值， 这个在非受控节点 上会非常有用。 或者通过 copyToClipboard 复制到粘贴板

- useEyeDropper

屏幕取色器，可以获取当前屏幕上选中区域的颜色。

- useWebSocket

web socket hook

- useBroadcastChannel

BroadcastChannel 通讯 API

动画

- useTransition

数字缓动动画 内置部分缓动动画函数

状态

- useContextWithEqual

比较相同 context 判断返回数据是否有变化进行渲染 依赖 use-context-selector。 使用 use-context-selector 的 createContext 创建 context。

- useMap, useSet

Map 和 Set的hook实现

- useWeakMap, useWeakSet

WeakMap 和 WeakSet的hook实现

工具

- useJWT

解码jwt hook

- useCountDown

倒计时信息。如果设置了 targetDate 后继续配置 days 等参数 会在 targetDate 的基础上累加。

- useDelay

可以主动调用的延迟函数，返回一个函数，函数执行延迟调用传入的函数。

- useEventEmitter

发布订阅钩子，实例只在全局初始化一次。

- useAsyncLock

异步函数锁，在异步函数执行完成执行不会再执行，会返回一个 undefind。

- useMoneyFormat

格式化货币金额

- useClassNames

将各种类型的数据合并成一个 string 类型返回用于 className