Question

我有以下钩子，使用 useLayoutEffect 在窗口的调整大小事件上注册事件侦听器。我想给它添加一个限制，比如 1000 毫秒，每秒最多调用一次 handleCanvasResize。

我应该使用什么语法？

useLayoutEffect(() => {
    window.addEventListener('resize', handleCanvasResize);
    return () => {
      window.removeEventListener('resize', handleCanvasResize);
    };
  }, [handleCanvasResize]);

Answer 1

您需要创建一个受限制的函数引用，然后将其添加为调整大小事件的侦听器。您可以使用库进行节流，也可以实现自己的。

const handleCanvasResizeThrottled = useMemo(() => _.throttle(handleCanvasResize, 1000), []);

useLayoutEffect(() => {
    window.addEventListener('resize', handleCanvasResizeThrottled);
    return () => {
      window.removeEventListener('resize', handleCanvasResizeThrottled);
    };
  }, [handleCanvasResizeThrottled]);

Answer 2

如果您使用 useDebounce，这会起作用：

useLayoutEffect(() => {
  const [handleCanvasResizeDebounce] = useDebounce(handleCanvasResize, 1000);
    window.addEventListener('resize', handleCanvasResize);
    return () => {
      window.removeEventListener('resize', handleCanvasResizeDebounce);
    };
  }, [handleCanvasResize]);

在 useLayoutEffect 上反应钩子节流

2 个答案: