框架
版本
防抖器 API 参考
节流器 API 参考
速率限制器 API 参考
队列 API 参考
批处理器 API 参考

createBatcher

函数: createBatcher()

ts
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 信号。

特性

  • 使用提供的 fn 函数进行项目批处理
  • 可配置的批处理大小和等待时间
  • 通过 getShouldExecute 进行自定义批处理逻辑
  • 用于监控批处理操作的事件回调
  • 所有状态属性(项目、计数等)都公开为 Solid 信号以实现响应性

batcher 收集项目,并根据

  • 最大批次大小
  • 基于时间的批处理(X 毫秒后处理)
  • 通过 getShouldExecute 进行自定义批处理逻辑

状态管理和选择器

此 Hook 使用 TanStack Store 进行响应式状态管理。selector 参数允许您指定哪些状态更改将触发重新渲染,通过防止不相关的状态更改导致不必要的重新渲染来优化性能。

默认情况下,将不会进行响应式状态订阅,您必须通过提供 selector 函数来选择加入状态跟踪。这可以防止不必要的重新渲染,并让您完全控制组件何时更新。只有当您提供 selector 时,组件才会在选定的状态值发生变化时重新渲染。

可用的状态属性

  • executionCount: 已完成的批处理执行次数
  • isRunning: Batcher 当前是否正在运行(未停止)
  • items: 当前排队等待批处理的项目数组
  • totalItemsProcessed: 已处理的单个项目的总数(跨所有批次)

用法示例

tsx
// 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 = {}

参数

fn

(items) => void

initialOptions

BatcherOptions<TValue> = {}

选择器

(state) => TSelected

Returns (返回)

SolidBatcher<TValue, TSelected>

我们的合作伙伴
Code Rabbit
Unkey
订阅 Bytes

您的每周 JavaScript 资讯。每周一免费发送给超过 10 万开发者。

Bytes

无垃圾邮件。您可以随时取消订阅。

订阅 Bytes

您的每周 JavaScript 资讯。每周一免费发送给超过 10 万开发者。

Bytes

无垃圾邮件。您可以随时取消订阅。