Skip to content

xyhxx/proste-react-use

Repository files navigation

中文|EN

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

生命周期

只有在加载时触发一次

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

只有在依赖更新(除了第一次)触发

Web API

requestAnimationFrame hook

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

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

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

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

web socket hook

BroadcastChannel 通讯 API

动画

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

状态

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

Map 和 Set的hook实现

WeakMap 和 WeakSet的hook实现

工具

解码jwt hook

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

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

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

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

格式化货币金额

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