function createBatcher<TValue, TSelected>(
fn,
initialOptions,
selector): SolidBatcher<TValue, TSelected>
function createBatcher<TValue, TSelected>(
fn,
initialOptions,
selector): SolidBatcher<TValue, TSelected>
定义于: batcher/createBatcher.ts:100
创建一个与 Solid 兼容的 Batcher 实例,用于管理项目批次,并公开所有状态属性的 Solid 信号。
特性
batcher 收集项目,并根据
此 Hook 使用 TanStack Store 进行响应式状态管理。selector 参数允许您指定哪些状态更改将触发重新渲染,通过防止不相关的状态更改导致不必要的重新渲染来优化性能。
默认情况下,将不会进行响应式状态订阅,您必须通过提供 selector 函数来选择加入状态跟踪。这可以防止不必要的重新渲染,并让您完全控制组件何时更新。只有当您提供 selector 时,组件才会在选定的状态值发生变化时重新渲染。
可用的状态属性
用法示例
// Default behavior - no reactive state subscriptions
const batcher = createBatcher(
(items) => {
// Process batch of items
console.log('Processing batch:', items);
},
{
maxSize: 5,
wait: 2000,
onExecute: (batcher) => console.log('Batch executed'),
getShouldExecute: (items) => items.length >= 3
}
);
// Opt-in to re-render when items or isRunning changes (optimized for UI updates)
const batcher = createBatcher(
(items) => console.log('Processing batch:', items),
{ maxSize: 5, wait: 2000 },
(state) => ({ items: state.items, isRunning: state.isRunning })
);
// Opt-in to re-render when execution metrics change (optimized for tracking progress)
const batcher = createBatcher(
(items) => console.log('Processing batch:', items),
{ maxSize: 5, wait: 2000 },
(state) => ({
executionCount: state.executionCount,
totalItemsProcessed: state.totalItemsProcessed
})
);
// Add items to batch
batcher.addItem('task1');
batcher.addItem('task2');
// Control the batcher
batcher.stop(); // Pause processing
batcher.start(); // Resume processing
// Access the selected state (will be empty object {} unless selector provided)
const { items, isRunning } = batcher.state();
// Default behavior - no reactive state subscriptions
const batcher = createBatcher(
(items) => {
// Process batch of items
console.log('Processing batch:', items);
},
{
maxSize: 5,
wait: 2000,
onExecute: (batcher) => console.log('Batch executed'),
getShouldExecute: (items) => items.length >= 3
}
);
// Opt-in to re-render when items or isRunning changes (optimized for UI updates)
const batcher = createBatcher(
(items) => console.log('Processing batch:', items),
{ maxSize: 5, wait: 2000 },
(state) => ({ items: state.items, isRunning: state.isRunning })
);
// Opt-in to re-render when execution metrics change (optimized for tracking progress)
const batcher = createBatcher(
(items) => console.log('Processing batch:', items),
{ maxSize: 5, wait: 2000 },
(state) => ({
executionCount: state.executionCount,
totalItemsProcessed: state.totalItemsProcessed
})
);
// Add items to batch
batcher.addItem('task1');
batcher.addItem('task2');
// Control the batcher
batcher.stop(); // Pause processing
batcher.start(); // Resume processing
// Access the selected state (will be empty object {} unless selector provided)
const { items, isRunning } = batcher.state();
• TValue
• TSelected = {}
(items) => void
BatcherOptions<TValue> = {}
(state) => TSelected
SolidBatcher<TValue, TSelected>
您的每周 JavaScript 资讯。每周一免费发送给超过 10 万开发者。