使用排队值
函数: useQueuedValue()
ts
function useQueuedValue<TValue, TSelected>(
initialValue,
options,
selector?): [TValue, ReactQueuer<TValue, TSelected>]
function useQueuedValue<TValue, TSelected>(
initialValue,
options,
selector?): [TValue, ReactQueuer<TValue, TSelected>]
定义于: react-pacer/src/queuer/useQueuedValue.ts:103
一个 React Hook，用于创建一个队列值，该值按顺序处理状态更改，并可选择延迟。此 Hook 内部使用 useQueuer 来管理状态更改队列并按顺序应用它们。
队列值将按接收顺序处理更改，并且在处理每次更改之间可选择延迟。这对于处理需要按特定顺序处理的状态更新非常有用，例如动画或连续的 UI 更新。
该 hook 返回一个元组，包含：
- 当前的队列值
- 具有控制方法的队列实例
状态管理和选择器
该 Hook 使用 TanStack Store 通过底层的队列实例进行响应式状态管理。`selector` 参数允许您指定哪些队列状态更改将触发重新渲染，通过防止不相关的状态更改发生不必要的重新渲染来优化性能。
默认情况下，不会进行响应式状态订阅，您必须通过提供 `selector` 函数来选择加入状态跟踪。这可以防止不必要的重新渲染，并让您完全控制组件何时更新。只有当您提供 `selector` 时，组件才会在选定的状态值更改时重新渲染。
可用的队列状态属性
- executionCount：由 queuer 处理的项目数
- expirationCount：因过期而移除的项目数量
- isEmpty：Queuer 是否没有要处理的项目
- isFull：queuer 是否已达到最大容量
- isIdle：queuer 当前是否未处理任何项目
- isRunning：queuer 是否处于活动状态并会自动处理项目
- items：当前等待处理的项目数组
- itemTimestamps：添加项目以进行过期跟踪的时间戳
- pendingTick：queuer 是否有待处理的下一项处理超时
- rejectionCount：被拒绝添加的项目数量
- size：当前队列中的项目数
- status：当前处理状态（“idle” | “running” | “stopped”）
类型参数
• TValue
• TSelected 扩展 Pick<QueuerState<TValue>, "items"> = Pick<QueuerState<TValue>, "items">
参数
initialValue
TValue
options
QueuerOptions<TValue> = {}
选择器?
(state) => TSelected
Returns (返回)
[TValue, ReactQueuer<TValue, TSelected>]
示例
tsx
// Default behavior - no reactive state subscriptions
const [value, queuer] = useQueuedValue(initialValue, {
wait: 500, // Wait 500ms between processing each change
started: true // Start processing immediately
});
// Opt-in to re-render when queue processing state changes (optimized for loading indicators)
const [value, queuer] = useQueuedValue(
initialValue,
{ wait: 500, started: true },
(state) => ({
isRunning: state.isRunning,
isIdle: state.isIdle,
status: state.status,
pendingTick: state.pendingTick
})
);
// Opt-in to re-render when queue contents change (optimized for displaying queue status)
const [value, queuer] = useQueuedValue(
initialValue,
{ wait: 500, started: true },
(state) => ({
size: state.size,
isEmpty: state.isEmpty,
isFull: state.isFull
})
);
// Opt-in to re-render when execution metrics change (optimized for stats display)
const [value, queuer] = useQueuedValue(
initialValue,
{ wait: 500, started: true },
(state) => ({
executionCount: state.executionCount,
expirationCount: state.expirationCount,
rejectionCount: state.rejectionCount
})
);
// Add changes to the queue
const handleChange = (newValue) => {
queuer.addItem(newValue);
};
// Control the queue
const pauseProcessing = () => {
queuer.stop();
};
const resumeProcessing = () => {
queuer.start();
};
// Access the selected queuer state (will be empty object {} unless selector provided)
const { size, isRunning, executionCount } = queuer.state;
// Default behavior - no reactive state subscriptions
const [value, queuer] = useQueuedValue(initialValue, {
wait: 500, // Wait 500ms between processing each change
started: true // Start processing immediately
});
// Opt-in to re-render when queue processing state changes (optimized for loading indicators)
const [value, queuer] = useQueuedValue(
initialValue,
{ wait: 500, started: true },
(state) => ({
isRunning: state.isRunning,
isIdle: state.isIdle,
status: state.status,
pendingTick: state.pendingTick
})
);
// Opt-in to re-render when queue contents change (optimized for displaying queue status)
const [value, queuer] = useQueuedValue(
initialValue,
{ wait: 500, started: true },
(state) => ({
size: state.size,
isEmpty: state.isEmpty,
isFull: state.isFull
})
);
// Opt-in to re-render when execution metrics change (optimized for stats display)
const [value, queuer] = useQueuedValue(
initialValue,
{ wait: 500, started: true },
(state) => ({
executionCount: state.executionCount,
expirationCount: state.expirationCount,
rejectionCount: state.rejectionCount
})
);
// Add changes to the queue
const handleChange = (newValue) => {
queuer.addItem(newValue);
};
// Control the queue
const pauseProcessing = () => {
queuer.stop();
};
const resumeProcessing = () => {
queuer.start();
};
// Access the selected queuer state (will be empty object {} unless selector provided)
const { size, isRunning, executionCount } = queuer.state;
我们的合作伙伴
订阅 Bytes
您的每周 JavaScript 资讯。每周一免费发送给超过 10 万开发者。
订阅 Bytes
您的每周 JavaScript 资讯。每周一免费发送给超过 10 万开发者。