利用react-hot-loader实现局部更新

利用react-hot-loader实现局部更新，webpack也有热加载，但跟react-hot-loader还是不一样的。webpack是代码修改后，自动渲染整个页面。react-hot-loader是不在改变状态的前提下，局部渲染

安装

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

步骤

一、启用webpack热加载

"scripts":{
 "start": "webpack-dev-server --hot"
}

或配置文件里设置 hot:true

devServer: {
    hot: true
}

二、设置webpack插件

plugins: [
    new webpack.HotModuleReplacementPlugin()

三、设置webpack入口文件

react-hot-loader/patch必须放在entry第一位，如果第一位必须是polyfill，就放第二位

entry: [
    'babel-polyfill',
    'react-hot-loader/patch'
    __dirname + '/app/apps'

四、设置babel

在.babelrc或babel.config.js里配置plugins

{
   "plugins": ["react-hot-loader/babel"]
}

五、修改主入口文件

如果主入口文件是app/index.js
将顶级组件都包含在<AppContainer>中，注意<AppContainer>只能包含一个React组件

import React from 'react';
import { render } from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import Root from './containers/Root';
import { configureStore, history } from './store/configureStore';
import './app.global.css';
const store = configureStore();
render(
  <AppContainer>
    <Root store={store} history={history} />
  </AppContainer>,
  document.getElementById('root')
);
if (module.hot) {
  module.hot.accept('./containers/Root', () => {
    // eslint-disable-next-line global-require
    const NextRoot = require('./containers/Root').default;
    render(
      <AppContainer>
        <NextRoot store={store} history={history} />
      </AppContainer>,
      document.getElementById('root')
    );
  });
}

OK，通过上面五步就可以配置成功了

参考

https://gaearon.github.io/react-hot-loader/getstarted/