如何防止Electron中ipcRenderer监听器重复注册触发多次？

问题根因 #

你每次点击按钮调用mainToRenderer方法时，都会给async_response通道新增一个持久化的ipc监听器，这类监听器默认不会自动销毁，点击n次就会注册n个重复监听器。主进程每次返回响应时，所有已注册的监听器都会同时触发，所以会出现重复打印pong的问题。
你之前修改后无输出的原因是：刚注册完监听器就立刻执行了removeAllListeners，监听器在主进程响应返回前就被销毁，自然收不到任何消息。

解决方案 #

方案1：使用Electron官方推荐的invoke/handle请求响应模式（最优）

这套API是Electron专门为单次请求-响应场景设计的，天然不需要手动管理监听器，无需担心重复注册问题：

1. 修改main.js：

// main.js
// 把原有ipcMain.on替换为handle
ipcMain.handle('getPong', async (e, msg) => {
    console.log(msg); // 打印ping
    return 'pong';
});

2. 修改preload.js：

// preload.js
contextBridge.exposeInMainWorld('api', {
    myApi: {
        getPong: (msg) => ipcRenderer.invoke('getPong', msg)
    }
});

3. 修改App.js的点击逻辑：

// App.js
const App = () => {
    const buttonHandler = async () => {
        const pong = await api.myApi.getPong('ping');
        console.log(pong); // 每次点击仅打印1次pong
    };
    return (
        <div>
          <Button cb={buttonHandler} />
        </div>
    );
};

方案2：继续使用send/on模式，用once替代on

如果不想改现有通信架构，只需要把ipcRenderer.on替换为ipcRenderer.once，once注册的监听器触发一次后会自动销毁，不会累加：

// preload.js 仅修改mainToRenderer方法
mainToRenderer: () => {
    ipcRenderer.once('async_response', (e, msg) => {
        console.log(msg);
    });
},

方案3：全局注册单个监听器，生命周期与组件绑定

如果需要长期监听同一个通道的消息，不要在点击事件中注册监听器，放到组件初始化钩子中注册，卸载时销毁：

1. 修改preload.js，暴露注册和销毁监听器的方法：

// preload.js
contextBridge.exposeInMainWorld('api', {
    myApi: {
        rendererToMain: () => {
            ipcRenderer.send('async', 'ping');
        },
        onAsyncResponse: (callback) => {
            ipcRenderer.on('async_response', callback);
        },
        offAsyncResponse: (callback) => {
            ipcRenderer.removeListener('async_response', callback);
        },
    },
});

2. 修改App.js，在useEffect中管理监听器生命周期：

// App.js
import { useEffect } from 'react';
const App = () => {
    useEffect(() => {
        // 组件挂载时仅注册1次监听器
        const handleResponse = (e, msg) => {
            console.log(msg);
        };
        api.myApi.onAsyncResponse(handleResponse);
        // 组件卸载时销毁监听器，避免内存泄漏
        return () => api.myApi.offAsyncResponse(handleResponse);
    }, []);

    const buttonHandler = () => {
        api.myApi.rendererToMain();
    };

    return (
        <div>
          <Button cb={buttonHandler} />
        </div>
    );
};

内容的提问来源于stack exchange，提问作者Brandon Mulas