webpack的hot reload和hmr是一个东西吗？

Question

刚学react，看到关于热替换和热更新的配置，感觉好像不是一个东西，在devServer里配置hot: true以及启动命令webpack-dev-server --progress --hot --inline是热更新不是热替换吧，好像看到热替换要加个模块react-hmre，是这样吗？

Answer 1

1.首先，webpack的热更新只是检测到代码变动之后，刷新页面，刷新之后页面自然就是最新的代码了，但是这样会导致react state里的数据被清空，不方便调试
2.所以才有了react-hmr，是在webpack的hot-reload基础上做的热加载，代码更新之后，不会刷新整个页面，只是更新了你修改的部分

Answer 2

默认的，webpack-dev-server的hot值为false，这时，webpack-dev-server会在文件修改后刷新页面，这是冷更新。

那么，将hot设置为true时，我们要达到的效果是热更新，但是，想要热更新，仅仅将hot设置为true，是不够的。

hot: true时，我们就可以在入口文件中监听文件组件树的更新，然后将组件进行热替换。

function render() {
    ReactDOM.render(<App />, document.getElementById('root'))
}

if (module.hot) {
    module.hot.accept('./App.js', () => {
      render()
    })
} 

上面的热更新，其实还不够热，当App组件被重新渲染了后，state是无法维持的，这时，你就需要一些loader了，比如react-hot-loader