使用速率限制值
函数: useRateLimitedValue()
ts
function useRateLimitedValue<TValue, TSelected>(
value,
options,
selector?): [TValue, ReactRateLimiter<Dispatch<SetStateAction<TValue>>, TSelected>]
function useRateLimitedValue<TValue, TSelected>(
value,
options,
selector?): [TValue, ReactRateLimiter<Dispatch<SetStateAction<TValue>>, TSelected>]
定义于: react-pacer/src/rate-limiter/useRateLimitedValue.ts:96
一个高级 React Hook，用于创建一个值的限速版本，该值在一个时间窗口内最多更新一定次数。此 Hook 在内部使用 React 的 useState 来管理限速状态。
限速是一种简单的“硬限制”方法——它允许所有更新，直到达到限制，然后阻止后续更新，直到窗口重置。与节流或防抖不同，它不尝试对更新进行间隔或智能合并。这可能导致快速更新的爆发，随后是无更新的时期。
速率限制器支持两种类型的窗口
- 'fixed': 一个严格的窗口，在窗口期结束后重置。窗口内的所有更新都计入限制，并且窗口在期结束后完全重置。
- 'sliding': 一个滚动窗口，允许在旧更新到期时进行更新。这提供了更一致的更新速率。
为了更平滑的更新模式，请考虑使用
- useThrottledValue: 当您希望更新之间有持续的间隔时（例如 UI 更改）
- useDebouncedValue: 当您想将快速更新合并为一次更新时（例如搜索输入框）
速率限制主要用于需要强制执行严格限制的情况，例如 API 速率限制。
该 hook 返回一个元组，包含：
- 根据配置的速率限制进行更新的限速值
- 具有控制方法的限速器实例
为了在不使用 React 状态管理的情况下直接控制限速行为，可以考虑使用更底层的 useRateLimiter Hook。
状态管理和选择器
该 Hook 使用 TanStack Store 通过底层的限速器实例进行响应式状态管理。 `selector` 参数允许您指定哪些限速器状态的更改会触发重新渲染，通过防止不必要的重新渲染来优化性能。
默认情况下，不会进行响应式状态订阅，您必须通过提供一个 selector 函数来选择加入状态跟踪。这可以防止不必要的重新渲染，并让您完全控制组件何时更新。只有在提供 selector 时，组件才会在所选状态值发生变化时重新渲染。
可用的速率限制器状态属性
- executionCount: 已完成的函数执行次数
- executionTimes：执行发生的时间戳数组，用于速率限制计算。
- rejectionCount：由于速率限制而被拒绝的函数执行次数。
类型参数
• TValue
• TSelected = RateLimiterState
参数
value
TValue
options
RateLimiterOptions<Dispatch<SetStateAction<TValue>>>
选择器?
(state) => TSelected
Returns (返回)
[TValue, ReactRateLimiter<Dispatch<SetStateAction<TValue>>, TSelected>]
示例
tsx
// Default behavior - no reactive state subscriptions
const [rateLimitedValue, rateLimiter] = useRateLimitedValue(rawValue, {
limit: 5,
window: 60000,
windowType: 'sliding'
});
// Opt-in to re-render when execution count changes (optimized for tracking successful updates)
const [rateLimitedValue, rateLimiter] = useRateLimitedValue(
rawValue,
{ limit: 5, window: 60000, windowType: 'sliding' },
(state) => ({ executionCount: state.executionCount })
);
// Opt-in to re-render when rejection count changes (optimized for tracking rate limit violations)
const [rateLimitedValue, rateLimiter] = useRateLimitedValue(
rawValue,
{ limit: 5, window: 60000, windowType: 'sliding' },
(state) => ({ rejectionCount: state.rejectionCount })
);
// Opt-in to re-render when execution times change (optimized for window calculations)
const [rateLimitedValue, rateLimiter] = useRateLimitedValue(
rawValue,
{ limit: 5, window: 60000, windowType: 'sliding' },
(state) => ({ executionTimes: state.executionTimes })
);
// With rejection callback and fixed window
const [rateLimitedValue, rateLimiter] = useRateLimitedValue(rawValue, {
limit: 3,
window: 5000,
windowType: 'fixed',
onReject: (rateLimiter) => {
console.log(`Update rejected. Try again in ${rateLimiter.getMsUntilNextWindow()}ms`);
}
});
// Access the selected rate limiter state (will be empty object {} unless selector provided)
const { executionCount, rejectionCount } = rateLimiter.state;
// Default behavior - no reactive state subscriptions
const [rateLimitedValue, rateLimiter] = useRateLimitedValue(rawValue, {
limit: 5,
window: 60000,
windowType: 'sliding'
});
// Opt-in to re-render when execution count changes (optimized for tracking successful updates)
const [rateLimitedValue, rateLimiter] = useRateLimitedValue(
rawValue,
{ limit: 5, window: 60000, windowType: 'sliding' },
(state) => ({ executionCount: state.executionCount })
);
// Opt-in to re-render when rejection count changes (optimized for tracking rate limit violations)
const [rateLimitedValue, rateLimiter] = useRateLimitedValue(
rawValue,
{ limit: 5, window: 60000, windowType: 'sliding' },
(state) => ({ rejectionCount: state.rejectionCount })
);
// Opt-in to re-render when execution times change (optimized for window calculations)
const [rateLimitedValue, rateLimiter] = useRateLimitedValue(
rawValue,
{ limit: 5, window: 60000, windowType: 'sliding' },
(state) => ({ executionTimes: state.executionTimes })
);
// With rejection callback and fixed window
const [rateLimitedValue, rateLimiter] = useRateLimitedValue(rawValue, {
limit: 3,
window: 5000,
windowType: 'fixed',
onReject: (rateLimiter) => {
console.log(`Update rejected. Try again in ${rateLimiter.getMsUntilNextWindow()}ms`);
}
});
// Access the selected rate limiter state (will be empty object {} unless selector provided)
const { executionCount, rejectionCount } = rateLimiter.state;
我们的合作伙伴
订阅 Bytes
您的每周 JavaScript 资讯。每周一免费发送给超过 10 万开发者。
订阅 Bytes
您的每周 JavaScript 资讯。每周一免费发送给超过 10 万开发者。