react 实现热更新
实现 React 热更新（HMR）
热更新（Hot Module Replacement）允许在运行时替换、添加或删除模块，而无需完全刷新页面。React 结合 Webpack 或 Vite 可以轻松实现这一功能。
使用 Webpack 配置 HMR
确保项目已安装 webpack-dev-server 和 react-refresh 相关依赖：
npm install --save-dev @pmmmwh/react-refresh-webpack-plugin react-refresh webpack-dev-server在 webpack.config.js 中配置：
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
module.exports = {
mode: 'development',
devServer: {
hot: true,
},
plugins: [
new ReactRefreshWebpackPlugin(),
],
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
plugins: ['react-refresh/babel'],
},
},
},
],
},
};使用 Vite 配置 HMR
Vite 默认支持 HMR，无需额外配置。确保项目使用 vite-plugin-react（Vite 2.x）或 @vitejs/plugin-react（Vite 3.x+）：
npm install --save-dev @vitejs/plugin-react在 vite.config.js 中：
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
});验证 HMR 是否生效
启动开发服务器后，修改组件代码并保存。页面应自动更新，且状态（如 React 组件的 useState）不会丢失。
自定义 HMR 行为
对于特定模块，可通过 module.hot API 手动处理更新逻辑：
if (module.hot) {
module.hot.accept('./MyComponent', () => {
// 自定义更新逻辑
});
}注意事项
- 仅适用于开发环境，生产环境需禁用。
- 状态保留依赖
react-refresh，确保 Babel 或 SWC 正确配置。 - 复杂状态（如 Redux）可能需要额外处理以避免意外行为。
