使用节流值
函数: useThrottledValue()
function useThrottledValue<TValue, TSelected>(
value,
options,
selector?): [TValue, ReactThrottler<Dispatch<SetStateAction<TValue>>, TSelected>]
function useThrottledValue<TValue, TSelected>(
value,
options,
selector?): [TValue, ReactThrottler<Dispatch<SetStateAction<TValue>>, TSelected>]
定义于: react-pacer/src/throttler/useThrottledValue.ts:85
一个高级 React hook，用于创建值的节流版本，该值在指定的时间窗口内最多更新一次。此 hook 内部使用 React 的 useState 来管理节流状态。
节流确保值更新以受控速率发生，而不管输入值更改的频率如何。这对于限制依赖于快速变化值的昂贵重新渲染或 API 调用非常有用。
该 hook 返回一个元组，包含：
- 节流值，根据选项中指定的领先/滞后边缘行为进行更新
- 具有控制方法的节流器实例
为了在没有 React 状态管理的情况下更直接地控制节流行为，请考虑改用更低级别的 useThrottler hook。
状态管理和选择器
该 hook 使用 TanStack Store 通过底层节流器实例进行响应式状态管理。`selector` 参数允许您指定哪些节流器状态更改将触发重新渲染，通过防止不相关的状态更改发生不必要的重新渲染来优化性能。
默认情况下，将没有响应式状态订阅，您必须通过提供 `selector` 函数来选择加入状态跟踪。这可以防止不必要的重新渲染，并让您完全控制组件何时更新。只有当您提供 `selector` 时，组件才会随着选定状态值的变化而重新渲染。
可用的节流器状态属性
- executionCount: 已完成的函数执行次数
- lastArgs: Последний вызов maybeExecute 的参数
- lastExecutionTime：函数最后执行时间的戳（毫秒）
- nextExecutionTime：下次可以执行的时间戳（毫秒）
- isPending：节流器是否正在等待超时触发执行
- status: 当前执行状态（“disabled” | “idle” | “pending”）
类型参数
• TValue
• TSelected = ThrottlerState<Dispatch<SetStateAction<TValue>>>
参数
value
TValue
options
ThrottlerOptions<Dispatch<SetStateAction<TValue>>>
选择器?
(state) => TSelected
Returns (返回)
[TValue, ReactThrottler<Dispatch<SetStateAction<TValue>>, TSelected>]
示例
// Default behavior - no reactive state subscriptions
const [throttledValue, throttler] = useThrottledValue(rawValue, { wait: 1000 });
// Opt-in to re-render when execution count changes (optimized for tracking executions)
const [throttledValue, throttler] = useThrottledValue(
rawValue,
{ wait: 1000 },
(state) => ({ executionCount: state.executionCount })
);
// Opt-in to re-render when throttling state changes (optimized for loading indicators)
const [throttledValue, throttler] = useThrottledValue(
rawValue,
{ wait: 1000 },
(state) => ({
isPending: state.isPending,
status: state.status
})
);
// Opt-in to re-render when timing information changes (optimized for timing displays)
const [throttledValue, throttler] = useThrottledValue(
rawValue,
{ wait: 1000 },
(state) => ({
lastExecutionTime: state.lastExecutionTime,
nextExecutionTime: state.nextExecutionTime
})
);
// With custom leading/trailing behavior
const [throttledValue, throttler] = useThrottledValue(rawValue, {
wait: 1000,
leading: true, // Update immediately on first change
trailing: false // Skip trailing edge updates
});
// Access the selected throttler state (will be empty object {} unless selector provided)
const { executionCount, isPending } = throttler.state;
// Default behavior - no reactive state subscriptions
const [throttledValue, throttler] = useThrottledValue(rawValue, { wait: 1000 });
// Opt-in to re-render when execution count changes (optimized for tracking executions)
const [throttledValue, throttler] = useThrottledValue(
rawValue,
{ wait: 1000 },
(state) => ({ executionCount: state.executionCount })
);
// Opt-in to re-render when throttling state changes (optimized for loading indicators)
const [throttledValue, throttler] = useThrottledValue(
rawValue,
{ wait: 1000 },
(state) => ({
isPending: state.isPending,
status: state.status
})
);
// Opt-in to re-render when timing information changes (optimized for timing displays)
const [throttledValue, throttler] = useThrottledValue(
rawValue,
{ wait: 1000 },
(state) => ({
lastExecutionTime: state.lastExecutionTime,
nextExecutionTime: state.nextExecutionTime
})
);
// With custom leading/trailing behavior
const [throttledValue, throttler] = useThrottledValue(rawValue, {
wait: 1000,
leading: true, // Update immediately on first change
trailing: false // Skip trailing edge updates
});
// Access the selected throttler state (will be empty object {} unless selector provided)
const { executionCount, isPending } = throttler.state;
订阅 Bytes
您的每周 JavaScript 资讯。每周一免费发送给超过 10 万开发者。
订阅 Bytes
您的每周 JavaScript 资讯。每周一免费发送给超过 10 万开发者。