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

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

回答：
可以使用 document.visibilityState 和 visibilitychange 事件，封装成一个自定义 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>
  );
}

解析：

• document.hidden 是一个布尔值，表示页面是否处于后台（不可见）。
• document.visibilityState 返回 'visible'、'hidden' 或 'prerender' 等状态。
• visibilitychange 事件在用户切换标签页、最小化窗口等操作时触发。
• 通过 useEffect 添加和清理事件监听器，确保组件卸载时不会内存泄漏。
• 自定义 Hook 封装了状态逻辑，便于在多个组件中复用。