react使用react-hot-loader实现局部热更新

Q：webpack-dev-server 已经是热加载，为何还要在 react 项目还要安装 react-hot-loader 呢？

A：其实这两者的更新是有区别的，webpack-dev-server 的热加载是开发人员修改了代码，代码经过打包，重新刷新了整个页面。而 react-hot-loader 不会刷新整个页面，它只替换了修改的代码，做到了页面的局部刷新。但它需要依赖 webpack 的 HotModuleReplacement 热加载插件。

npm install --save-dev react-hot-loader

在入口文件(index.js)中引入import { AppContainer } from 'react-hot-loader';

如果使用了react-router：
step1：引入import Route from './router/';
step2：

const render = Component => {
ReactDOM.render(
    <AppContainer>
        <Component />
    </AppContainer>,
    document.getElementById("root"));
}

render(Route);

// Webpack Hot Module Replacement API
if (module.hot) {
    module.hot.accept('./router/', () => {
        render(Route);
    })
}

step3：在webpack.config.dev.js中配置  react-hot-loader/patch

entry: [
    'babel-polyfill',
    'react-hot-loader/patch',
    require.resolve('./polyfills'),
]