在 React useEffect hook 中清理 Lodash debounce function

Question

我正在尝试使用 Lodash 的 Debounce function 和自定义挂钩来防止 window 调整大小事件过于频繁地触发。 虽然钩子按需要工作，但我正在努力正确清理从 React useEffect 钩子返回的 function。 这会导致浏览器控制台中出现以下错误，并且单页应用程序中的所有用户 session 都存在事件侦听器。

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

我知道有一些方法可以滚动自定义 debounce hook，但是为了这个大量使用 Lodash 的项目，如果可能的话，我宁愿坚持使用 Debounce function。

function getSize() {
  return {
    width: window.innerWidth,
    height: window.innerHeight,
  };
}

export default function useWindowSize(debounceDelay = 500) {
  const [windowSize, setWindowSize] = useState(getSize);

  useEffect(() => {
    function handleResize() {
      setWindowSize(getSize());
    }

    const debounced = debounce(handleResize, debounceDelay);
    window.addEventListener(`resize`, debounced);

    return () => window.removeEventListener(`resize`, debounced.cancel());
  }, [debounceDelay]);

  return windowSize;
}

Answer 1

不需要通过debounce.cancel() 。 删除事件侦听器时，您需要将相同的引用传递给创建侦听器时使用的 function。 您也可以取消当前的去抖 function。

useEffect(() => {
    function handleResize() {
      setWindowSize(getSize());
    }

    const debounced = debounce(handleResize, debounceDelay);
    window.addEventListener(`resize`, debounced);

    return () => {
         debounce.cancel()
         window.removeEventListener(`resize`, debounced); // use debounced directly
     }
  }, [debounceDelay]);

Answer 2

您是直接调用 cancel function 而不是。 您应该只使用debounced这就是在您的侦听器中添加的内容：

return () => {
  window.removeEventListener('resize', debounced)
}

在大多数情况下，只需删除事件就可以了：

return () => {
  window.removeEventListener('resize')
}