一、为什么选择React+Electron？
如果你既想用熟悉的Web技术开发桌面应用，又希望保持原生应用的体验，这个组合就是绝配。React负责构建漂亮的用户界面，Electron则把网页打包成可安装的桌面程序。就像用乐高搭积木，React是彩色积木块，Electron就是能让积木站稳的底座。
举个例子，VS Code、Slack这些知名软件都是这么做的。你完全可以用自己已经掌握的React知识，快速开发出专业级的跨平台应用（Windows/macOS/Linux都能用）。
二、环境搭建三步走
首先确保你电脑上有Node.js（建议16.x以上版本），然后跟着下面操作：
# 技术栈：Node.js + React + Electron
# 1. 创建React项目
npx create-react-app my-electron-app
cd my-electron-app
# 2. 添加Electron依赖
npm install electron electron-builder --save-dev
# 3. 安装工具链
npm install concurrently wait-on --save-dev
接着在项目根目录新建electron.js文件：
// 技术栈：Electron主进程配置
const { app, BrowserWindow } = require('electron')
let mainWindow
function createWindow() {
// 创建浏览器窗口，建议设置默认宽高
mainWindow = new BrowserWindow({
width: 1200,
height: 800,
webPreferences: {
nodeIntegration: true // 允许页面使用Node.js API
}
})
// 加载React开发服务器地址（开发环境）
mainWindow.loadURL('http://localhost:3000')
// 生产环境应该加载打包后的文件
// mainWindow.loadFile('build/index.html')
}
// 应用就绪后创建窗口
app.whenReady().then(createWindow)
三、让两个技术完美配合
关键是要处理好开发和生产环境的差异。修改package.json：
{
"main": "electron.js",
"scripts": {
"start": "concurrently \"npm run start-react\" \"npm run start-electron\"",
"start-react": "react-scripts start",
"start-electron": "wait-on http://localhost:3000 && electron .",
"build": "react-scripts build && electron-builder"
}
}
现在运行npm start就能同时启动React开发服务器和Electron窗口。试试在React组件里调用Electron的API：
// 技术栈：React组件使用Electron API
import React from 'react';
function SystemInfo() {
const [platform, setPlatform] = React.useState('');
React.useEffect(() => {
// 通过window对象访问Electron的API
if (window.require) {
const { platform } = window.require('os');
setPlatform(platform());
}
}, []);
return <div>当前系统: {platform || '未知'}</div>;
}
四、打包发布实战教学
开发完成后，用electron-builder打包应用。先配置package.json：
{
"build": {
"appId": "com.example.myapp",
"files": [
"build/**/*",
"electron.js"
],
"win": {
"target": "nsis",
"icon": "public/icon.ico"
},
"mac": {
"target": "dmg",
"icon": "public/icon.png"
}
}
}
然后执行：
npm run build
这个命令会先打包React项目，再用Electron生成安装包。最终在dist文件夹里能找到.exe、.dmg等安装文件。
五、进阶技巧：进程通信
Electron的主进程和渲染进程（React）需要安全通信。推荐使用preload脚本：
// 技术栈：Electron预加载脚本
const { contextBridge, ipcRenderer } = require('electron')
// 安全地暴露API给渲染进程
contextBridge.exposeInMainWorld('electronAPI', {
openFile: () => ipcRenderer.invoke('dialog:openFile')
})
然后在主进程中处理：
// 技术栈：Electron主进程
ipcMain.handle('dialog:openFile', async () => {
const { filePaths } = await dialog.showOpenDialog({})
return filePaths[0]
})
React组件中这样调用：
function FileOpener() {
const [file, setFile] = React.useState(null)
const handleClick = async () => {
if (window.electronAPI) {
const path = await window.electronAPI.openFile()
setFile(path)
}
}
return (
<div>
<button onClick={handleClick}>选择文件</button>
{file && <div>已选择: {file}</div>}
</div>
)
}
六、常见问题解决方案
白屏问题：检查Electron是否加载了正确的URL，生产环境要用
loadFile加载build后的文件API调用失败：确保在preload脚本中正确暴露了API，并且使用了contextBridge保证安全
打包体积过大：可以配置排除不必要的依赖：
"build": {
"asar": true,
"files": ["!node_modules/${optionalDependencies}"]
}
- 样式异常：Electron默认禁用子像素抗锯齿，可以在创建窗口时启用：
new BrowserWindow({
webPreferences: {
textAreasAreResizable: true
}
})
七、技术选型分析
优势：
- 开发效率极高，复用Web技术栈
- 跨平台特性优秀
- 社区生态丰富，遇到问题容易找到解决方案
- 可以逐步迁移现有React项目
局限：
- 应用体积比原生应用大
- 性能敏感场景（如视频编辑）可能不够理想
- 某些系统级功能需要额外开发
适用场景：
- 企业级后台管理系统
- 需要快速迭代的工具类软件
- 已有Web版想扩展桌面端的项目
- 对原生特性要求不高的生产力工具
八、写给新手的建议
- 先从简单功能开始，比如做一个Markdown编辑器
- 善用Electron的文档，特别是安全最佳实践部分
- 打包配置很灵活，建议多尝试不同选项
- 考虑使用electron-updater实现自动更新
- 复杂的应用可以考虑状态管理工具（如Redux）
记住，调试Electron应用时，你可以像普通网页一样使用Chrome开发者工具（Ctrl+Shift+I调出），这对排查问题非常有帮助。
评论