useRateLimitedValue

函数：useRateLimitedValue()

function useRateLimitedValue<TValue>(value, options): [TValue, RateLimiter<Dispatch<SetStateAction<TValue>>>]

function useRateLimitedValue<TValue>(value, options): [TValue, RateLimiter<Dispatch<SetStateAction<TValue>>>]

定义于：react-pacer/src/rate-limiter/useRateLimitedValue.ts:55

一个高级别的 React 钩子，用于创建值的速率限制版本，该值在时间窗口内最多更新特定次数。此钩子在内部使用 React 的 useState 来管理速率限制状态。

速率限制是一种简单的“硬限制”方法——它允许所有更新，直到达到限制，然后阻止后续更新，直到窗口重置。与节流或防抖不同，它不会尝试隔开或智能地折叠更新。这可能导致快速更新的爆发，然后是一段没有更新的时期。

速率限制器支持两种类型的窗口：

'fixed'：一个严格的窗口，在窗口期过后重置。窗口内的所有更新都计入限制，并且窗口在期满后完全重置。
'sliding'：一个滚动窗口，允许随着旧更新的过期而更新。这提供了一个更随时间推移更一致的更新速率。

对于更平滑的更新模式，请考虑：

useThrottledValue：当您希望更新之间具有一致的间距时（例如 UI 更改）
useDebouncedValue：当您想要将快速更新折叠为单个更新时（例如搜索输入）

速率限��主要应用于需要强制执行严格限制的情况，例如 API 速率限制。

该钩子返回一个包含以下内容的元组：

根据配置的速率限制更新的速率限制值
具有控制方法的速率限制器实例

要更直接地控制速率限制行为而不进行 React 状态管理，请考虑改用较低级别的 useRateLimiter 钩子。

类型参数

• TValue

参数

value

TValue

options

RateLimiterOptions<Dispatch<SetStateAction<TValue>>>

[TValue, RateLimiter<Dispatch<SetStateAction<TValue>>>]

示例

tsx

// 基本速率限制 - 滑动窗口内每分钟最多更新 5 次
const [rateLimitedValue, rateLimiter] = useRateLimitedValue(rawValue, {
  limit: 5,
  window: 60000,
  windowType: 'sliding'
});

// 带有拒绝回调和固定窗口
const [rateLimitedValue, rateLimiter] = useRateLimitedValue(rawValue, {
  limit: 3,
  window: 5000,
  windowType: 'fixed',
  onReject: (rateLimiter) => {
    console.log(`更新已拒绝。请在 ${rateLimiter.getMsUntilNextWindow()} 毫秒后重试`);
  }
});

// 基本速率限制 - 滑动窗口内每分钟最多更新 5 次
const [rateLimitedValue, rateLimiter] = useRateLimitedValue(rawValue, {
  limit: 5,
  window: 60000,
  windowType: 'sliding'
});

// 带有拒绝回调和固定窗口
const [rateLimitedValue, rateLimiter] = useRateLimitedValue(rawValue, {
  limit: 3,
  window: 5000,
  windowType: 'fixed',
  onReject: (rateLimiter) => {
    console.log(`更新已拒绝。请在 ${rateLimiter.getMsUntilNextWindow()} 毫秒后重试`);
  }
});