React Uses react-hot-loader to implement local hot updates

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'), ]Copy the code