如何为多次实例化的Tooltip组件仅添加一次Esc键事件监听器？

能不能检测window是否已监听该事件？ #

不行，浏览器没有提供直接的API来查询window上绑定了哪些特定的事件监听器——这些监听器是浏览器内部存储的，对外不暴露，所以没法直接判断removeTooltip这个回调是不是已经被绑定到keydown事件上了。

只添加一次事件监听器的最佳方案 #

下面给你几种实用的实现方式：

1. 用全局计数控制监听的增删 #

在组件外部定义一个全局变量统计Tooltip实例的数量，只有第一个实例挂载时加监听，最后一个实例卸载时移除监听：

// 组件外定义全局计数，统计Tooltip实例数
let tooltipInstanceCount = 0;

const Tooltip = () => {
  const [isOpen, setIsOpen] = useState(false);

  // 全局Esc监听回调，触发时通知所有Tooltip关闭
  const handleGlobalEsc = (e) => {
    if (e.key === 'Escape') {
      window.dispatchEvent(new CustomEvent('closeAllTooltips'));
    }
  };

  useEffect(() => {
    tooltipInstanceCount++;
    // 只有第一个实例挂载时，添加全局监听
    if (tooltipInstanceCount === 1) {
      window.addEventListener('keydown', handleGlobalEsc);
    }
    // 每个Tooltip实例监听自定义关闭事件
    const handleClose = () => setIsOpen(false);
    window.addEventListener('closeAllTooltips', handleClose);

    return () => {
      tooltipInstanceCount--;
      // 最后一个实例卸载时，移除全局监听
      if (tooltipInstanceCount === 0) {
        window.removeEventListener('keydown', handleGlobalEsc);
      }
      window.removeEventListener('closeAllTooltips', handleClose);
    };
  }, []);

  // 组件其他逻辑：比如打开/关闭Tooltip的触发逻辑
  return (
    <div>
      <button onClick={() => setIsOpen(true)}>显示提示</button>
      {isOpen && <div className="tooltip-content">这里是提示内容</div>}
    </div>
  );
};

2. 用React Context统一管理 #

在顶层组件添加一次全局Esc监听，所有Tooltip通过上下文接收关闭指令，这种方式更符合React的状态管理思路：

// 创建Tooltip上下文，统一管理关闭逻辑
import { createContext, useContext, useEffect, useState } from 'react';

const TooltipContext = createContext();

// 上下文提供者，在App或者顶层组件中使用
export const TooltipProvider = ({ children }) => {
  useEffect(() => {
    const handleEsc = (e) => {
      if (e.key === 'Escape') {
        // 触发自定义事件，通知所有Tooltip关闭
        window.dispatchEvent(new CustomEvent('closeAllTooltips'));
      }
    };
    window.addEventListener('keydown', handleEsc);
    return () => window.removeEventListener('keydown', handleEsc);
  }, []);

  return (
    <TooltipContext.Provider value={{}}>
      {children}
    </TooltipContext.Provider>
  );
};

// Tooltip组件实现
const Tooltip = () => {
  const [isOpen, setIsOpen] = useState(false);

  useEffect(() => {
    const handleClose = () => setIsOpen(false);
    window.addEventListener('closeAllTooltips', handleClose);
    return () => window.removeEventListener('closeAllTooltips', handleClose);
  }, []);

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>打开提示</button>
      {isOpen && <div className="tooltip">提示文本</div>}
    </div>
  );
};

3. 封装自定义Hook复用全局监听 #

把全局Esc监听逻辑封装成自定义Hook，确保只添加一次监听：

import { useEffect, useState } from 'react';

// 自定义Hook：全局Esc监听，确保只绑定一次
const useGlobalEsc = (onEsc) => {
  useEffect(() => {
    // 用全局变量标记是否已添加监听
    if (!window._hasEscListener) {
      const handleEsc = (e) => {
        if (e.key === 'Escape') {
          onEsc();
        }
      };
      window.addEventListener('keydown', handleEsc);
      window._hasEscListener = true;
      // 存储回调，方便后续移除
      window._escHandler = handleEsc;
    }

    // 可选：如果需要在没有组件使用该Hook时移除监听，可以结合计数逻辑
    // 这里简化处理，你可以根据需求添加计数
    return () => {
      // 比如当所有使用该Hook的组件都卸载时，移除监听
      // 可以参考第一种方案的计数逻辑
    };
  }, [onEsc]);
};

// 在Tooltip组件中使用
const Tooltip = () => {
  const [isOpen, setIsOpen] = useState(false);

  // 每次Esc触发时，关闭当前Tooltip
  useGlobalEsc(() => setIsOpen(false));

  // 或者触发全局关闭事件，让所有Tooltip响应
  // useGlobalEsc(() => window.dispatchEvent(new CustomEvent('closeAllTooltips')));

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>显示提示</button>
      {isOpen && <div className="tooltip">提示内容</div>}
    </div>
  );
};

注意点 #

• 不管用哪种方案，都要记得在合适的时机移除事件监听器，避免内存泄漏。
• 如果是SSR场景（比如Next.js），要先判断typeof window !== 'undefined'再操作全局变量，避免报错。

内容的提问来源于stack exchange，提问作者Michael Lynch