热加载组件

所以这个章节就是他妈的屌。使用 React JS 和 react-hot-loader 可以让你去改变组件中的 class 代码，然后可以在 DOM 上看到实时更新了实例，没有修改他们的状态！看起来就像 CSS 更新一样，不过是换成了组件。

设置

这个设置需要你使用前面章节中介绍的 webpack-dev-server，现在我们需要去安装加载器 npm install react-hot-loader --save-dev，然后做一点配置：

var webpack = require('webpack');
var path = require('path');

var config = {
  entry: ['webpack/hot/dev-server', './app/main.js'],
  output: {
    path: path.resolve(__dirname, './build'),
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      test: /\.js$/,
      // 使用 "loaders" 属性代替 "loader"
      // 然后在 "jsx" 加载器之前添加 "react-hot" 
      loaders: ['react-hot', 'babel']
    }]
  }
};

module.exports = config;

同时你也需要在你的主入口文件做一些修改，例子中，在 app/ 文件夹中的 main.js 像下面那样修改：

app/main.js

// 你可能已经把你的根组件引入了
// 组件可能用了 react-router
var RootComponent = require('./RootComponent.jsx');
// 当你渲染它的时候，让它赋值给一个变量
var rootInstance = React.render(RootComponent(), document.body);
// 然后在文件的最底部复制粘帖
if (module.hot) {
  require('react-hot-loader/Injection').RootInstanceProvider.injectProvider({
    getRootInstances: function () {
      // Help React Hot Loader figure out the root component instances on the page:
      // 帮助 React Hot Loader 识别出页面中的根组件
      return [rootInstance];
    }
  });
}

就是这么简单，在 DOM 中渲染一个组件，然后修改一些组件中的代码，它会自动渲染，却保存了已经存在了的状态，屌不屌？

可以到 react-hot-loader 了解更多。