React与VSCode无法识别代码变更，浏览器渲染旧代码如何解决？

• 清理项目缓存与依赖

  • 删除项目根目录的node_modules文件夹和package-lock.json（或yarn.lock）文件，重新执行npm install
  • 若使用Create React App，启动时添加缓存重置参数：npm start -- --reset-cache

• 处理浏览器缓存

  • 按下Ctrl+Shift+R（Windows/Linux）或Cmd+Shift+R（Mac）强制硬刷新页面
  • 打开浏览器开发者工具，在Network面板勾选「Disable cache」选项，保持该状态开发

• 检查开发服务器配置

  • 若使用Webpack，确认webpack.config.js中devServer.hot设置为true，开启热模块替换（HMR）
  • 若使用Vite，确保vite.config.js未禁用HMR，默认配置已开启该功能

• 确认VSCode文件同步状态

  • 开启VSCode的「自动保存」功能（菜单栏File -> Auto Save），避免因未手动保存导致变更未同步
  • 临时禁用所有VSCode扩展，排查是否有扩展干扰文件监听或缓存

• 排查其他细节问题

  • 检查文件名和代码中的引入路径是否大小写一致（部分系统对路径大小写敏感，不一致会导致加载旧文件）
  • 检查开发服务器端口是否被旧进程占用，用命令杀掉旧进程后重新启动：
    • Mac/Linux：lsof -i :3000 | grep LISTEN | awk '{print $2}' | xargs kill -9
    • Windows：打开任务管理器，找到占用3000端口的进程并结束，或执行taskkill /F /PID <进程ID>

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