当前位置：首页 > React

react如何监测窗口

2026-01-23 18:00:49React

监测窗口大小变化

使用 useEffect 和 useState 结合 window.addEventListener 监听 resize 事件。在组件挂载时添加事件监听器，卸载时移除监听器。

import { useState, useEffect } from 'react';

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

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

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

  return windowSize;
}

使用自定义 Hook

将上述逻辑封装为自定义 Hook，方便在多个组件中复用。调用 useWindowSize 即可获取实时窗口尺寸。

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

防抖优化性能

对于频繁触发的 resize 事件，可通过防抖（debounce）减少状态更新频率。使用 lodash.debounce 或自定义防抖函数。

import { debounce } from 'lodash';

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

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

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

  return windowSize;
}

监听窗口滚动事件

类似地，可通过 scroll 事件监听窗口滚动位置。注意在 useEffect 清理阶段移除监听。

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

  useEffect(() => {
    const handleScroll = () => setScrollY(window.scrollY);
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return scrollY;
}