使用批处理器
函数: useBatcher()
ts
function useBatcher<TValue, TSelected>(
fn,
options,
selector): ReactBatcher<TValue, TSelected>
function useBatcher<TValue, TSelected>(
fn,
options,
selector): ReactBatcher<TValue, TSelected>
定义于: react-pacer/src/batcher/useBatcher.ts:121
一个 React hook，用于创建和管理 Batcher 实例。
这是一个低级 hook，它提供了对 Batcher 功能的直接访问，没有任何内置状态管理。这允许您通过使用 `onItemsChange` 回调将其与您喜欢的任何状态管理解决方案（useState、Redux、Zustand 等）集成。
Batcher 收集项目并在基于可配置的条件将它们分批处理。
- 最大批处理大小
- 基于时间的批处理（X 毫秒后处理）
- 通过 getShouldExecute 进行自定义批处理逻辑
状态管理和选择器
该 hook 使用 TanStack Store 进行响应式状态管理。`selector` 参数允许您指定哪些状态更改会触发重新渲染，通过防止不相关的状态更改导致不必要的重新渲染来优化性能。
默认情况下，将没有响应式状态订阅，您必须通过提供 `selector` 函数来选择加入状态跟踪。这可以防止不必要的重新渲染，并让您完全控制组件何时更新。只有当您提供 `selector` 时，组件才会随着所选状态值更改而重新渲染。
可用的状态属性
- executionCount: 已完成的批处理执行次数
- isEmpty: batcher 是否没有要处理的项目
- isPending: batcher 是否正在等待超时触发批处理
- isRunning: batcher 是否处于活动状态并将自动处理项目
- items: 当前排队等待批量处理的项目数组
- size: 当前批处理队列中的项目数
- status: 当前处理状态 ('idle' | 'pending')
- totalItemsProcessed: 所有批次处理的总项目数
类型参数
• TValue
• TSelected = {}
参数
fn
(items) => void
options
BatcherOptions<TValue> = {}
选择器
(state) => TSelected
Returns (返回)
ReactBatcher<TValue, TSelected>
示例
tsx
// Default behavior - no reactive state subscriptions
const batcher = useBatcher<number>(
(items) => console.log('Processing batch:', items),
{ maxSize: 5, wait: 2000 }
);
// Opt-in to re-render when batch size changes (optimized for displaying queue size)
const batcher = useBatcher<number>(
(items) => console.log('Processing batch:', items),
{ maxSize: 5, wait: 2000 },
(state) => ({
size: state.size,
isEmpty: state.isEmpty
})
);
// Opt-in to re-render when execution metrics change (optimized for stats display)
const batcher = useBatcher<number>(
(items) => console.log('Processing batch:', items),
{ maxSize: 5, wait: 2000 },
(state) => ({
executionCount: state.executionCount,
totalItemsProcessed: state.totalItemsProcessed
})
);
// Opt-in to re-render when processing state changes (optimized for loading indicators)
const batcher = useBatcher<number>(
(items) => console.log('Processing batch:', items),
{ maxSize: 5, wait: 2000 },
(state) => ({
isPending: state.isPending,
isRunning: state.isRunning,
status: state.status
})
);
// Example with custom state management and batching
const [items, setItems] = useState([]);
const batcher = useBatcher<number>(
(items) => console.log('Processing batch:', items),
{
maxSize: 5,
wait: 2000,
onItemsChange: (batcher) => setItems(batcher.peekAllItems()),
getShouldExecute: (items) => items.length >= 3
}
);
// Add items to batch - they'll be processed when conditions are met
batcher.addItem(1);
batcher.addItem(2);
batcher.addItem(3); // Triggers batch processing
// Control the batcher
batcher.stop(); // Pause batching
batcher.start(); // Resume batching
// Access the selected state (will be empty object {} unless selector provided)
const { size, isPending } = batcher.state;
// Default behavior - no reactive state subscriptions
const batcher = useBatcher<number>(
(items) => console.log('Processing batch:', items),
{ maxSize: 5, wait: 2000 }
);
// Opt-in to re-render when batch size changes (optimized for displaying queue size)
const batcher = useBatcher<number>(
(items) => console.log('Processing batch:', items),
{ maxSize: 5, wait: 2000 },
(state) => ({
size: state.size,
isEmpty: state.isEmpty
})
);
// Opt-in to re-render when execution metrics change (optimized for stats display)
const batcher = useBatcher<number>(
(items) => console.log('Processing batch:', items),
{ maxSize: 5, wait: 2000 },
(state) => ({
executionCount: state.executionCount,
totalItemsProcessed: state.totalItemsProcessed
})
);
// Opt-in to re-render when processing state changes (optimized for loading indicators)
const batcher = useBatcher<number>(
(items) => console.log('Processing batch:', items),
{ maxSize: 5, wait: 2000 },
(state) => ({
isPending: state.isPending,
isRunning: state.isRunning,
status: state.status
})
);
// Example with custom state management and batching
const [items, setItems] = useState([]);
const batcher = useBatcher<number>(
(items) => console.log('Processing batch:', items),
{
maxSize: 5,
wait: 2000,
onItemsChange: (batcher) => setItems(batcher.peekAllItems()),
getShouldExecute: (items) => items.length >= 3
}
);
// Add items to batch - they'll be processed when conditions are met
batcher.addItem(1);
batcher.addItem(2);
batcher.addItem(3); // Triggers batch processing
// Control the batcher
batcher.stop(); // Pause batching
batcher.start(); // Resume batching
// Access the selected state (will be empty object {} unless selector provided)
const { size, isPending } = batcher.state;
我们的合作伙伴
订阅 Bytes
您的每周 JavaScript 资讯。每周一免费发送给超过 10 万开发者。
订阅 Bytes
您的每周 JavaScript 资讯。每周一免费发送给超过 10 万开发者。