如何在 React 中实现一个自定义 Hook 来监听页面可见性（Page Visibility）的变化？

如何在 React 中实现一个自定义 Hook 来监听页面可见性（Page Visibility）的变化？

回答与解析：

可以使用浏览器的 Page Visibility API（document.visibilityState）结合 useEffect 和 useState 创建一个自定义 Hook，例如 usePageVisibility。以下是实现方式：

import { useState, useEffect } from 'react';

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

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

    // 添加 visibilitychange 事件监听
    document.addEventListener('visibilitychange', handleVisibilityChange);

    // 清理监听器
    return () => {
      document.removeEventListener('visibilitychange', handleVisibilityChange);
    };
  }, []);

  return isVisible;
}

使用示例：

function MyComponent() {
  const isVisible = usePageVisibility();

  useEffect(() => {
    if (isVisible) {
      console.log('页面变为可见');
    } else {
      console.log('页面变为不可见');
    }
  }, [isVisible]);

  return <div>当前页面 {isVisible ? '可见' : '不可见'}</div>;
}

解析：

• document.visibilityState 可取值为 'visible'、'hidden'、'prerender' 等，而 document.hidden 是一个布尔值，表示页面是否隐藏。
• 通过监听 visibilitychange 事件，可以在用户切换标签页、最小化窗口等操作时获知页面可见性变化。
• 自定义 Hook 封装了状态逻辑和副作用，使组件逻辑更清晰、可复用。
• 注意在 useEffect 中返回清理函数，防止内存泄漏和重复监听。

该方案兼容现代浏览器（包括 Chrome、Firefox、Safari 和 Edge），适合用于暂停视频播放、停止轮询、节省资源等场景。