React Uses the react-hot-loader local hot update

Q: Why install react-hot-loader in react project when webpack-dev-server is already hot loaded? A: Actually, there is A difference between the two updates. The webpack-dev-server hot load is the developer changes the code, the code is packaged, and the whole page is refreshed. The react-hot-loader does not refresh the entire page. It only replaces the modified code and does a partial refresh of the page. But it relies on WebPack’s HotModuleReplacement hotload plug-in.

NPM install --save-dev react-hot-loader import {AppContainer} from 'react-hot-loader'; 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: configure react-hot-loader/patch entry in webpack.config.dev.js: [ 'babel-polyfill', 'react-hot-loader/patch', require.resolve('./polyfills'), ] //or plugins: [ new HtmlWebpackPlugin({ template: 'template/index.html' }), new webpack.ProvidePlugin({ 'React': 'react' }), new webpack.HotModuleReplacementPlugin(), new webpack.DefinePlugin({ API_SERVER_CONSOLE_PLACEHOLDER: JSON.stringify('') }) ],Copy the code