useBatcher
函数：useBatcher()
ts
function useBatcher<TValue>(fn, options): Batcher<TValue>
function useBatcher<TValue>(fn, options): Batcher<TValue>
定义于：react-pacer/src/batcher/useBatcher.ts:43
一个 React 钩子，用于创建和管理 Batcher 实例。
这是一个较低级别的钩子，可直接访问 Batcher 的功能，而无需 任何内置的状态管理。这使您可以将其与任何您喜欢的状态管理解决方案 （useState、Redux、Zustand 等）集成，方法是利用 onItemsChange 回调。
Batcher 收集项目并根据可配置的条件分批处理它们：
- 最大批次大小
- 基于时间的批处理（在 X 毫秒后处理）
- 通过 getShouldExecute 实现自定义批处理逻辑
类型参数
• TValue
参数
fn
(items) => void
options
BatcherOptions<TValue> = {}
返回
Batcher<TValue>
示例
tsx
// 自定义状态管理和批处理示例
const [items, setItems] = useState([]);
const batcher = useBatcher<number>(
(items) => console.log('正在处理批次：', items),
{
maxSize: 5,
wait: 2000,
onItemsChange: (batcher) => setItems(batcher.peekAllItems()),
getShouldExecute: (items) => items.length >= 3
}
);
// 将项目添加到批次 - 满足条件时将进行处理
batcher.addItem(1);
batcher.addItem(2);
batcher.addItem(3); // 触发批处理
// 控制批处理器
batcher.stop(); // 暂停批处理
batcher.start(); // 恢复批处理
// 自定义状态管理和批处理示例
const [items, setItems] = useState([]);
const batcher = useBatcher<number>(
(items) => console.log('正在处理批次：', items),
{
maxSize: 5,
wait: 2000,
onItemsChange: (batcher) => setItems(batcher.peekAllItems()),
getShouldExecute: (items) => items.length >= 3
}
);
// 将项目添加到批次 - 满足条件时将进行处理
batcher.addItem(1);
batcher.addItem(2);
batcher.addItem(3); // 触发批处理
// 控制批处理器
batcher.stop(); // 暂停批处理
batcher.start(); // 恢复批处理
