使用异步排队状态
函数: useAsyncQueuedState()
ts
function useAsyncQueuedState<TValue, TSelected>(
fn,
options,
selector?): [TValue[], ReactAsyncQueuer<TValue, TSelected>]
function useAsyncQueuedState<TValue, TSelected>(
fn,
options,
selector?): [TValue[], ReactAsyncQueuer<TValue, TSelected>]
定义于: react-pacer/src/async-queuer/useAsyncQueuedState.ts:151
一个更高级别的 React Hook，它创建一个内置状态管理的 AsyncQueuer 实例。
此 Hook 将 AsyncQueuer 与 React 状态相结合，以自动跟踪队列项。它返回一个元组，包含
- 作为 React 状态的当前队列项数组
- 用于控制队列的方法的 queuer 实例
队列可以配置为
- 最大并发操作数
- 最大队列大小
- 队列项的处理函数
- 各种生命周期回调
每当项被
- 添加到队列
- 从队列中移除
- 开始处理
- 处理完成
状态管理和选择器
时，状态将自动更新。此 Hook 使用 TanStack Store 通过底层的 async queuer 实例进行响应式状态管理。 selector 参数允许您指定哪些 async queuer 状态更改会触发重新渲染，通过防止不相关的状态更改导致的不必要重新渲染来优化性能。
默认情况下，将不会进行响应式状态订阅，您必须通过提供 selector 函数来选择加入状态跟踪。这可以防止不必要的重新渲染，并让您完全控制组件何时更新。只有当您提供 selector 时，组件才会在我选定的状态值更改时重新渲染。
可用的 async queuer 状态属性
- activeItems：当前由 queuer 处理的项
- errorCount：导致错误的任务执行次数
- expirationCount：因过期而移除的项目数量
- isEmpty：Queuer 是否没有要处理的项目
- isFull：queuer 是否已达到最大容量
- isIdle：queuer 当前是否未处理任何项目
- isRunning：queuer 是否处于活动状态并会自动处理项目
- items：当前等待处理的项目数组
- itemTimestamps：添加项目以进行过期跟踪的时间戳
- lastResult：最近一次任务执行的结果
- pendingTick：queuer 是否有待处理的下一项处理超时
- rejectionCount：被拒绝添加的项目数量
- settledCount：已完成（成功或错误）的任务执行次数
- size：当前队列中的项目数
- status：当前处理状态（“idle” | “running” | “stopped”）
- successCount：成功完成的任务执行次数
类型参数
• TValue
• TSelected extends Pick<AsyncQueuerState<TValue>, "items"> = Pick<AsyncQueuerState<TValue>, "items">
参数
fn
(value) => Promise<any>
options
AsyncQueuerOptions<TValue> = {}
选择器?
(state) => TSelected
Returns (返回)
[TValue[], ReactAsyncQueuer<TValue, TSelected>]
示例
tsx
// Default behavior - no reactive state subscriptions
const [queueItems, asyncQueuer] = useAsyncQueuedState(
async (item) => {
const result = await processItem(item);
return result;
},
{
concurrency: 2,
maxSize: 100,
started: true
}
);
// Opt-in to re-render when queue contents change (optimized for displaying queue items)
const [queueItems, asyncQueuer] = useAsyncQueuedState(
async (item) => {
const result = await processItem(item);
return result;
},
{ concurrency: 2, maxSize: 100, started: true },
(state) => ({
items: state.items,
size: state.size,
isEmpty: state.isEmpty,
isFull: state.isFull
})
);
// Opt-in to re-render when processing state changes (optimized for loading indicators)
const [queueItems, asyncQueuer] = useAsyncQueuedState(
async (item) => {
const result = await processItem(item);
return result;
},
{ concurrency: 2, maxSize: 100, started: true },
(state) => ({
isRunning: state.isRunning,
isIdle: state.isIdle,
status: state.status,
activeItems: state.activeItems,
pendingTick: state.pendingTick
})
);
// Opt-in to re-render when execution metrics change (optimized for stats display)
const [queueItems, asyncQueuer] = useAsyncQueuedState(
async (item) => {
const result = await processItem(item);
return result;
},
{ concurrency: 2, maxSize: 100, started: true },
(state) => ({
successCount: state.successCount,
errorCount: state.errorCount,
settledCount: state.settledCount,
expirationCount: state.expirationCount,
rejectionCount: state.rejectionCount
})
);
// Opt-in to re-render when results are available (optimized for data display)
const [queueItems, asyncQueuer] = useAsyncQueuedState(
async (item) => {
const result = await processItem(item);
return result;
},
{ concurrency: 2, maxSize: 100, started: true },
(state) => ({
lastResult: state.lastResult,
successCount: state.successCount
})
);
// Add items to queue - state updates automatically
asyncQueuer.addItem(async () => {
const result = await fetchData();
return result;
});
// Start processing
asyncQueuer.start();
// Stop processing
asyncQueuer.stop();
// queueItems reflects current queue state
const pendingCount = asyncQueuer.peekPendingItems().length;
// Access the selected async queuer state (will be empty object {} unless selector provided)
const { size, isRunning, activeItems } = asyncQueuer.state;
// Default behavior - no reactive state subscriptions
const [queueItems, asyncQueuer] = useAsyncQueuedState(
async (item) => {
const result = await processItem(item);
return result;
},
{
concurrency: 2,
maxSize: 100,
started: true
}
);
// Opt-in to re-render when queue contents change (optimized for displaying queue items)
const [queueItems, asyncQueuer] = useAsyncQueuedState(
async (item) => {
const result = await processItem(item);
return result;
},
{ concurrency: 2, maxSize: 100, started: true },
(state) => ({
items: state.items,
size: state.size,
isEmpty: state.isEmpty,
isFull: state.isFull
})
);
// Opt-in to re-render when processing state changes (optimized for loading indicators)
const [queueItems, asyncQueuer] = useAsyncQueuedState(
async (item) => {
const result = await processItem(item);
return result;
},
{ concurrency: 2, maxSize: 100, started: true },
(state) => ({
isRunning: state.isRunning,
isIdle: state.isIdle,
status: state.status,
activeItems: state.activeItems,
pendingTick: state.pendingTick
})
);
// Opt-in to re-render when execution metrics change (optimized for stats display)
const [queueItems, asyncQueuer] = useAsyncQueuedState(
async (item) => {
const result = await processItem(item);
return result;
},
{ concurrency: 2, maxSize: 100, started: true },
(state) => ({
successCount: state.successCount,
errorCount: state.errorCount,
settledCount: state.settledCount,
expirationCount: state.expirationCount,
rejectionCount: state.rejectionCount
})
);
// Opt-in to re-render when results are available (optimized for data display)
const [queueItems, asyncQueuer] = useAsyncQueuedState(
async (item) => {
const result = await processItem(item);
return result;
},
{ concurrency: 2, maxSize: 100, started: true },
(state) => ({
lastResult: state.lastResult,
successCount: state.successCount
})
);
// Add items to queue - state updates automatically
asyncQueuer.addItem(async () => {
const result = await fetchData();
return result;
});
// Start processing
asyncQueuer.start();
// Stop processing
asyncQueuer.stop();
// queueItems reflects current queue state
const pendingCount = asyncQueuer.peekPendingItems().length;
// Access the selected async queuer state (will be empty object {} unless selector provided)
const { size, isRunning, activeItems } = asyncQueuer.state;
我们的合作伙伴
订阅 Bytes
您的每周 JavaScript 资讯。每周一免费发送给超过 10 万开发者。
订阅 Bytes
您的每周 JavaScript 资讯。每周一免费发送给超过 10 万开发者。