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 更新策略。