react-hot-loader 和 webpack-dev-server有什么不同？
他们最大的区别是react-hot-loader 可以不用刷新页面即可更改Component的状态， 而webpack-dev-server 默认需要刷新页面才能够更改Component的状态， 刷新页面也意味着页面状态的丢失 ，正如segmentfault 中 答主 zhbhun 所说：
react-hot-loader 是对 webpack 的热加载进行了改进，支持 react 组件状态不丢失。题主可以尝试去掉开发环境的 react-hot-loader，然后修改网页上输入框的值，再修改代码，发现网页会刷新且输入框的值不在了。如果有 react-hot-loader 就不会存在该问题。
什么时候使用react-hot-loader 或 webpack-dev-server
当应用程序足够短小、状态少、入口单一的时候， 我想使用webpack-dev-server 中默认的hot 服务器就够了。但是随着应用程序越来越庞大，状态越来越多的时候，这个时候就要使用react-hot-loader了
react-hot-loader 的基本教程：
这里有webpack 关于热重载的官方说明
中文版的可以点击这里
使用 react-hot-loader 需要注意的地方：
1.所有页面均配置，但是修改组件后，页面不刷新：
这可能是由于入口文件中的module.hot 模块写错，例如
if (module.hot) {
module.hot.accept(() => {
render(App)
});
}
可能会写成:
if(module.hot){
module.hot.accept(()=>render(App))
}
2.使用react-hot-loader 之后页面仍然刷新再更新：
这个有可能是启动了webpack的一些插件 例如：
webpack.HotModuleReplacementPlugin
webpack.NamedModulesPlugin
当启动了上面这两个插件的时候， react-hot-loader webpack使用的是 默认的dev-server ，而注释掉这两行之后页面的更新就完整无误了（至少再在我的机器上是这样的）。
3.页面可以热更新，但是应用程序状态还是会丢失
这个有可能是由于babelrc的配置错误（比如再plugins中没有加上 react-hot-loader/babel），写法：
"plugins":["react-hot-loader/babel"]
4. 使用react-hot-loader 组件并没有被替换，而是被插入到上一个组件前面
这个是由于InsertBefore 函数引起的。因为我的编码习惯太差， 在编码的时候喜欢把容器元素插入到页面的最前面， 所以才会导致这种错误。例如：
let root = document.createElement('div')
div.id = 'root'
let firstChild = document.firstChild
document.body.insertBefore(root,firstChild)
改成:
let root = document.createElement('div')
div.id = 'root'
document.body.appendChild(root)
就不会报错了，这里需要注意的一点是，在渲染组件的时候：
render((
<AppContainer>
<Component />
</AppContainer>
),div) // 要把 'div' 改成 document.getElementById('root')不然还是会出现上面的错误
这是我写的一个小小例子，代码量只有20行左右：
点击这里查看
网友评论