使用节流器
函数: useThrottler()
ts
function useThrottler<TFn, TSelected>(
fn,
options,
selector): ReactThrottler<TFn, TSelected>
function useThrottler<TFn, TSelected>(
fn,
options,
selector): ReactThrottler<TFn, TSelected>
定义于: react-pacer/src/throttler/useThrottler.ts:107
一个低级 React hook，用于创建一个 Throttler 实例，该实例限制了提供函数的执行频率。
此 hook 设计灵活且与状态管理无关 - 它仅返回一个 throttler 实例，您可以将其集成到任何状态管理解决方案中（useState, Redux, Zustand, Jotai 等）。有关更简单、更高级别的 hook，它直接与 React 的 useState 集成，请参阅 useThrottledState。
节流确保一个函数在指定的窗口时间内最多执行一次，无论它被调用多少次。这对于限制昂贵操作或 UI 更新的速率非常有用。
状态管理和选择器
此 hook 使用 TanStack Store 进行响应式状态管理。 selector 参数允许您指定哪些状态更改将触发重新渲染，通过防止不必要的重新渲染来优化性能，当不相关的状态发生变化时，可以避免不必要的重新渲染。
默认情况下，不会进行任何响应式状态订阅，您必须通过提供 selector 函数来选择启用状态跟踪。这可以防止不必要的重新渲染，并让您完全控制组件何时更新。只有在提供 selector 时，组件才会根据所选状态值的变化而重新渲染。
可用的状态属性
- executionCount: 已完成的函数执行次数
- lastArgs: Последний вызов maybeExecute 的参数
- lastExecutionTime：函数最后执行时间的戳（毫秒）
- nextExecutionTime：下次可以执行的时间戳（毫秒）
- isPending：节流器是否正在等待超时触发执行
- status: 当前执行状态（“disabled” | “idle” | “pending”）
类型参数
• TFn extends AnyFunction
• TSelected = {}
参数
fn
TFn
options
ThrottlerOptions<TFn>
选择器
(state) => TSelected
Returns (返回)
ReactThrottler<TFn, TSelected>
示例
tsx
// Default behavior - no reactive state subscriptions
const [value, setValue] = useState(0);
const throttler = useThrottler(setValue, { wait: 1000 });
// Opt-in to re-render when execution count changes (optimized for tracking executions)
const [value, setValue] = useState(0);
const throttler = useThrottler(
setValue,
{ wait: 1000 },
(state) => ({ executionCount: state.executionCount })
);
// Opt-in to re-render when throttling state changes (optimized for loading indicators)
const [value, setValue] = useState(0);
const throttler = useThrottler(
setValue,
{ wait: 1000 },
(state) => ({
isPending: state.isPending,
status: state.status
})
);
// Opt-in to re-render when timing information changes (optimized for timing displays)
const [value, setValue] = useState(0);
const throttler = useThrottler(
setValue,
{ wait: 1000 },
(state) => ({
lastExecutionTime: state.lastExecutionTime,
nextExecutionTime: state.nextExecutionTime
})
);
// With any state manager
const throttler = useThrottler(
(value) => stateManager.setState(value),
{
wait: 2000,
leading: true, // Execute immediately on first call
trailing: false // Skip trailing edge updates
}
);
// Access the selected state (will be empty object {} unless selector provided)
const { executionCount, isPending } = throttler.state;
// Default behavior - no reactive state subscriptions
const [value, setValue] = useState(0);
const throttler = useThrottler(setValue, { wait: 1000 });
// Opt-in to re-render when execution count changes (optimized for tracking executions)
const [value, setValue] = useState(0);
const throttler = useThrottler(
setValue,
{ wait: 1000 },
(state) => ({ executionCount: state.executionCount })
);
// Opt-in to re-render when throttling state changes (optimized for loading indicators)
const [value, setValue] = useState(0);
const throttler = useThrottler(
setValue,
{ wait: 1000 },
(state) => ({
isPending: state.isPending,
status: state.status
})
);
// Opt-in to re-render when timing information changes (optimized for timing displays)
const [value, setValue] = useState(0);
const throttler = useThrottler(
setValue,
{ wait: 1000 },
(state) => ({
lastExecutionTime: state.lastExecutionTime,
nextExecutionTime: state.nextExecutionTime
})
);
// With any state manager
const throttler = useThrottler(
(value) => stateManager.setState(value),
{
wait: 2000,
leading: true, // Execute immediately on first call
trailing: false // Skip trailing edge updates
}
);
// Access the selected state (will be empty object {} unless selector provided)
const { executionCount, isPending } = throttler.state;
我们的合作伙伴
订阅 Bytes
您的每周 JavaScript 资讯。每周一免费发送给超过 10 万开发者。
订阅 Bytes
您的每周 JavaScript 资讯。每周一免费发送给超过 10 万开发者。