如何在 `useEffect` 里正确地使用 `throttle`？

在React hooks中，如果你想在`useEffect`中正确地使用`throttle`（限制函数执行频率），通常是在处理频繁触发但不需要立即响应的事件，比如滚动事件、窗口大小改变等。`throttle`可以帮助我们避免无谓的计算和DOM操作。

首先，我们需要引入一个第三方库来实现`throttle`，如`lodash.debounce`或`use Debounce Hook`，它们可以延迟函数执行，直到一段时间内不再有新的调用才执行。

这里以`lodash.debounce`为例：

import { debounce } from 'lodash';

const useThrottledFunction = (func, delay) => {
  const throttledFunc = debounce(func, delay);
  useEffect(() => {
    // 这里的依赖数组为空数组([])，因为debounce会在首次调用后等待delay时间，之后的连续调用才会执行
    return function cleanup() {
      throttledFunc.cancel();
    };
  }, []);

  return throttledFunc;
};

// 使用示例
const handleScroll = useThrottledFunction((event) => {
  console.log('Scrolled:', event.target.scrollTop);
}, 200);

return (
  <div onScroll={handleScroll}>
    {/* ... */}
  </div>
);

在这个例子中，`handleScroll`函数会被延迟200毫秒执行，当用户停止滚动时才会打印当前的滚动位置，从而减少不必要的计算。