react监听window尺寸变化添加节流

在React应用中，监听window尺寸变化（即调整浏览器窗口大小）是一个常见的需求。然而，由于窗口大小调整事件（resize）可能会非常频繁地触发，直接处理这些事件可能会导致性能问题。因此，使用节流（throttling）技术来限制事件处理函数的调用频率是一个很好的解决方案。

以下是一个示例，展示了如何在React中使用节流来监听window尺寸变化：

1. 创建一个节流函数：
   首先，我们需要一个节流函数。节流函数会确保在指定的时间间隔内，最多只调用一次提供的回调函数。

function throttle(func, wait) {
  let timeout = null;
  return function(...args) {
    if (!timeout) {
      timeout = setTimeout(() => {
        func.apply(this, args);
        timeout = null;
      }, wait);
    }
  };
}

2. 在React组件中使用节流函数：
   接下来，我们在React组件中使用这个节流函数来监听window的resize事件。

import React, { useEffect, useState } from 'react';

// 节流函数
function throttle(func, wait) {
  let timeout = null;
  return function(...args) {
    if (!timeout) {
      timeout = setTimeout(() => {
        func.apply(this, args);
        timeout = null;
      }, wait);
    }
  };
}

const WindowResizeListener = () => {
  const [windowSize, setWindowSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight
  });

  // 处理窗口尺寸变化的函数
  const handleResize = () => {
    setWindowSize({
      width: window.innerWidth,
      height: window.innerHeight
    });
  };

  // 使用节流包装处理函数
  const throttledHandleResize = throttle(handleResize, 300); // 每300ms最多调用一次

  useEffect(() => {
    // 添加事件监听器
    window.addEventListener('resize', throttledHandleResize);

    // 清理函数，组件卸载时移除事件监听器
    return () => {
      window.removeEventListener('resize', throttledHandleResize);
    };
  }, []);

  return (
    <div>
      <p>Window Size:</p>
      <p>Width: {windowSize.width}</p>
      <p>Height: {windowSize.height}</p>
    </div>
  );
};

export default WindowResizeListener;

在这个示例中：

• 我们定义了一个throttle函数，它接受一个回调函数和一个等待时间（毫秒）。
• 在WindowResizeListener组件中，我们定义了一个状态windowSize来存储当前的窗口尺寸。
• handleResize函数更新windowSize状态。
• 我们使用throttle函数来包装handleResize函数，确保它每300毫秒最多调用一次。
• 在useEffect钩子中，我们添加了一个resize事件监听器，并在组件卸载时移除它。

这样，当窗口大小变化时，handleResize函数会以节流的方式被调用，从而避免性能问题。