修改Electron应用的React代码后页面无变化是什么原因，如何解决？

问题原因 #

• 你修改的是React源码文件，Electron默认加载的是提前打包好的静态资源（存放在build/dist等目录下），未重新执行React构建命令的话，打包产物不会同步你的修改
• Electron存在内置资源缓存机制，即使你更新了打包产物，旧的缓存资源优先级更高，会优先加载缓存内容
• 你启动的可能是历史版本的Electron打包客户端（exe/dmg等二进制文件），而非本地开发模式运行的最新代码
• 部分项目的Electron主进程配置的静态资源加载路径错误，指向了旧版本的打包产物目录

解决步骤 #

1. 先执行React代码构建命令，同步源码修改到打包产物：

npm run build
# 或者对应你的包管理工具
yarn build
pnpm build

2. 清空Electron应用缓存，不同系统缓存路径如下：

• Windows：C:\Users\<你的用户名>\AppData\Roaming\<应用名称>\Cache
• Mac：~/Library/Application Support/<应用名称>/Cache
• Linux：~/.config/<应用名称>/Cache
  也可以在开发启动命令中添加参数禁用缓存，或者启动应用后按Ctrl+Shift+I打开开发者工具，在「Network」标签页勾选「禁用缓存」后刷新页面

3. 使用项目配置的本地开发命令启动Electron，不要直接打开历史打包好的客户端：

# 一般项目的开发启动命令如下，可查看package.json的scripts字段确认
npm run electron:serve

4. 检查Electron主进程文件（一般为根目录下的main.js/electron/index.js）中mainWindow.loadFile()或者mainWindow.loadURL()的配置，确认路径指向你最新的打包产物目录下的index.html

另外你修改后的App.jsx中import App from './App'属于未使用的冗余导入，可直接删除，不影响功能。

内容的提问来源于stack exchange，提问作者Cesar Monsalud