React的热更新如何做
React热更新配置方法
使用Webpack的Hot Module Replacement (HMR)功能实现React组件热更新。确保项目已安装webpack-dev-server和react-hot-loader。
安装必要依赖：
npm install --save-dev @hot-loader/react-dom react-hot-loader webpack-dev-server配置webpack.dev.js
在开发环境配置文件中启用HMR：
const webpack = require('webpack');
module.exports = {
// ...其他配置
devServer: {
hot: true,
contentBase: './dist'
},
plugins: [
new webpack.HotModuleReplacementPlugin()
]
};修改babel配置
在.babelrc或babel.config.js中添加react-hot-loader预设：
{
"plugins": ["react-hot-loader/babel"]
}包装根组件
使用hot高阶组件包装App组件：
import { hot } from 'react-hot-loader/root';
const App = () => <div>Hello World</div>;
export default hot(App);检查React版本兼容性
确保使用的React版本与react-hot-loader兼容。对于React 16+，需要使用@hot-loader/react-dom替换react-dom：
// 在入口文件最顶部添加
import { setConfig } from 'react-hot-loader';
setConfig({
pureSFC: true,
pureRender: true
});运行开发服务器
启动带有HMR的开发服务器：
webpack-dev-server --mode development --hot解决常见问题
样式热更新需要单独配置css-loader：
{
test: /\.css$/,
use: ['style-loader', 'css-loader?modules&localIdentName=[name]__[local]___[hash:base64:5]']
}状态保持问题可通过使用react-hot-loader的hot函数解决。组件卸载时状态会自动保留，函数组件建议使用React hooks管理状态。
