react如何实现自动刷新
React 实现自动刷新的方法
使用 Webpack Dev Server 的热模块替换（HMR）
Webpack Dev Server 内置了热模块替换功能，可以实现在开发环境下自动刷新。在 webpack.config.js 中配置 devServer 选项：
devServer: {
hot: true,
liveReload: true,
}在 React 项目入口文件中启用 HMR：
if (module.hot) {
module.hot.accept();
}使用 React Fast Refresh
React Fast Refresh 是 React 官方推荐的 HMR 替代方案，提供更稳定的组件状态保留功能。安装 @pmmmwh/react-refresh-webpack-plugin 和 react-refresh：
npm install @pmmmwh/react-refresh-webpack-plugin react-refresh --save-dev在 Webpack 配置中添加插件：
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
plugins: [
new ReactRefreshWebpackPlugin(),
],使用 Create React App 的内置功能
Create React App 默认集成了自动刷新功能，无需额外配置。启动开发服务器后，代码修改会自动触发浏览器刷新：
npm start自定义开发服务器监听
对于自定义服务器（如 Express），可以使用 chokidar 监听文件变化并触发刷新：
const chokidar = require('chokidar');
const watcher = chokidar.watch('./src');
watcher.on('change', () => {
// 发送信号通知前端刷新
});浏览器扩展工具
安装浏览器扩展如 React Developer Tools，配合开发服务器实现更高效的调试和自动刷新。
生产环境注意事项
自动刷新通常仅用于开发环境。生产环境应避免此类功能，可通过手动刷新或实现 Service Worker 更新策略。
