使用节流状态
函数：useThrottledState()
function useThrottledState<TValue, TSelected>(
value,
options,
selector?): [TValue, Dispatch<SetStateAction<TValue>>, ReactThrottler<Dispatch<SetStateAction<TValue>>, TSelected>]
function useThrottledState<TValue, TSelected>(
value,
options,
selector?): [TValue, Dispatch<SetStateAction<TValue>>, ReactThrottler<Dispatch<SetStateAction<TValue>>, TSelected>]
定义于：react-pacer/src/throttler/useThrottledState.ts:93
一个 React hook，它创建一个节流（throttled）的状态值，该值在指定的事件窗口内最多更新一次。该 hook 结合了 React 的 useState 和节流功能，以提供受控的状态更新。
节流确保状态更新以可控的速率发生，无论设置器被调用多少次。这对于限制频繁状态更改带来的昂贵重渲染或依赖于快速变化状态的操作非常有用。
该 hook 返回一个元组，包含：
- 节流后的状态值
- 一个遵循配置的等待时间的节流设置函数
- 用于进一步控制的节流器实例
如果需要对节流进行更直接的控制而无需状态管理，请考虑使用更底层的 useThrottler hook。
状态管理和选择器
该 hook 使用 TanStack Store 通过底层的节流器实例进行响应式状态管理。`selector` 参数允许您指定哪些节流器状态更改将触发重新渲染，通过防止不必要地重新渲染来优化性能，尤其是在发生无关紧要的状态更改时。 仅当您提供 `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, Dispatch<SetStateAction<TValue>>, ReactThrottler<Dispatch<SetStateAction<TValue>>, TSelected>]
示例
// Default behavior - no reactive state subscriptions
const [value, setValue, throttler] = useThrottledState(0, { wait: 1000 });
// Opt-in to re-render when execution count changes (optimized for tracking executions)
const [value, setValue, throttler] = useThrottledState(
0,
{ wait: 1000 },
(state) => ({ executionCount: state.executionCount })
);
// Opt-in to re-render when throttling state changes (optimized for loading indicators)
const [value, setValue, throttler] = useThrottledState(
0,
{ 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, throttler] = useThrottledState(
0,
{ wait: 1000 },
(state) => ({
lastExecutionTime: state.lastExecutionTime,
nextExecutionTime: state.nextExecutionTime
})
);
// With custom leading/trailing behavior
const [value, setValue] = useThrottledState(0, {
wait: 1000,
leading: true, // Update immediately on first change
trailing: false // Skip trailing edge updates
});
// Access throttler methods if needed
const handleReset = () => {
setValue(0);
throttler.cancel(); // Cancel any pending 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 [value, setValue, throttler] = useThrottledState(0, { wait: 1000 });
// Opt-in to re-render when execution count changes (optimized for tracking executions)
const [value, setValue, throttler] = useThrottledState(
0,
{ wait: 1000 },
(state) => ({ executionCount: state.executionCount })
);
// Opt-in to re-render when throttling state changes (optimized for loading indicators)
const [value, setValue, throttler] = useThrottledState(
0,
{ 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, throttler] = useThrottledState(
0,
{ wait: 1000 },
(state) => ({
lastExecutionTime: state.lastExecutionTime,
nextExecutionTime: state.nextExecutionTime
})
);
// With custom leading/trailing behavior
const [value, setValue] = useThrottledState(0, {
wait: 1000,
leading: true, // Update immediately on first change
trailing: false // Skip trailing edge updates
});
// Access throttler methods if needed
const handleReset = () => {
setValue(0);
throttler.cancel(); // Cancel any pending updates
};
// Access the selected throttler state (will be empty object {} unless selector provided)
const { executionCount, isPending } = throttler.state;
订阅 Bytes
您的每周 JavaScript 资讯。每周一免费发送给超过 10 万开发者。
订阅 Bytes
您的每周 JavaScript 资讯。每周一免费发送给超过 10 万开发者。