Electron+React桌面应用无法响应Windows主题切换问题排查

核心问题点 #

1. useEffect未设置依赖数组且无清理逻辑：你的useEffect没有指定依赖项，会在组件每次渲染时重复绑定native-theme-changed事件，不仅造成冗余操作，还无法在组件卸载时清理监听器，引发内存泄漏。
2. 异步调用处理错误：getTheme里的ipcRenderer.invoke是异步操作，直接在useState初始化和setTheme中调用，会导致拿到的是Promise对象而非实际主题值，无法正确更新组件状态。
3. Preload脚本存在安全隐患与功能缺失：直接给window.ipcRenderer赋值原生实例违反Electron安全规范，且只提供事件绑定方法，未提供移除监听器的途径，无法配合React组件生命周期做清理。

修正后的代码 #

主React组件

const App: React.FC = function () {
    const [theme, setTheme] = React.useState<Theme>(customLightTheme);

    // 封装异步获取主题的逻辑
    const updateTheme = async () => {
        const isDarkMode = await window.ipcRenderer.invoke('should-use-dark-colors');
        setTheme(isDarkMode ? customDarkTheme : customLightTheme);
    };

    React.useEffect(() => {
        // 初始化时获取一次主题
        updateTheme();

        // 绑定主题变更事件
        const handleThemeChange = () => updateTheme();
        window.ipcRenderer.onNativeThemeChanged(handleThemeChange);

        // 组件卸载时清理监听器
        return () => {
            window.ipcRenderer.removeNativeThemeChangedListener(handleThemeChange);
        };
    }, []); // 空依赖数组确保只执行一次初始化与绑定

    return (
        <FluentProvider theme={theme}>
            {/* 你的组件内容 */}
        </FluentProvider>
    )
}

Preload.js

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

contextBridge.exposeInMainWorld('ipcRenderer', {
    invoke: (channel) => ipcRenderer.invoke(channel),
    onNativeThemeChanged: (callback) => ipcRenderer.on("native-theme-changed", callback),
    // 添加移除监听器的方法，用于组件清理
    removeNativeThemeChangedListener: (callback) => ipcRenderer.removeListener("native-theme-changed", callback)
});

// 移除不安全的全局赋值操作
// window.ipcRenderer = require('electron').ipcRenderer

Electron主进程代码（优化窗口存在性检查）

ipcMain.handle('should-use-dark-colors', function (event, ...args) {
    tray.setImage(getIcon())
    return nativeTheme.shouldUseDarkColors
})

nativeTheme.addListener("updated", function () {
    // 发送事件前确认窗口存在，避免报错
    if (mainWindow && mainWindow.webContents) {
        mainWindow.webContents.send('native-theme-changed')
    }
}) 

额外说明 #

• 异步IPC调用必须用await获取结果，不能直接将Promise赋值给状态。
• useEffect的清理函数是必要的，防止组件卸载后残留的监听器导致内存泄漏。
• 始终通过contextBridge暴露IPC方法，避免直接暴露原生Electron API，降低安全风险。

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