异常教程

electron react（手把手讲解）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言：Electron与React的完美邂逅

在现代前端开发领域，Electron和React是两个极具影响力的工具。Electron作为跨平台桌面应用框架，让开发者能够用Web技术（HTML、CSS、JavaScript）构建功能丰富的桌面应用；React则凭借其组件化、声明式语法和高效的状态管理能力，成为构建复杂用户界面的首选库。当这两个技术相遇时，它们的结合不仅降低了桌面应用开发的门槛，还为开发者提供了无限可能。本文将从基础概念出发，逐步解析如何用Electron和React构建一个完整的桌面应用，并通过实际案例展示其开发流程。

什么是Electron？

核心概念与工作原理

Electron的核心是将**主进程（Main Process）和渲染进程（Renderer Process）**结合。

  • 主进程：负责管理应用的全局行为，如窗口创建、系统事件监听等。它使用Node.js运行，可以直接调用操作系统原生API。
  • 渲染进程：负责界面的展示和交互，基于Chromium浏览器内核运行。它与浏览器中的网页环境类似，可以使用HTML、CSS和JavaScript。

比喻：如果把Electron比作一座桥梁，主进程是桥梁的“承重结构”，确保整体稳定；渲染进程则是“路面”，承载用户的实际交互。

Electron的优势

  • 跨平台：一次编写，可在Windows、macOS、Linux上运行。
  • Web技术栈：开发者无需学习原生开发语言（如Java、Swift），即可构建桌面应用。
  • 丰富的插件生态：通过npm包管理，可快速集成功能（如文件操作、系统通知等）。

什么是React？

核心思想与设计哲学

React以组件化开发为核心，通过声明式语法描述UI，极大简化了状态管理和界面更新流程。其核心概念包括：

  • 组件（Component）：UI的最小可复用单元，如按钮、表单、导航栏等。
  • 状态（State）：驱动组件行为的数据，通过useState等钩子函数管理。
  • 虚拟DOM（Virtual DOM）：React维护的轻量级DOM副本，通过对比差异减少真实DOM的更新次数，提升性能。

比喻：如果把React比作一位建筑师，组件是他的“砖块”，状态是“蓝图”，而虚拟DOM则是“设计图的优化版本”，确保建筑（界面）高效建造。

React的优势

  • 可维护性：组件化设计使代码结构清晰，便于团队协作。
  • 高效更新：虚拟DOM减少了直接操作DOM的性能损耗。
  • 生态丰富：配合React Router、Redux等库，可构建复杂应用。

如何将Electron与React结合？

开发环境搭建

步骤1：创建Electron项目

首先通过Electron的官方CLI工具快速初始化项目：

npm init electron-app my-electron-app
cd my-electron-app

步骤2：集成React环境

在Electron项目中添加React和相关依赖：

npm install react react-dom @types/react @types/react-dom --save

步骤3：配置Webpack（可选）

若需更复杂的构建流程（如代码分割、热更新），可使用Webpack：

npm install webpack webpack-cli html-webpack-plugin --save-dev

并编写webpack.config.js配置文件：

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/renderer/index.tsx',
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/renderer/index.html',
    }),
  ],
};

入门案例：构建一个计数器应用

案例目标

创建一个简单的桌面应用，包含以下功能：

  1. 显示当前计数值。
  2. 通过按钮增加或减少计数值。
  3. 主窗口支持最小化、最大化、关闭操作。

实现步骤

步骤1：编写React组件

在src/renderer目录中创建Counter.tsx：

import { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <div style={{ padding: '20px' }}>
      <h1>当前计数：{count}</h1>
      <button onClick={() => setCount(count - 1)}>减少</button>
      <button onClick={() => setCount(count + 1)}>增加</button>
    </div>
  );
};

export default Counter;

步骤2：配置Electron主进程

在src/main/index.ts中创建窗口并加载React界面：

import { app, BrowserWindow } from 'electron';

let mainWindow: BrowserWindow | null = null;

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    width: 400,
    height: 300,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
    },
  });

  mainWindow.loadFile('dist/index.html'); // 加载Webpack打包后的HTML
});

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

步骤3：运行应用

通过以下命令启动开发服务器：

npm start

进阶技巧：优化Electron-React应用

1. 打包与分发

使用Electron Builder工具将应用打包为可执行文件：

npm install electron-builder --save-dev

在package.json中添加构建配置：

"build": {
  "appId": "com.example.myapp",
  "productName": "CounterApp",
  "directories": {
    "output": "release"
  },
  "mac": {
    "category": "public.app-category.productivity"
  }
}

2. 性能优化

  • 代码分割：通过Webpack的SplitChunksPlugin分割代码块，减少初始加载时间。
  • 预加载脚本（Preload Script）：在Electron中，通过预加载脚本安全地暴露Node.js API给渲染进程： 
    // preload.js
const contextBridge = require('electron').contextBridge;
const { ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('electronAPI', {
  send: (channel, data) => {
    ipcRenderer.send(channel, data);
  },
  on: (channel, func) => {
    ipcRenderer.on(channel, (event, ...args) => func(...args));
  },
});

3. 安全性增强

  • 隔离渲染进程：通过设置contextIsolation: true和nodeIntegration: false，避免渲染进程直接访问Node.js API。
  • CSP策略：在HTML中添加内容安全策略（CSP），防止XSS攻击： 
    <meta http-equiv="Content-Security-Policy" content="script-src 'self'">

Electron-React的典型应用场景

1. 内部工具与企业级应用

例如：

  • 数据分析仪表盘：结合React的可视化库（如D3.js）和Electron的本地文件读取能力，构建数据分析工具。
  • 工厂自动化控制面板：通过Electron调用串口API，React负责界面交互。

2. 跨平台桌面应用

  • 开发工具：如代码编辑器、设计软件（类似Figma Desktop）。
  • 本地媒体播放器：集成React的UI组件与Electron的媒体库访问权限。

3. 混合开发场景

  • 与原生模块结合：通过Electron的ipcMain和ipcRenderer，React界面可与C++/Java等原生模块通信。

常见问题与解决方案

问题1：渲染进程无法调用Node.js模块

原因：Electron默认禁用渲染进程中的Node.js集成，以避免安全风险。
解决方案：

  1. 在主进程中为窗口启用Node.js： 
    mainWindow.webPreferences.nodeIntegration = true;
  2. 使用预加载脚本安全暴露API（推荐）。

问题2：界面更新不及时或卡顿

原因：频繁操作DOM或未合理管理状态。
解决方案：

  • 使用React的useMemo和useCallback优化渲染。
  • 减少直接操作Electron的DOM API，优先通过React组件更新界面。

结论：Electron-React的未来与展望

Electron和React的结合，为开发者提供了一条高效、灵活的桌面应用开发路径。随着Electron对WebGPU的支持增强，以及React Server Components的逐步成熟，未来这类应用的性能和功能将更加接近原生应用。对于初学者而言，从简单的计数器案例开始，逐步尝试集成数据库、网络请求或原生API，是掌握Electron-React开发的最佳路径。

无论你是想打造个人生产力工具，还是为企业开发复杂的企业级应用，Electron-React的组合都能为你提供强大的技术支持。现在，是时候动手尝试，构建属于你的第一款桌面应用了！

最新发布

查看更多文章