Webpack 4 HMR与react-hot-loader的区别及React Redux场景差异

架构老林

2026-5-28

Webpack 4原生HMR vs react-hot-loader：差异与React Redux场景对比

作为经常折腾React开发环境的人，我来帮你理清楚这两者的核心区别，以及在React Redux场景下的不同表现：

一、核心定位与底层逻辑差异

Webpack 4原生HMR：是一个通用的模块热替换机制，面向所有类型的模块（JS、CSS、图片等）。它的本质是检测到模块文件变化后，替换掉打包后的旧模块，然后通知应用代码去处理更新。但它完全不懂React的组件模型、生命周期和状态管理，所以对React组件的热替换是“粗暴”的——直接替换组件后重新渲染，会丢失组件的所有状态。
react-hot-loader：是专门针对React生态的HMR增强工具，构建在Webpack原生HMR之上。它能识别React组件的结构和生命周期，在热替换时会保留组件实例的状态（比如组件自身的state、Hooks状态），只更新组件的渲染逻辑，不会让组件重新unmount/mount，开发体验提升非常明显。

原生Webpack HMR：配置简单但手动工作量大
只需要在webpack.config.js中开启hot: true，然后在入口文件或组件中手动编写module.hot.accept()逻辑，比如：
```
if (module.hot) {
  module.hot.accept('./App.js', () => {
    const NextApp = require('./App.js').default;
    ReactDOM.render(<NextApp />, document.getElementById('root'));
  });
}
```
这种方式需要为每个组件编写接受更新的代码，而且会丢失组件状态，实际开发中几乎不会单独用它处理React组件。
react-hot-loader：配置稍复杂但自动化程度高
需要额外安装依赖：react-hot-loader和@hot-loader/react-dom，然后做两步配置：
1. 在Babel配置中添加react-hot-loader/babel插件
2. 把根组件用hot(module)包裹：
```
import { hot } from 'react-hot-loader/root';
const App = () => <div>Hello World</div>;
export default hot(module)(App);
```
配置完成后，所有子组件的热替换都会自动处理，无需手动写module.hot.accept()，且状态完全保留。

原生HMR：对React无特殊优化，修改组件后会触发整个组件树的重新渲染，组件的state、表单输入内容等都会丢失，开发体验很差。
react-hot-loader：针对React做了深度优化：
- 保留组件实例的state和Hooks状态（比如useState、useReducer的值）
- 只更新组件的渲染逻辑，不会重新触发组件的componentDidMount或useEffect（除非依赖项变化）
- 支持类组件和函数组件的热替换，甚至能处理高阶组件（HOC）的热更新

原生Webpack HMR：
- 处理Reducer：可以通过手动编写module.hot.accept来替换Reducer，保留Redux store的状态：
```
if (module.hot) {
  module.hot.accept('./reducers', () => {
    const newRootReducer = require('./reducers').default;
    store.replaceReducer(newRootReducer);
  });
}
```
- 处理连接Redux的组件：替换组件时，组件自身的state会丢失，且如果mapStateToProps或mapDispatchToProps逻辑变化，需要手动重新连接组件，否则不会生效。
react-hot-loader：
- 处理Reducer：同样需要配合上述的module.hot.accept来替换Reducer，但组件层面的体验更好——连接Redux的组件自身的state会被保留，且mapStateToProps/mapDispatchToProps变化时，组件会自动更新连接逻辑，无需重新mount。
- 注意：需要确保根组件被hot(module)包裹，且Redux store的配置正确（比如使用combineReducers时，替换Reducer要覆盖所有reducer）。

内容的提问来源于stack exchange，提问作者rosnk