使用批处理回调
函数: useBatchedCallback()
ts
function useBatchedCallback<TFn>(fn, options): (...args) => void
function useBatchedCallback<TFn>(fn, options): (...args) => void
定义于: react-pacer/src/batcher/useBatchedCallback.ts:41
一个 React hook，用于创建一个回调函数的批量处理版本。此 hook 本质上是 `batch` 函数的一个封装，该函数从 `@tanstack/pacer` 导出，但针对 React 进行了优化，具有响应式选项和稳定的函数引用。
批量处理的函数将收集单个调用到批次中，并在满足批次条件时（达到最大大小、经过等待时间或自定义逻辑）执行它们。
与 `useBatcher` hook 相比，此 hook 提供了更简单的 API，使其成为基本批量处理需求的理想选择。但是，它不公开底层的 Batcher 实例。
对于需要以下功能的进阶用法
- 手动批量执行
- 访问批量状态和指标
- 自定义 useCallback 依赖项
考虑改用 `useBatcher` hook。
类型参数
• TFn extends AnyFunction
参数
fn
(items) => void
options
BatcherOptions<Parameters<TFn>[0]>
Returns (返回)
Function
参数
args
...Parameters<TFn>
Returns (返回)
void
示例
tsx
// Batch analytics events
const trackEvents = useBatchedCallback((events: AnalyticsEvent[]) => {
sendAnalytics(events);
}, {
maxSize: 5, // Process when 5 events collected
wait: 2000 // Or after 2 seconds
});
// Use in event handlers
<button onClick={() => trackEvents({ type: 'click', target: 'button' })}>
Click me
</button>
// Batch analytics events
const trackEvents = useBatchedCallback((events: AnalyticsEvent[]) => {
sendAnalytics(events);
}, {
maxSize: 5, // Process when 5 events collected
wait: 2000 // Or after 2 seconds
});
// Use in event handlers
<button onClick={() => trackEvents({ type: 'click', target: 'button' })}>
Click me
</button>
我们的合作伙伴
订阅 Bytes
您的每周 JavaScript 资讯。每周一免费发送给超过 10 万开发者。
订阅 Bytes
您的每周 JavaScript 资讯。每周一免费发送给超过 10 万开发者。