React热加载器（react的loading加载）

webpack运行时具有模块替换功能（Hot Module Replacement，HMR）。当某个模块代码发生变化时，webpack实时打包将其推送到页面并进行替换，从而无须刷新页面就实现了代码的更新。如用户自行配置此功能，需要进行多方面考虑和配置，比较复杂，通用的做法是依赖第三方的react-hot-loader加载器，来实现React组件的热替换。其实正是因为React的每一次更新都是全局刷新的虚拟DOM机制，让React组件的热替换可以成为通用的加载器，从而极大地提高了开发效率。要使用react-hot-loader，首先需要通过npm进行安装：$npm install --save-dev react-hot-loader

之后，需要在webpack开发服务器中开启HMR参数hot。现在创建一个名为server.js的文件，用以启动webpack开发服务器，代码如下：

为了热加载React组件，需要在前端页面中加入相应的代码，接收webpack推送过来的代码模块，并通知所有相关React组件进行重新渲染。代码如下：

需要注意的是，这里的client http://127.0.0.1：3000需要与server.js中启动webpack开发服务器的地址匹配。这样，打包生成的文件就知道该从哪里去获取动态的代码更新。然后，需要让webpack用react-hot-loader去加载React组件，加载器配置代码如下：

做完这些配置之后，使用Node.js启动server.js：

$node server.js

现在即可启动开发服务器并实现React组件的热加载。为了方便，我们也可以在package.json的scripts中加入start配置：

"scripts": {

"start": "node ./js/server.js"

}

从而通过npm start命令即可启动开发服务器。现在任何的修改只要一保存，就会在页面上立刻体现出来。无论是对样式的修改，还是对界面渲染的修改，甚至是对事件绑定处理函数的修改，都可以立刻生效。