useThrottledValue

函数：useThrottledValue()

function useThrottledValue<TValue>(value, options): [TValue, Throttler<Dispatch<SetStateAction<TValue>>>]

function useThrottledValue<TValue>(value, options): [TValue, Throttler<Dispatch<SetStateAction<TValue>>>]

定义于：react-pacer/src/throttler/useThrottledValue.ts:32

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

节流确保值更新以受控的速率发生，无论输入值更改的频率如何。这对于限制依赖于快速变化值的昂贵重新渲染或 API 调用的速率非常有用。

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

根据选项中指定的前导/后导边缘行为更新的节流值
具有控制方法的节流器实例

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

类型参数

• TValue

参数

value

TValue

options

ThrottlerOptions<Dispatch<SetStateAction<TValue>>>

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

示例

tsx

// 基本节流 - 每秒最多更新一次
const [throttledValue, throttler] = useThrottledValue(rawValue, { wait: 1000 });

// 具有自定义前导/后导行为
const [throttledValue, throttler] = useThrottledValue(rawValue, {
  wait: 1000,
  leading: true,   // 首次更改时立即更新
  trailing: false  // 跳过尾随边缘更新
});

// 基本节流 - 每秒最多更新一次
const [throttledValue, throttler] = useThrottledValue(rawValue, { wait: 1000 });

// 具有自定义前导/后导行为
const [throttledValue, throttler] = useThrottledValue(rawValue, {
  wait: 1000,
  leading: true,   // 首次更改时立即更新
  trailing: false  // 跳过尾随边缘更新
});