useRateLimitedState
函数：useRateLimitedState()
ts
function useRateLimitedState<TValue>(value, options): [TValue, Dispatch<SetStateAction<TValue>>, RateLimiter<Dispatch<SetStateAction<TValue>>>]
function useRateLimitedState<TValue>(value, options): [TValue, Dispatch<SetStateAction<TValue>>, RateLimiter<Dispatch<SetStateAction<TValue>>>]
定义于：react-pacer/src/rate-limiter/useRateLimitedState.ts:66
一个 React 钩子，用于创建一个速率限制的状态值，该值强制执行时间窗口内状态更新的硬限制。 此钩子将 React 的 useState 与速率限制功能相结合，以提供受控的状态更新。
速率限制是一种简单的“硬限制”方法——它允许所有更新，直到达到限制，然后阻止后续更新，直到窗口重置。与节流或防抖不同，它不会尝试隔开或智能地折叠更新。这可能导致快速更新的爆发，然后是一段没有更新的时期。
速率限制器支持两种类型的窗口：
- 'fixed'：一个严格的窗口，在窗口期过后重置。窗口内的所有更新都计入限制，并且窗口在期满后完全重置。
- 'sliding'：一个滚动窗口，允许随着旧更新的过期而更新。这提供了一个更随时间推移更一致的更新速率。
对于更平滑的更新模式，请考虑：
- useThrottledState：当您希望更新之间具有一致的间距时（例如 UI 更改）
- useDebouncedState：当您想要将快速更新折叠为单个更新时（例如搜索输入）
速率限制主要应用于需要强制执行严格限制的情况，例如 API 速率限制。
该钩子返回一个包含以下内容的元组：
- 速率限制的状态值
- 一个遵守配置限制的速率限制设置器函数
- 用于附加控制的 rateLimiter 实例
要更直接地控制速率限制而不进行状态管理， 请考虑改用较低级别的 useRateLimiter 钩子。
类型参数
• TValue
参数
value
TValue
options
RateLimiterOptions<Dispatch<SetStateAction<TValue>>>
返回
[TValue, Dispatch<SetStateAction<TValue>>, RateLimiter<Dispatch<SetStateAction<TValue>>>]
示例
tsx
// 基本速率限制 - 滑动窗口内每分钟最多更新 5 次状态
const [value, setValue, rateLimiter] = useRateLimitedState(0, {
limit: 5,
window: 60000,
windowType: 'sliding'
});
// 带有拒绝回调和固定窗口
const [value, setValue] = useRateLimitedState(0, {
limit: 3,
window: 5000,
windowType: 'fixed',
onReject: (rateLimiter) => {
alert(`已达到速率限制。请在 ${rateLimiter.getMsUntilNextWindow()} 毫秒后重试`);
}
});
// 如果需要，访问 rateLimiter 方法
const handleSubmit = () => {
const remaining = rateLimiter.getRemainingInWindow();
if (remaining > 0) {
setValue(newValue);
} else {
showRateLimitWarning();
}
};
// 基本速率限制 - 滑动窗口内每分钟最多更新 5 次状态
const [value, setValue, rateLimiter] = useRateLimitedState(0, {
limit: 5,
window: 60000,
windowType: 'sliding'
});
// 带有拒绝回调和固定窗口
const [value, setValue] = useRateLimitedState(0, {
limit: 3,
window: 5000,
windowType: 'fixed',
onReject: (rateLimiter) => {
alert(`已达到速率限制。请在 ${rateLimiter.getMsUntilNextWindow()} 毫秒后重试`);
}
});
// 如果需要，访问 rateLimiter 方法
const handleSubmit = () => {
const remaining = rateLimiter.getRemainingInWindow();
if (remaining > 0) {
setValue(newValue);
} else {
showRateLimitWarning();
}
};
