Electron不得不知的几个基础理论知识点

经过前面对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实现的产品

image.png

说实话，当我看到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的区别

image.png

使用IPC进行通讯

• renderer给main发消息
  ipcRenderer.send(channel, ...args)

• main接收消息
  ipcMain.on(channel, listener)

• main给renderer回复消息

1. 可以直接通过接收消息回调中的event直接reply
   event.reply(channel, ...args)

2. 也可以通过创建的window对象发送消息
   mainWindow.webContents.send(channel, ...args)

• renderer接收消息
  ipcRenderer.on(channel, listener)

上代码实践一下，场景为：
在页面中有个查看版本号的按钮，点击该按钮获取目前应用的版本号

应用的版本号获取方法为app.getVersion()，但是通过上文的API图片中可以得知在renderer中是无法直接拿到app对象的，因此我们交给main来做。

那么实现的思路就明确了：

1. 在renderer中点击按钮发送消息给main

2. 在main中接收到消息后把获取到的version发送给renderer

3. 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;