使用排队状态
函数: useQueuedState()
ts
function useQueuedState<TValue, TSelected>(
fn,
options,
selector?): [TValue[], (item, position?, runOnItemsChange?) => boolean, ReactQueuer<TValue, TSelected>]
function useQueuedState<TValue, TSelected>(
fn,
options,
selector?): [TValue[], (item, position?, runOnItemsChange?) => boolean, ReactQueuer<TValue, TSelected>]
定义于: react-pacer/src/queuer/useQueuedState.ts:119
一个 React hook，用于创建带有托管状态的队列，将 React 的 useState 与排队功能相结合。此 hook 同时提供当前的队列状态和队列控制方法。
每当向队列添加、移除或重新排序项目时，队列状态会自动更新。所有队列操作都将反映在 hook 返回的状态数组中。
队列可以启动和停止，以在指定的时间间隔内自动处理项目，这使其可用作调度器。启动后，它将每个 tick 处理一个项目，并在 tick 之间可选等待时间。
该 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">
参数
fn
(item) => void
options
QueuerOptions<TValue> = {}
选择器?
(state) => TSelected
Returns (返回)
[TValue[], (item, position?, runOnItemsChange?) => boolean, ReactQueuer<TValue, TSelected>]
示例
tsx
// Default behavior - no reactive state subscriptions
const [items, addItem, queue] = useQueuedState(
(item) => console.log('Processing:', item),
{
initialItems: ['item1', 'item2'],
started: true,
wait: 1000,
getPriority: (item) => item.priority
}
);
// Opt-in to re-render when queue contents change (optimized for displaying queue items)
const [items, addItem, queue] = useQueuedState(
(item) => console.log('Processing:', item),
{ started: true, wait: 1000 },
(state) => ({
items: state.items,
size: state.size,
isEmpty: state.isEmpty
})
);
// Opt-in to re-render when processing state changes (optimized for loading indicators)
const [items, addItem, queue] = useQueuedState(
(item) => console.log('Processing:', item),
{ started: true, wait: 1000 },
(state) => ({
isRunning: state.isRunning,
isIdle: state.isIdle,
status: state.status,
pendingTick: state.pendingTick
})
);
// Opt-in to re-render when execution metrics change (optimized for stats display)
const [items, addItem, queue] = useQueuedState(
(item) => console.log('Processing:', item),
{ started: true, wait: 1000 },
(state) => ({
executionCount: state.executionCount,
expirationCount: state.expirationCount,
rejectionCount: state.rejectionCount
})
);
// Add items to queue
const handleAdd = (item) => {
addItem(item);
};
// Start automatic processing
const startProcessing = () => {
queue.start();
};
// Stop automatic processing
const stopProcessing = () => {
queue.stop();
};
// Manual processing still available
const handleProcess = () => {
const nextItem = queue.getNextItem();
if (nextItem) {
processItem(nextItem);
}
};
// Access the selected queuer state (will be empty object {} unless selector provided)
const { size, isRunning, executionCount } = queue.state;
// Default behavior - no reactive state subscriptions
const [items, addItem, queue] = useQueuedState(
(item) => console.log('Processing:', item),
{
initialItems: ['item1', 'item2'],
started: true,
wait: 1000,
getPriority: (item) => item.priority
}
);
// Opt-in to re-render when queue contents change (optimized for displaying queue items)
const [items, addItem, queue] = useQueuedState(
(item) => console.log('Processing:', item),
{ started: true, wait: 1000 },
(state) => ({
items: state.items,
size: state.size,
isEmpty: state.isEmpty
})
);
// Opt-in to re-render when processing state changes (optimized for loading indicators)
const [items, addItem, queue] = useQueuedState(
(item) => console.log('Processing:', item),
{ started: true, wait: 1000 },
(state) => ({
isRunning: state.isRunning,
isIdle: state.isIdle,
status: state.status,
pendingTick: state.pendingTick
})
);
// Opt-in to re-render when execution metrics change (optimized for stats display)
const [items, addItem, queue] = useQueuedState(
(item) => console.log('Processing:', item),
{ started: true, wait: 1000 },
(state) => ({
executionCount: state.executionCount,
expirationCount: state.expirationCount,
rejectionCount: state.rejectionCount
})
);
// Add items to queue
const handleAdd = (item) => {
addItem(item);
};
// Start automatic processing
const startProcessing = () => {
queue.start();
};
// Stop automatic processing
const stopProcessing = () => {
queue.stop();
};
// Manual processing still available
const handleProcess = () => {
const nextItem = queue.getNextItem();
if (nextItem) {
processItem(nextItem);
}
};
// Access the selected queuer state (will be empty object {} unless selector provided)
const { size, isRunning, executionCount } = queue.state;
我们的合作伙伴
订阅 Bytes
您的每周 JavaScript 资讯。每周一免费发送给超过 10 万开发者。
订阅 Bytes
您的每周 JavaScript 资讯。每周一免费发送给超过 10 万开发者。