使用排队器
函数：useQueuer()
ts
function useQueuer<TValue, TSelected>(
fn,
options,
selector): ReactQueuer<TValue, TSelected>
function useQueuer<TValue, TSelected>(
fn,
options,
selector): ReactQueuer<TValue, TSelected>
定义于：react-pacer/src/queuer/useQueuer.ts:132
一个 React Hook，用于创建和管理 Queuer 实例。
这是一个低级 Hook，可以直接访问 Queuer 的功能，而无需任何内置状态管理。通过使用 onItemsChange 回调函数，您可以将其集成到您偏好的任何状态管理解决方案中（useState、Redux、Zustand 等）。
有关具有内置状态管理的 Hook，请参阅 useQueuedState。
Queuer 扩展了基础的 Queue，增加了处理能力。项目按顺序同步处理，并在处理每个项目之间可选择性地添加延迟。Queuer 包含一个内部的 tick 机制，可以启动和停止，使其可用作调度器。启动后，它将在每次 tick 时处理一个项目，并在 tick 之间有可选的等待时间。
默认使用 FIFO（先进先出）行为，但可以通过在添加项目时指定“front”位置来配置为 LIFO（后进先出）。
状态管理和选择器
该 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 = {}
参数
fn
(item) => void
options
QueuerOptions<TValue> = {}
选择器
(state) => TSelected
Returns (返回)
ReactQueuer<TValue, TSelected>
示例
tsx
// Default behavior - no reactive state subscriptions
const queue = useQueuer(
(item) => console.log('Processing:', item),
{ started: true, wait: 1000 }
);
// Opt-in to re-render when queue size changes (optimized for displaying queue length)
const queue = useQueuer(
(item) => console.log('Processing:', item),
{ started: true, wait: 1000 },
(state) => ({
size: state.size,
isEmpty: state.isEmpty,
isFull: state.isFull
})
);
// Opt-in to re-render when processing state changes (optimized for loading indicators)
const queue = useQueuer(
(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 queue = useQueuer(
(item) => console.log('Processing:', item),
{ started: true, wait: 1000 },
(state) => ({
executionCount: state.executionCount,
expirationCount: state.expirationCount,
rejectionCount: state.rejectionCount
})
);
// Example with custom state management and scheduling
const [items, setItems] = useState([]);
const queue = useQueuer(
(item) => console.log('Processing:', item),
{
started: true, // Start processing immediately
wait: 1000, // Process one item every second
onItemsChange: (queue) => setItems(queue.peekAllItems()),
getPriority: (item) => item.priority // Process higher priority items first
}
);
// Add items to process - they'll be handled automatically
queue.addItem('task1');
queue.addItem('task2');
// Control the scheduler
queue.stop(); // Pause processing
queue.start(); // Resume processing
// Access the selected state (will be empty object {} unless selector provided)
const { size, isRunning, executionCount } = queue.state;
// Default behavior - no reactive state subscriptions
const queue = useQueuer(
(item) => console.log('Processing:', item),
{ started: true, wait: 1000 }
);
// Opt-in to re-render when queue size changes (optimized for displaying queue length)
const queue = useQueuer(
(item) => console.log('Processing:', item),
{ started: true, wait: 1000 },
(state) => ({
size: state.size,
isEmpty: state.isEmpty,
isFull: state.isFull
})
);
// Opt-in to re-render when processing state changes (optimized for loading indicators)
const queue = useQueuer(
(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 queue = useQueuer(
(item) => console.log('Processing:', item),
{ started: true, wait: 1000 },
(state) => ({
executionCount: state.executionCount,
expirationCount: state.expirationCount,
rejectionCount: state.rejectionCount
})
);
// Example with custom state management and scheduling
const [items, setItems] = useState([]);
const queue = useQueuer(
(item) => console.log('Processing:', item),
{
started: true, // Start processing immediately
wait: 1000, // Process one item every second
onItemsChange: (queue) => setItems(queue.peekAllItems()),
getPriority: (item) => item.priority // Process higher priority items first
}
);
// Add items to process - they'll be handled automatically
queue.addItem('task1');
queue.addItem('task2');
// Control the scheduler
queue.stop(); // Pause processing
queue.start(); // Resume processing
// Access the selected state (will be empty object {} unless selector provided)
const { size, isRunning, executionCount } = queue.state;
我们的合作伙伴
订阅 Bytes
您的每周 JavaScript 资讯。每周一免费发送给超过 10 万开发者。
订阅 Bytes
您的每周 JavaScript 资讯。每周一免费发送给超过 10 万开发者。