为什么 lodash throttle 在 useWindowSize 自定义挂钩中不起作用？

Question

我正在尝试将调整大小事件与节流阀一起使用。但是，它不起作用。我尝试按如下方式调试它：

import {throttle} from 'lodash'

export function useWindowSize() {
  const [windowSize, setWindowSize] = useState({
    width: undefined,
    height: undefined,
  })

  const handleResize = () => {
    // handle resize code....
  }

  const onWindowResize = () => {
    console.log('Throttle') // <-- this does print out
    throttle(() => {
      console.log('bam') // <-- this doesn't print out
    }, 100)
  }

  useEventListener('resize', onWindowResize)

  return windowSize
}

从上面的代码可以看出，在使用 lodash 中的 throttle 函数之前，我一直在尝试注销。它确实会打印出来，但 throttle 本身的日志不会。任何人都知道为什么会这样以及如何解决这个问题？

Answer 1

我一直在尝试解决这个问题和类似的问题，因为以下代码对我有用：

export function useWindowSize() {
  const [windowSize, setWindowSize] = useState({
    width: undefined,
    height: undefined,
  })

  const handleResize = useCallback(() => {
    console.log('handleResize') // It does log this out
    // handle the resize...
  }, [windowSize])


  useEventListener('resize', throttle(handleResize, 4000)) // call it here instead
  return windowSize
}

Answer 2

您的内联函数在每次渲染时都重新生成。只需确保油门功能与下一次渲染时的功能相同即可。您可以使用 useCallback 钩子。

export function useWindowSize() {
   const [windowSize, setWindowSize] = useState({
     width: undefined,
     height: undefined
  });
  const someFunction = (e) => {
     console.log("bam", e); // 
  };
  const throttleFn = useCallback(throttle(someFunction, 1000), []);

  const onWindowResize = (e) => {
     console.log("Throttle", e); 
     throttleFn(e);
  };

  useEventListener("resize", onWindowResize);

  return windowSize;
}

为什么 lodash throttle 在 useWindowSize 自定义挂钩中不起作用？

Why does lodash throttle not work within the useWindowSize custom hooks?

javascript

lodash

reactjs