在 Electron 应用程序中单击菜单后发出事件时发生内存泄漏

Question

我目前正在使用 Electron 和 React 构建一个桌面应用程序。

现在我正在添加一个菜单功能，用于切换应用程序的暗模式。在我的 React 应用程序中，我使用了一个切换暗模式的钩子。我想在用户点击菜单项后立即触发 React 钩子。

这是我到目前为止所做的：

menu.ts：

buildDefaultTemplate() {
    const templateDefault = [
      {
        label: '&File',
        submenu: [
          {
            label: '&Open',
            accelerator: 'Ctrl+O',
          },
          {
            label: '&Toggle Dark Mode',
            accelerator: 'Ctrl+T',
            click: () => {
              this.mainWindow.webContents.send('toggle-dark-mode', {
                message: 'Toggle successful!',
              });
            },
          },
          {
            label: '&Close',
            accelerator: 'Ctrl+W',
            click: () => {
              this.mainWindow.close();
            },
          },
        ],
      },
]

Dashboard.tsx：

export default function Dashboard(): ReactElement {
  const { username } = os.userInfo();
  const { toggleColorMode } = useColorMode();

  useEffect(() => {
    ipcRenderer.on('toggle-dark-mode', () => {
      toggleColorMode();
    });
  }, [toggleColorMode]);

切换它可以正常工作。但是在多次重复该操作后，我收到了以下警告：MaxListenersExceededWarning：检测到可能的 EventEmitter 内存泄漏。 [EventEmitter] 添加了 11 个切换暗模式侦听器。使用emitter.setMaxListeners() 增加限制

我看过一个类似的帖子，但答案并不令人满意。那里的建议是简单地停止收听事件，我认为这在我的情况下会很困难。

我正在寻找一种在切换成功后取消订阅事件的方法。

Answer 1

在您启动 Electron 应用时尝试设置toggle-dark-mode 事件处理程序一次。

您的代码甚至不需要在 ready 事件中。