如何移除Electron中React组件通过preload.js创建的IPC事件监听器

解决方案 #

要解决监听器泄漏的问题，需要分两步调整代码：

第一步：修改preload.js，支持监听器注销

原来的receive方法每次调用都会生成一个匿名包裹函数传给ipcRenderer.on，这个匿名函数没有暴露给渲染层，所以外部没法直接用来注销监听器。我们可以调整receive方法，让它返回一个可执行的清理函数，调用这个函数就可以移除对应的监听器：

const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('api', {
    send: (channel, data) => {
        // Whitelist channels
        let validChannels = ['toMain'];
        if (validChannels.includes(channel)) {
            ipcRenderer.send(channel, data);
        }
    },
    receive: (channel, func) => {
        let validChannels = ['fromMain'];
        if (validChannels.includes(channel)) {
            // 存储包裹后的回调引用，后续注销需要用到
            const wrappedCallback = (event, ...args) => func(...args);
            ipcRenderer.on(channel, wrappedCallback);
            // 返回清理函数，调用即可移除当前注册的监听器
            return () => ipcRenderer.removeListener(channel, wrappedCallback);
        }
        // 非法通道返回空函数，避免调用时报错
        return () => {};
    }
});

如果需要批量移除某个通道的所有监听器，也可以额外在api里暴露removeAllReceiveListener方法，内部调用ipcRenderer.removeAllListeners(channel)即可，注意也要加通道白名单校验。

第二步：调整React组件写法，避免重复注册+正确执行清理

你当前的代码存在一个明显错误：直接在组件顶层作用域调用window.api.receive，组件每次重渲染都会执行这行代码，会反复新增监听器，这部分逻辑必须移到useEffect里。
之后在useEffect里拿到receive返回的清理函数，放在销毁回调里执行即可：

import { useEffect } from 'react';

const ReactComponent = () => {
    const exampleFunction = () => {
        window.api.send('toMain');
    };

    useEffect(() => {
        exampleFunction();

        // 另一个IPC调用
        window.api.send('toMain', ['example']);
        
        // 注册监听器，拿到对应的清理函数
        const removeFirstListener = window.api.receive('fromMain', function (data) {
            // 处理data...
        });
        const removeSecondListener = window.api.receive('fromMain', function (data) {
            // 处理data...
        });

        // 组件销毁时执行清理，移除所有注册的监听器
        return () => {
            removeFirstListener();
            removeSecondListener();
        };
    }, []);


    return (
        // JSX
    );
};

export default ReactComponent;

调整后不需要再用_isMounted标记判断组件是否挂载，因为组件销毁时监听器已经被移除，不会再触发回调。

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