如何在 React 中实现一个自定义 Hook 来监听页面是否可见（即用户是否切换到了其他标签页或最小化了浏览器）？

如何在 React 中实现一个自定义 Hook 来监听页面是否可见（即用户是否切换到了其他标签页或最小化了浏览器）？

回答：
可以使用浏览器的 Page Visibility API 结合 React 的 useState 和 useEffect 来创建一个自定义 Hook，例如 usePageVisibility。

示例代码：

import { useState, useEffect } from 'react';

function usePageVisibility() {
  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 = usePageVisibility();

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

解析：

• Page Visibility API 提供了 document.hidden 属性和 visibilitychange 事件，用于检测页面是否对用户可见。
• 自定义 Hook usePageVisibility 封装了该逻辑，通过 useEffect 添加和清理事件监听器。
• 初始状态设为 !document.hidden，确保组件首次渲染时获取正确的可见性状态。
• 该 Hook 返回一个布尔值，便于在组件中响应页面可见性变化，比如暂停视频播放、停止轮询等场景。