迹忆客 专注技术分享

要使用 React 检查浏览器选项卡是否具有焦点：

1. 为焦点和模糊事件添加事件侦听器。
2. 如果触发了 focus 事件，则选项卡具有焦点。
3. 如果触发了 blur 事件，则选项卡失去焦点。

import {useEffect, useState} from 'react';

export default function App() {
  const [tabHasFocus, setTabHasFocus] = useState(true);

  useEffect(() => {
    const handleFocus = () => {
      console.log('Tab has focus');
      setTabHasFocus(true);
    };

    const handleBlur = () => {
      console.log('Tab lost focus');
      setTabHasFocus(false);
    };

    window.addEventListener('focus', handleFocus);
    window.addEventListener('blur', handleBlur);

    return () => {
      window.removeEventListener('focus', handleFocus);
      window.removeEventListener('blur', handleBlur);
    };
  }, []);

  return (
    <div>
      {tabHasFocus ? (
        <h2>Tab has focus ✅</h2>
      ) : (
        <h2>Tab does not have focus ⛔️</h2>
      )}
    </div>
  );
}

我们初始化了一个状态变量来跟踪选项卡是否具有焦点。

我们将 true 传递给 useState 钩子，以指示选项卡在组件安装时获得焦点。

在我们的 useEffect 钩子中，我们为焦点和模糊事件添加了事件侦听器。 我们在 window 对象上添加了事件。

当标签接收到焦点时，触发 focus 事件。

当标签失去焦点时，触发 blur 事件。

我们从 useEffect 钩子返回了一个函数。 该函数将在组件卸载时调用。

在我们的清理函数中，我们使用 removeEventListener() 方法删除我们之前注册的事件监听器。

这有助于我们避免在应用程序中出现内存泄漏。