React项目修改App.js触发自动刷新、修改index.js无自动刷新如何解决

import React from "react";
import "./App.css";

function SecretComponent() {
  return <p>仅授权用户可查看的机密信息</p>;
}

function RegularComponent() {
  return <p>所有用户都可以查看该组件内容</p>;
}

function App(props) {
  if (props.authorized) {
    return <SecretComponent />;
  } else {
    return <RegularComponent />;
  }
}

// 入口文件逻辑，应单独放在index.js中，不要和App组件代码混写
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";

ReactDOM.render(<App authorized={false} />, document.getElementById("root"));

• 首先拆分代码，严格遵循React项目结构规范：
  • 将App、SecretComponent、RegularComponent组件代码保留在App.js中，删除App.js里的ReactDOM渲染相关逻辑
  • 将ReactDOM渲染相关的代码单独放在入口文件index.js中，拆分完成后重启开发服务测试，多数场景下问题可直接解决
• 如果拆分代码后问题依旧，清除开发服务缓存后重启：
  停止当前运行的开发服务，执行对应命令清除缓存后重启即可：

  # Windows系统直接删除node_modules下的.cache文件夹即可
  rm -rf node_modules/.cache
  npm start
  # 若使用yarn管理依赖则执行 yarn start
  

• 自定义webpack配置的项目额外检查：
  确认webpack的devServer配置中hot: true开启，同时在index.js末尾添加热更新接收逻辑：

  if (module.hot) {
    module.hot.accept();
  }
  

• 检查VS Code自动保存配置：
  确认修改index.js后文件已经正常保存，若开启了延迟自动保存，可将延迟时间调整为1000毫秒以内，避免开发服务无法及时监听到文件变更。

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