一、Electron 进程模型先捋清（通信前提）
Electron 本质是多进程架构：
主进程（Main Process）
Node 环境
负责窗口、系统能力、原生 API
渲染进程（Renderer Process）
浏览器环境（可选 Node）
负责 UI（React / Vue）
👉进程隔离 → 必须通信
二、Electron 通信方式总览（面试必背）
| 通信方式 | 适用场景 | 是否推荐 |
|---|---|---|
| ipcMain / ipcRenderer | 主进程 ↔ 渲染进程 | ⭐⭐⭐⭐⭐ |
| preload + contextBridge | 安全通信 | ⭐⭐⭐⭐⭐ |
| webContents.send | 主 → 指定渲染 | ⭐⭐⭐⭐ |
| BrowserWindow.webContents | 主控渲染 | ⭐⭐⭐ |
| MessageChannelMain | 多窗口/高并发 | ⭐⭐⭐ |
| remote（已废弃） | 早期同步调用 | ❌ |
| localStorage / IndexedDB | 同窗口共享 | ⭐⭐ |
| WebSocket / HTTP | 多实例/跨进程 | ⭐⭐⭐ |
三、ipc 通信（你问的重点）
1️⃣ ipcRenderer → ipcMain（渲染 → 主）
🔹 ipcRenderer.send（异步，无返回）
// renderer ipcRenderer.send('open-file', { type: 'txt' }) // main ipcMain.on('open-file', (event, args) => { console.log(args) })✅ 特点：
单向
不关心返回值
常用于通知、触发动作
🔹 ipcRenderer.invoke（异步 + 有返回，⭐推荐）
// renderer const result = await ipcRenderer.invoke('get-version') // main ipcMain.handle('get-version', async () => { return app.getVersion() })✅ 特点：
Promise 风格
支持 async / await
最推荐用法
📌 Electron 官方现在主推这个
2️⃣ ipcMain → ipcRenderer（主 → 渲染）
🔹 webContents.send
// main mainWindow.webContents.send('update-progress', 50) // renderer ipcRenderer.on('update-progress', (_, percent) => { console.log(percent) })✅ 场景：
主进程主动推送
下载进度 / 系统事件
3️⃣ ipcRenderer.on（监听）
ipcRenderer.on('channel', (event, data) => {})⚠️ 注意：
页面销毁要
removeListener否则内存泄漏
四、preload + contextBridge（安全通信，必会）
为什么要 preload？
避免
nodeIntegration: true防 XSS 直接拿 Node 权限
preload.js
const { contextBridge, ipcRenderer } = require('electron') contextBridge.exposeInMainWorld('electronAPI', { getVersion: () => ipcRenderer.invoke('get-version'), onUpdate: (cb) => ipcRenderer.on('update', cb) })renderer
window.electronAPI.getVersion()✅ 优点：
安全
可控
官方推荐
五、ipc 的完整分类总结（你要的“ipc 都有哪些”）
📌 ipcRenderer 提供的方法
send(channel, ...args)sendSync(channel, ...args)❌（不推荐）invoke(channel, ...args)⭐on(channel, listener)once(channel, listener)removeListenerremoveAllListeners
📌 ipcMain 提供的方法
on(channel, listener)once(channel, listener)handle(channel, handler)⭐removeHandler(channel)
六、其他 Electron 通信方式（扩展）
1️⃣ MessageChannelMain（多窗口通信）
const { port1, port2 } = new MessageChannelMain()适合：
多窗口
大数据传输
解耦 ipc channel
2️⃣ 渲染进程之间通信
❌不能直接通信
常见做法：
渲染 A → 主 → 渲染 B
MessageChannelMain
3️⃣ Web 技术通信
WebSocket
HTTP
BroadcastChannel（同源）
适合：
多实例
多 Electron App
七、面试高频“加分点”
你可以这样说 👇：
“现在 Electron 官方推荐用
ipcRenderer.invoke + ipcMain.handle，
配合preload + contextBridge做安全通信，
避免开启 nodeIntegration 和 remote。”
面试官基本就点头了 👍
八、给你的实战建议（结合你前端经验）
业务调用：
invoke / handle事件通知：
send / on统一封装：所有 ipc 放
preload禁用 remote
