如何在 React 中实现一个自定义 Hook 来监听页面可见性变化（即页面是否处于后台或前台）？

如何在 React 中实现一个自定义 Hook 来监听页面可见性变化（即页面是否处于后台或前台）？

回答：
可以使用 useEffect 和 document.visibilityState API 创建一个自定义 Hook，例如 usePageVisibility，来监听页面可见性状态的变化。

代码示例：

import { useEffect, useState } 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 App() {
  const isVisible = usePageVisibility();

  return (
    <div>
      {isVisible ? '页面在前台' : '页面在后台'}
    </div>
  );
}

解析：

• document.hidden 是一个只读布尔值，表示页面是否处于隐藏状态（即切换到其他标签页或最小化浏览器）。
• visibilitychange 事件会在页面可见性状态发生变化时触发。
• 自定义 Hook 将该逻辑封装起来，使得组件可以轻松复用页面可见性状态。
• 在 useEffect 中添加事件监听器，并在组件卸载时通过返回函数移除监听器，避免内存泄漏。
• 初始状态设置为 !document.hidden，确保首次渲染时状态准确。

该 Hook 特别适用于需要暂停视频播放、停止轮询或暂停动画等场景，以提升性能和用户体验。