无法使用使用状态挂钩进行节流功能

Question

我正在尝试使用我的 React 应用程序的 lodash 库在滚动时限制事件"轮子"，但没有成功。

我需要从滚动输入中侦听 e.deltaY 以检测其滚动方向。为了添加一个侦听器，我写了一个接受事件名称和处理程序函数的 React 钩子。

基本实现

  const [count, setCount] = useState(0);
  const handleSections = () => {
    setCount(count + 1);
  };
  const handleWheel = _.throttle(e => {
    handleSections();
  }, 10000);
  useEventListener("wheel", handleWheel);

My useEventListener hook

function useEventListener(e, handler, passive = false) {
  useEffect(() => {
    window.addEventListener(e, handler, passive);
    return function remove() {
      window.removeEventListener(e, handler);
    };
  });
}

工作演示：https://codesandbox.io/s/throttledemo-hkf7n

我的目标是限制此滚动事件，以减少触发的事件，并有几秒钟以编程方式滚动我的页面(scrollBy()，例如(。目前节流似乎不起作用，所以我一次收到很多滚动事件

Answer 1

当您可以在函数上调用_.throttle()时，您会返回一个新函数，该函数"管理"原始函数的调用。每当调用包装器函数时，包装器都会检查是否经过了足够的时间，如果是，它会调用原始函数。

如果多次调用_.throttle()，它将返回一个没有调用该函数的"历史记录"的新函数。然后，它将一次又一次地调用原始函数。

在您的情况下，包装的函数会在每次渲染时重新生成。使用 useCallback(沙盒(包装对_.throttle()的调用：

const { useState, useCallback, useEffect } = React;
function useEventListener(e, handler, cleanup, passive = false) {
  useEffect(() => {
    window.addEventListener(e, handler, passive);
    return function remove() {
      cleanup && cleanup(); // optional specific cleanup for the handler
    
      window.removeEventListener(e, handler);
    };
  }, [e, handler, passive]);
}
const App = () => {
  const [count, setCount] = useState(0);
  const handleWheel = useCallback(_.throttle(() => {
    setCount(count => count + 1);
  }, 10000, { leading: false }), [setCount]);
  useEventListener("wheel", handleWheel, handleWheel.cancel); // add cleanup to cancel throttled calls
  return (
    <div className="App">
      <h1>Event fired {count} times</h1>
      <h2>It should add +1 to cout once per 10 seconds, doesn't it?</h2>
    </div>
  );
};
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

.App {
  font-family: sans-serif;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>