react如何检测窗口

监听窗口大小变化

使用 useEffect 钩子监听 resize 事件，并在组件卸载时清除监听。

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 App() {
  const { width, height } = useWindowSize();
  return (
    <div>
      Window Width: {width}, Window Height: {height}
    </div>
  );
}

监听窗口滚动事件

通过 useEffect 监听 scroll 事件，获取滚动位置。

import { useState, useEffect } from 'react';

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

function App() {
  const scrollY = useWindowScroll();
  return <div>Current Scroll Position: {scrollY}px</div>;
}

检测窗口是否可见

使用 document.visibilityState 监听窗口是否可见（如切换标签页或最小化浏览器）。

import { useState, useEffect } from 'react';

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

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

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

  return isVisible;
}

function App() {
  const isVisible = useWindowVisibility();
  return <div>Window is {isVisible ? 'visible' : 'hidden'}</div>;
}

监听窗口失去焦点

通过 blur 和 focus 事件检测浏览器窗口是否处于活跃状态。

import { useState, useEffect } from 'react';

function useWindowFocus() {
  const [isFocused, setIsFocused] = useState(document.hasFocus());

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

    window.addEventListener('focus', handleFocus);
    window.addEventListener('blur', handleBlur);

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

  return isFocused;
}

function App() {
  const isFocused = useWindowFocus();
  return <div>Window is {isFocused ? 'focused' : 'not focused'}</div>;
}

使用第三方库简化操作

如果不想手动实现，可以使用 react-use 或 @react-hook/window-size 等库快速实现窗口检测功能。

import { useWindowSize } from '@react-hook/window-size';

function App() {
  const [width, height] = useWindowSize();
  return (
    <div>
      Window Size: {width}x{height}
    </div>
  );
}