监听页面可见性变化，并动态修改网页标题（react版）visibilitychange 事件

当用户离开当前页面，会动态修改title

visibilitychange 事件

核心是跟踪 页面是否处于用户可见状态，常见场景包括：

• 用户从当前标签页切换到其他标签页
• 用户从其他标签页切回当前标签页
• 用户最小化浏览器窗口
• 用户关闭浏览器窗口（关闭前触发）

关键属性：document.visibilityState
在事件处理函数中，通过 document.visibilityState 可以获取当前页面的可见状态，有三个可能的值：

• visible：页面处于可见状态（用户正在查看当前页面）
• hidden：页面处于隐藏状态（用户切换到了其他标签页或最小化了窗口）
• prerender：页面正在预渲染（通常不可见，部分浏览器支持）

// 创建一个ref用于存储定时器ID，初始值为-1（表示无活跃定时器）
const timer = useRef(-1)

// 使用useEffect设置副作用，空依赖数组表示只在组件挂载时执行一次
useEffect(() => {
  // 保存页面初始标题，用于后续恢复
  const originalTitle = document.title

  // 定义页面可见性变化的处理函数
  const handleVisibilityChange = () => {
    // 判断页面是否从隐藏变为可见（用户回到当前页面）
    if (document.visibilityState === 'visible') {
      // 修改标题为欢迎回来的文案
      document.title = '(⑅˃◡˂⑅)你回来啦'
      
      // 如果存在活跃定时器，先清除它（避免多个定时器冲突）
      if (timer.current) clearTimeout(timer.current)
      
      // 设置3秒后自动恢复原始标题的定时器，并保存定时器ID
      timer.current = window.setTimeout(() => {
        document.title = originalTitle
      }, 3000)
    } else {
      // 页面从可见变为隐藏（用户离开当前页面）
      
      // 清除可能存在的活跃定时器
      if (timer.current) clearTimeout(timer.current)
      
      // 修改标题为挽留用户的文案
      document.title = '你别走吖(⁎⁍̴̛ᴗ⁍̴̛⁎)'
    }
  }

  // 给document添加visibilitychange事件监听，触发时执行处理函数
  document.addEventListener('visibilitychange', handleVisibilityChange)

  // 返回清理函数，在组件卸载时执行
  return () => {
    // 移除事件监听，防止内存泄漏
    document.removeEventListener('visibilitychange', handleVisibilityChange)
    // 恢复页面原始标题
    document.title = originalTitle
  }
}, []) // 空依赖数组：确保effect只在挂载和卸载时执行```