当前位置：首页 > React

react如何检测窗口

2026-02-11 16:52:35React

检测窗口大小变化的方法

在React中，可以通过window.addEventListener监听resize事件来检测窗口大小变化。需要在组件挂载时添加监听器，并在卸载时移除以避免内存泄漏。

react如何检测窗口

import React, { 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>
      <p>Window width: {windowSize.width}px</p>
      <p>Window height: {windowSize.height}px</p>
    </div>
  );
}

使用自定义Hook简化逻辑

可以将窗口大小检测的逻辑封装成自定义Hook，方便在多个组件中复用。

react如何检测窗口

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, height } = useWindowSize();
  return (
    <div>
      <p>Current window size: {width}x{height}</p>
    </div>
  );
}

响应式设计辅助工具

结合CSS媒体查询和JavaScript检测，可以创建更灵活的响应式布局。例如，根据窗口宽度切换不同的渲染内容。

function ResponsiveLayout() {
  const { width } = useWindowSize();
  const isMobile = width < 768;

  return (
    <div>
      {isMobile ? <MobileView /> : <DesktopView />}
    </div>
  );
}

性能优化注意事项

频繁的resize事件可能影响性能，可以通过防抖（debounce）技术减少事件处理函数的执行次数。

function useDebouncedWindowSize(delay = 250) {
  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;
}