当前位置：首页 > React

react如何监测窗口

2026-02-26 07:57:32React

监测窗口大小变化

在React中监测窗口大小变化可以通过useEffect和window.addEventListener实现。创建一个自定义Hook能提高代码复用性：

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;
}

监听窗口滚动事件

监测窗口滚动位置可用于实现视差效果或懒加载。以下示例展示如何获取当前滚动位置：

import { useState, useEffect } from 'react';

function useScrollPosition() {
  const [scrollPosition, setScrollPosition] = useState(0);

  useEffect(() => {
    function updatePosition() {
      setScrollPosition(window.pageYOffset);
    }

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

  return scrollPosition;
}

检测窗口是否获得焦点

通过visibilitychange和focus/blur事件可以判断窗口是否处于活跃状态：

import { useState, useEffect } from 'react';

function useWindowFocus() {
  const [isFocused, setIsFocused] = useState(true);

  useEffect(() => {
    function handleFocus() {
      setIsFocused(true);
    }
    function handleBlur() {
      setIsFocused(false);
    }

    window.addEventListener('focus', handleFocus);
    window.addEventListener('blur', handleBlur);
    document.addEventListener('visibilitychange', () => {
      setIsFocused(!document.hidden);
    });

    return () => {
      window.removeEventListener('focus', handleFocus);
      window.removeEventListener('blur', handleBlur);
    };
  }, []);

  return isFocused;
}

响应式布局处理

结合CSS媒体查询和JavaScript窗口监测可实现更精细的响应式控制：

function useMediaQuery(query) {
  const [matches, setMatches] = useState(false);

  useEffect(() => {
    const media = window.matchMedia(query);
    if (media.matches !== matches) {
      setMatches(media.matches);
    }
    const listener = () => setMatches(media.matches);
    media.addListener(listener);
    return () => media.removeListener(listener);
  }, [query]);

  return matches;
}

性能优化建议

频繁触发的窗口事件（如resize和scroll）需要进行防抖处理：

import { useCallback } from 'react';

function useDebouncedEffect(effect, delay, deps) {
  const callback = useCallback(effect, deps);

  useEffect(() => {
    const handler = setTimeout(() => {
      callback();
    }, delay);

    return () => {
      clearTimeout(handler);
    };
  }, [callback, delay]);
}

react如何监测窗口