ReactJS中实现浏览器标签页焦点监听：Page Visibility API使用及回调注册

嘿，这个需求我之前刚好实现过，用Page Visibility API在React里监听标签页的显示/隐藏状态完全没问题！下面给你详细讲下两种组件类型的实现方式，还有注册回调的最佳时机：

核心原理先了解下 #

Page Visibility API主要靠两个核心点工作：

• visibilitychange事件：当标签页的可见状态变化时触发
• document.hidden属性：布尔值，直接判断当前标签页是否处于隐藏状态

类组件实现方式 #

在类组件中，我们需要在组件挂载完成后注册事件监听，在组件卸载前移除监听，避免内存泄漏。对应的生命周期方法就是componentDidMount和componentWillUnmount：

import React, { Component } from 'react';

class TabVisibilityWatcher extends Component {
  componentDidMount() {
    // 组件挂载后，给document添加visibilitychange事件监听
    document.addEventListener('visibilitychange', this.handleTabVisibility);
  }

  componentWillUnmount() {
    // 组件卸载前，移除事件监听，防止内存泄漏
    document.removeEventListener('visibilitychange', this.handleTabVisibility);
  }

  handleTabVisibility = () => {
    if (document.hidden) {
      // 标签页被隐藏时的回调逻辑
      console.log('用户切换走了，标签页已隐藏');
      // 这里可以写你的业务代码：比如暂停视频播放、停止定时接口请求等
    } else {
      // 标签页重新获得焦点时的回调逻辑
      console.log('用户切回来了，标签页已显示');
      // 比如恢复视频播放、重新拉取最新数据等
    }
  };

  render() {
    return <div>我是一个会监听标签页状态的组件</div>;
  }
}

export default TabVisibilityWatcher;

函数组件实现方式 #

如果是用React Hooks的函数组件，我们可以用useEffect钩子来模拟类组件的生命周期，空依赖数组的useEffect会在组件挂载时执行一次，返回的清理函数会在组件卸载时执行：

import React, { useEffect } from 'react';

const TabVisibilityWatcher = () => {
  const handleTabVisibility = () => {
    if (document.hidden) {
      console.log('标签页已隐藏，执行隐藏逻辑');
      // 你的业务回调代码
    } else {
      console.log('标签页已显示，执行显示逻辑');
      // 你的业务回调代码
    }
  };

  useEffect(() => {
    // 挂载时添加事件监听
    document.addEventListener('visibilitychange', handleTabVisibility);

    // 返回清理函数，组件卸载时移除监听
    return () => {
      document.removeEventListener('visibilitychange', handleTabVisibility);
    };
  }, []); // 空依赖数组确保只执行一次挂载/卸载逻辑

  return <div>我是函数式的标签页状态监听组件</div>;
};

export default TabVisibilityWatcher;

额外注意事项 #

1. 兼容性处理：如果需要兼容一些老版本浏览器（比如旧版Chrome、Firefox），可以加上浏览器前缀的事件和属性，比如webkitvisibilitychange、mozvisibilitychange，还有document.webkitHidden、document.mozHidden，不过现在主流浏览器都已经支持标准写法了，大部分场景下不需要额外处理。
2. 避免重复注册：不管是类组件还是函数组件，一定要确保只注册一次事件监听，不然会导致回调多次触发，影响性能。

内容的提问来源于stack exchange，提问作者Pravesh Jain