如何在Electron中仅在所有React组件就绪后向其发送事件？

问题根因 #

主进程dom-ready触发时机早于React组件挂载执行useEffect注册监听器的时机，事件触发时没有对应监听器接收，自然就会丢失。且dom-ready仅代表原生DOM加载完成，此时React组件树（尤其是懒加载、路由对应的组件）大概率还未完成挂载，即使更换其他主进程侧的DOM事件，也很难和React组件的挂载时机完全对齐。

推荐解决方案 #

方案1：主动拉取（最稳妥，无时序问题） #

放弃主进程主动推送的逻辑，改为渲染层组件初始化完成后主动向主进程请求数据，完全规避时序差问题。

• 主进程代码修改：

const { ipcMain } = require('electron');
// 把原有回调形式的dao方法包装为Promise
const getIncomesPromise = () => new Promise((resolve) => {
  dao.getIncomes(data => resolve(data));
});

// 注册数据查询处理逻辑
ipcMain.handle('fetch-income-data', async () => {
  return await getIncomesPromise();
});

• React组件代码修改：

useEffect(() => {
  const fetchData = async () => {
    const data = await ipcRenderer.invoke('fetch-income-data');
    // 此处写你的业务逻辑处理data
  };
  fetchData();
}, []);

方案2：渲染层就绪后再触发推送 #

如果需要保留推送逻辑，改为等渲染层主动通知就绪后，主进程再发送数据。

• 主进程代码修改：

const { ipcMain } = require('electron');
let incomeDataCache = null;
// 提前查询数据做缓存，避免重复查询数据库
dao.getIncomes(data => {
  incomeDataCache = data;
});

// 监听渲染层组件就绪事件
ipcMain.on('renderer-component-ready', (event) => {
  if (incomeDataCache) {
    event.sender.send('income-data', incomeDataCache);
  } else {
    // 若数据还未查询完成，等查询结束后再发送
    dao.getIncomes(data => {
      event.sender.send('income-data', data);
    });
  }
});

• React组件代码修改：

useEffect(() => {
  const handleIncomeData = (event, data) => {
    // 此处写你的业务逻辑
  };
  // 先注册监听器
  ipcRenderer.on('income-data', handleIncomeData);
  // 再通知主进程组件已就绪，可以发送数据
  ipcRenderer.send('renderer-component-ready');

  // 组件卸载时清理监听器，避免内存泄漏
  return () => {
    ipcRenderer.removeListener('income-data', handleIncomeData);
  };
}, []);

方案3：预加载脚本提前注册监听器缓存数据 #

如果不想调整主进程原有逻辑，可以通过preload脚本提前挂载监听器，把收到的数据存在全局缓存，组件初始化时优先读取缓存。

• preload.js代码：

const { ipcRenderer, contextBridge } = require('electron');
let incomeDataCache = null;
// 提前挂载监听器存储数据
ipcRenderer.on('income-data', (event, data) => {
  incomeDataCache = data;
});

contextBridge.exposeInMainWorld('electronAPI', {
  getIncomeData: (callback) => {
    // 已有缓存直接返回，无缓存则等待事件触发
    if (incomeDataCache) {
      callback(incomeDataCache);
    } else {
      ipcRenderer.once('income-data', (event, data) => callback(data));
    }
  }
});

• React组件代码修改：

useEffect(() => {
  window.electronAPI.getIncomeData((data) => {
    // 此处写你的业务逻辑
  });
}, []);

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