当前位置：首页 > React

react如何检测窗口

2026-01-14 10:50:43React

监听窗口大小变化

使用useEffect钩子和resize事件监听窗口尺寸变化。在组件挂载时添加事件监听器，卸载时移除监听器以避免内存泄漏。

import { useState, useEffect } from 'react';

function WindowSizeDetector() {
  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 ResponsiveComponent() {
  const { width } = useWindowSize();
  const isMobile = width < 768;

  return (
    <div>{isMobile ? 'Mobile View' : 'Desktop View'}</div>
  );
}

性能优化

对于频繁触发的resize事件，使用防抖(debounce)或节流(throttle)技术减少事件处理频率，避免性能问题。

import { useState, useEffect } from 'react';
import { throttle } from 'lodash';

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

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

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

  return windowSize;
}

检测窗口滚动位置

监听窗口滚动事件，获取当前滚动位置信息，可用于实现滚动加载或视差效果。

import { useState, useEffect } from 'react';

function useScrollPosition() {
  const [scrollPosition, setScrollPosition] = useState({
    x: window.pageXOffset,
    y: window.pageYOffset
  });

  useEffect(() => {
    const handleScroll = () => {
      setScrollPosition({
        x: window.pageXOffset,
        y: window.pageYOffset
      });
    };

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

  return scrollPosition;
}

浏览器可见性检测

通过visibilitychange事件检测当前标签页是否可见，适用于需要暂停后台任务的场景。

import { useState, useEffect } from 'react';

function usePageVisibility() {
  const [isVisible, setIsVisible] = useState(!document.hidden);

  useEffect(() => {
    const handleVisibilityChange = () => {
      setIsVisible(!document.hidden);
    };

    document.addEventListener('visibilitychange', handleVisibilityChange);
    return () => {
      document.removeEventListener('visibilitychange', handleVisibilityChange);
    };
  }, []);

  return isVisible;
}

react如何检测窗口