React项目修改app.js无生效：旧内容持续渲染，新代码未生效

这种情况我开发时也踩过坑！别慌，大概率是编译流程没跟上或者缓存在搞鬼——毕竟live-server只是单纯托管静态文件，而React源码需要经过编译才能生成浏览器能识别的文件。给你几个一步步排查的方案：

1. 先确认：你是不是没重新编译源码？ #

React项目的源码一般在src/目录下（比如src/app.js），而public/里的是编译后的打包文件（比如main.js或者bundle.js）。如果你改了src/app.js但没重新构建，public/里的旧文件根本没更新，live-server自然只会展示旧内容。

• 如果你用的是Create React App，别用live-server了，直接跑npm start！它自带热重载，修改源码后浏览器会自动刷新，还能帮你处理编译和缓存问题，省心太多。
• 如果是手动配置的项目，要运行构建命令的监听模式：比如Webpack用webpack --watch，Parcel直接跑parcel public/index.html，这样修改源码后会自动重新编译到public/文件夹，不用每次手动执行build。

2. 强制清除浏览器缓存 #

有时候哪怕你重新编译了，浏览器还是会缓存旧的JS文件。试试这两步：

• 强制刷新页面：Windows/Linux按Ctrl + Shift + R，Mac按Cmd + Shift + R，跳过缓存加载最新资源。
• 打开开发者工具（F12），切换到「Network」标签，勾选「Disable cache」（保持开发者工具打开的状态下，浏览器就不会缓存静态文件了）。

3. 给live-server加上禁用缓存参数 #

live-server本身也可能有缓存策略，导致没检测到文件变化。启动时加上--no-cache参数试试：

live-server public/ --no-cache

4. 检查文件路径和大小写 #

有时候可能是文件名大小写的问题（比如你改的是App.js但项目里实际是app.js，Linux/macOS系统区分大小写），或者你不小心改了其他目录下的同名文件。先确认你修改的是正确的源码文件，而且构建脚本确实会把这个文件编译到public/的打包文件里。

总结 #

最常见的问题就是「没启动自动编译的监听模式」或者「浏览器缓存」，优先用Create React App自带的npm start会省很多麻烦——它已经把热重载、缓存处理这些细节都配置好了。

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