使用React Refresh库可以轻松地在React组件中进行热重载。该库提供了一种在不刷新整个页面的情况下刷新React组件的方法。
首先，安装React Refresh库：
npm install react-refresh --save-dev
接下来，在webpack配置文件中添加React Refresh插件：
// webpack.config.js
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
module.exports = {
devServer: {
hot: true,
plugins: [
new ReactRefreshWebpackPlugin(),
/* ... */
现在，可以在React组件中使用热重载功能。例如：
import { useState } from 'react';
const App = () => {
const [count, setCount] = useState(0);
return (
<h1>Count: {count}</h1>
<button onClick={() => setCount(count + 1)}>Increment</button>
export default App;
在开发服务器运行期间更改代码时，组件将自动更新而不需要完全刷新页面。
