* 反应性能钩
关于
停止和节制你的功能,状态和效果 以获得性能提升!
关键特性
🔮 简单使用
🚀 快速而轻快
✨ 滴出和发声
🎊 生命周期起跳和节流
📡 国家降级和节流
安装
npm install --save @better-hooks/performance
或者说
yarn add @better-hooks/performance
实例
使用深度效果
这个钩子很能比较依赖性 优化收缩效果
import React from "react";
import { useDebounce } from "@better-hooks/performance";
const MyComponent: React.FC = () => {
const {debounce, reset, active} = useDeepEffect(() => {
// do something
}, [{a: 123}]) // <--- we will check if the deps are equal between rerenders
return (
// ...
)
}
调试
此钩子允许调试指定的函数 。 函数会在一段时间后调用 从上次执行。 我们可以用额外的道具来调整解弹时间.
import React from "react";
import { useDebounce } from "@better-hooks/performance";
const MyComponent: React.FC = () => {
const {debounce, reset, active} = useDebounce({ delay: 600 })
// Standard usage
const onTyping = () => {
debounce(() => {
// debounced logic
})
}
// Dynamic delay value
const onTypingDynamic = (value: string, customDelay: number) => {
debounce(() => {
// debounced logic
}, { delay: customDelay })
}
return (
// ...
)
}
调试状态
这个钩子可以解开状态. 值会从上次保存一段时间后保存 执行设置函数。 我们可以用额外的道具来调整解弹时间.
import React from "react";
import { useWindowEvent } from "@better-hooks/window";
import { useDebounceState } from "@better-hooks/performance";
const MyComponent: React.FC = () => {
const [value, setValue] = useDebounceState("20px")
useWindowEvent("scroll", (e) => {
setValue(e.scrollY + "px");
})
return (
// ...
)
}
调试效果
这种钩子可以解开生命周期效应.
import React from "react";
import { useDebounceEffect } from "@better-hooks/performance";
const MyComponent: React.FC = (props) => {
useDebounceEffect(() => {
// Do something
}, { delay: 200 }, [props])
return (
// ...
)
}
使用色调
此钩子允许调试指定的函数 .
import React from "react";
import { useThrottle } from "@better-hooks/performance";
const MyComponent: React.FC = ({ delay }) => {
const {throttle, reset, active} = useThrottle(delay)
// Standard usage
const onScroll = () => {
throttle(() => {
// throttle logic
})
}
// Dynamic delay value
const onScrollDynamic = (value: string, customDelay: number) => {
throttle(() => {
// throttle logic
}, customDelay)
}
return (
// ...
)
}
使用Throttle状态
这种钩子可以使国家节制. 我们可以调整执行间隔时间和执行暂停 附加道具的时间.
import React from "react";
import { useWindowEvent } from "@better-hooks/window";
import { useThrottleState } from "@better-hooks/performance";
const MyComponent: React.FC = () => {
const [value, setValue] = useThrottleState("20px")
useWindowEvent("scroll", (e) => {
setValue(e.scrollY + "px");
})
return (
// ...
)
}
import React from "react";
import { useWindowEvent } from "@better-hooks/window";
import { useThrottleState } from "@better-hooks/performance";
const MyComponent: React.FC = () => {
const [value, setValue] = useThrottleState("20px", {
interval: 200, // We will save values at least once per 200ms
timeout: 400 // Last set state action will get triggered after 400ms, we can also disable it
})
useWindowEvent("scroll", (e) => {
setValue(e.scrollY + "px");
})
return (
// ...
)
}
使用热力效应
这种钩子可以解开生命周期效应.
import React from "react";
import { useThrottleEffect } from "@better-hooks/performance";
const MyComponent: React.FC = (props) => {
useThrottleEffect(() => {
// Do something
}, { interval: 200, timeout: false }, [props])
return (
// ...
)
}