React组件中如何为每个ID实现独立的lodash throttle节流？

要实现按每个someId独立节流，你需要维护一个节流函数的映射表，为每个不同的id创建单独的节流实例。结合React的useRef和useCallback可以实现这个需求：

import { throttle } from 'lodash';
import { useCallback, useRef } from 'react';

// 组件内部代码
const throttledFunctions = useRef<Record<number, (id: number) => void>>({});

const requestDetails = useCallback((someId: number) => {
  // 若当前id未对应节流函数，则创建并存储
  if (!throttledFunctions.current[someId]) {
    throttledFunctions.current[someId] = throttle((id) => {
      dispatch(...); // 这里传入id执行你的dispatch逻辑
    }, 30000);
  }
  // 调用对应id的节流函数
  throttledFunctions.current[someId](someId);
}, [dispatch]);

关键说明 #

• useRef用于存储节流函数映射表，避免组件重新渲染时丢失已创建的节流实例。
• 每次调用requestDetails时，先检查是否存在对应someId的节流函数，不存在则创建新实例。
• 每个someId拥有独立的节流定时器，互相不会干扰。

额外优化建议 #

如果组件会处理大量不同的someId，可在组件卸载时清理所有节流函数，避免内存泄漏：

import { useEffect } from 'react';

useEffect(() => {
  return () => {
    Object.values(throttledFunctions.current).forEach(fn => fn.cancel());
  };
}, []);

内容的提问来源于stack exchange，提问作者etnguyen03