经过前面对Electron简短的接触，进行了以下几个理论知识点的总结，因为感觉如果事前先弄明白这几点的话，对接下来Electron的学习及使用将会大有裨益。
Electron是什么？
Electron 是一个由Github开发、使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架，它可以帮助你实现构建跨平台（Mac、Windows、Linux）的桌面应用程序。
Electron通过将Chromium和Node.js合并到同一个运行时环境中，并将其打包为Mac，Windows和Linux系统下的应用。
它在应用中运行Chromium浏览器，并负责处理应用与操作系统之间的复杂部分，你只需把精力放在你的应用的核心上即可。
Electron由Chromium和Node.js，加上各操作系统的Native API组成。
除了不同平台Native API不同以外，Node.js和Chromium都拥有跨平台的能力，这也是为什么Electron生来就能做跨平台的应用开发。
也就是说，只要你是一个能够写出Web网站的前端开发，那么你就可以使用Electron开发出一个跨平台的桌面应用程序。
基于Electron实现的产品
说实话，当我看到VSCode也是由Electron开发出来的后着实感觉很惊讶！
这么好用这么强大的编译器竟然是用Electron开发出来的？？？！！！
进程 Process 与 线程 Thread
进程与线程，这是两个很基础的概念了，就不写了。
放上两个老师的文章链接供以参考：
进程与线程的一个简单解释 - 阮一峰
进程和线程 - 廖雪峰
进程和线程之间的区别
- 内存使用：
进程之间的内存是独立的；
线程之间的内存是相互共享的。 - 通信机制：
进程之间很难互通，当然也有方法可以实现之间的互通（比如IPC）；
线程之间讯通方便快捷。 - 量级：
线程比进程更轻、创建更快、使用的资源更少。
Electron的多进程
Electron底层基于Chromium，Chrom的设计理念是基于多进程的，每个Tab都是一个独立的进程，称之为Renderer Process，有多少个Tab就有多少个Renderer Process。
另外还有一个，有且只有一个的主进程，称之为Main Process（浏览器整体的Window），它负责其他众多Renderer Process的创建、分配，还有其他众多整体上的控制。
因此如果有一个Tab崩溃的话，不会影响到其他的Tab，浏览器可以继续运行。
主进程和渲染进程的区别
主进程
- 可以使用和系统对接的Electron API 创建菜单、上传文件等
- 创建渲染进行Renderer Process
- 全面支持Node.js
- 只有一个，作为整个程序的入口点
渲染进程
- 可以有多个，每个对应一个窗口
- 每个都是一个单独的进程
- 全面支持Node.js和DOM API
- 可以使用一部分Electron提供的API
可以调用的API的区别
使用IPC进行通讯
renderer给main发消息
ipcRenderer.send(channel, ...args)main接收消息
ipcMain.on(channel, listener)-
- 可以直接通过接收消息回调中的event直接reply
event.reply(channel, ...args) - 也可以通过创建的window对象发送消息
mainWindow.webContents.send(channel, ...args)
- 可以直接通过接收消息回调中的event直接reply
renderer接收消息
ipcRenderer.on(channel, listener)
上代码实践一下，场景为：
在页面中有个查看版本号的按钮，点击该按钮获取目前应用的版本号
应用的版本号获取方法为app.getVersion()，但是通过上文的API图片中可以得知在renderer中是无法直接拿到app对象的，因此我们交给main来做。
那么实现的思路就明确了：
- 在renderer中点击按钮发送消息给main
- 在main中接收到消息后把获取到的version发送给renderer
- renderer接收到version后显示出来
renderer文件
import { ipcRenderer } from 'electron';
import { useEffect, useState } from 'react';
function App() {
const [version, setVersion] = useState('');
const receivedVersion = (event, version) => {
console.log('获取到版本号：', version);
setVersion(version);
}
useEffect(() => {
ipcRenderer.on('replyVersion', receivedVersion)
return () => {
ipcRenderer.removeListener('replyVersion', receivedVersion)
}
}, [])
return (
<div>
<div>Version: {version}</div>
<button onClick={() => ipcRenderer.send('getVersion', 'I want to get app version')}>
发送消息给Main Process
</button>
</div>
);
}
export default App;
main文件
const { app, BrowserWindow, ipcMain } = require('electron')
let mainWindow
app.on('ready', () => {
mainWindow = new BrowserWindow(config)
// ...
ipcMain.on('getVersion', (event, arg) => {
console.log('接收到请求获取版本号的消息：', arg);
event.reply('replyVersion', app.getVersion())
// 通过mainWindow也可以发送消息给renderer
// mainWindow.webContents.send('replyVersion', app.getVersion())
})
})
使用remote实现跨进程通讯
可以在renderer中通过remote直接调用主进程中的方法
比如上面的例子中，我们可以直接通过remote拿到app从而获得version信息，省略了大量来回通讯的逻辑代码。
import { remote } from 'electron';
function App() {
const { app } = remote;
return (
<div>
<div>Version: {app.getVersion()}</div>
</div>
);
}
export default App;
