react如何监测窗口

监听窗口大小变化

使用 useEffect 和 window.addEventListener 监听 resize 事件，并在组件卸载时移除监听。

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    const handleResize = () => {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    };

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

  return (
    <div>
      Window width: {windowSize.width}, height: {windowSize.height}
    </div>
  );
}

使用自定义 Hook 封装逻辑

将窗口监听逻辑抽象为可复用的 Hook，便于在多个组件中使用。

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    const handleResize = () => {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    };

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

  return windowSize;
}

// 使用示例
function Component() {
  const { width, height } = useWindowSize();
  return <div>Current width: {width}, height: {height}</div>;
}

监听窗口滚动事件

通过 window.addEventListener 监听 scroll 事件，获取滚动位置或其他相关数据。

import { useState, useEffect } from 'react';

function ScrollPositionTracker() {
  const [scrollY, setScrollY] = useState(window.scrollY);

  useEffect(() => {
    const handleScroll = () => {
      setScrollY(window.scrollY);
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return <div>Current scroll position: {scrollY}px</div>;
}

防抖优化性能

频繁触发的事件（如 resize 或 scroll）可能导致性能问题，使用防抖（debounce）减少处理频率。

import { useState, useEffect } from 'react';

function useDebouncedWindowSize(delay = 100) {
  const [windowSize, setWindowSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight,
  });

  useEffect(() => {
    let timeoutId;
    const handleResize = () => {
      clearTimeout(timeoutId);
      timeoutId = setTimeout(() => {
        setWindowSize({
          width: window.innerWidth,
          height: window.innerHeight,
        });
      }, delay);
    };

    window.addEventListener('resize', handleResize);
    return () => {
      window.removeEventListener('resize', handleResize);
      clearTimeout(timeoutId);
    };
  }, [delay]);

  return windowSize;
}

使用第三方库简化

如需更高级的功能（如响应式断点），可使用第三方库如 react-use 或 react-resize-detector。

import { useWindowSize } from 'react-use';

function Example() {
  const { width, height } = useWindowSize();
  return <div>Window size: {width}x{height}</div>;
}