react如何检测窗口

检测窗口变化的方法

使用 window.addEventListener

在React中监听窗口变化可以通过原生JavaScript的window.addEventListener实现。通常在useEffect中设置监听器，并在组件卸载时移除。

import { useEffect } from 'react';

function useWindowResize() {
  useEffect(() => {
    const handleResize = () => {
      console.log(window.innerWidth, window.innerHeight);
    };

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

自定义Hook封装

将窗口尺寸检测逻辑封装为自定义Hook，便于复用。返回当前窗口尺寸的实时状态。

import { useState, useEffect } from 'react';

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

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

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

  return size;
}

使用第三方库

若需复杂功能（如防抖、响应式断点），可使用react-use或@react-hook/resize-observer等库简化实现。

import { useWindowSize } from 'react-use';

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

断点检测实现

结合CSS断点检测窗口宽度范围，常用于响应式设计。

function useBreakpoint() {
  const [breakpoint, setBreakpoint] = useState('');

  useEffect(() => {
    const checkBreakpoint = () => {
      const width = window.innerWidth;
      if (width < 768) setBreakpoint('mobile');
      else if (width < 1024) setBreakpoint('tablet');
      else setBreakpoint('desktop');
    };

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

  return breakpoint;
}

性能优化

高频事件如resize需使用防抖（debounce）或节流（throttle）减少性能损耗。

import { useEffect } from 'react';
import { debounce } from 'lodash';

function useDebouncedResize(callback, delay = 100) {
  useEffect(() => {
    const debouncedCallback = debounce(callback, delay);
    window.addEventListener('resize', debouncedCallback);
    return () => {
      debouncedCallback.cancel();
      window.removeEventListener('resize', debouncedCallback);
    };
  }, [callback, delay]);
}