react 中 react-hot-loader 的错误案例

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行左右：
点击这里查看