HRM并不是create-react-app专属的,提供一篇博客介绍hrm http://chrisshepherd.me/posts/adding-hot-module-reloading-to-create-react-app。
设想如果是一个比较复杂的react app,组件繁多,每次更新都刷新页面,可能需要等待十几秒,效率非常低,hmr解决的问题就是实现模块热更新,保持应用的状态。
ReactDOM.render( <App />, document.getElementById('root') ); if (module.hot) { module.hot.accept('./App', () => { const NextApp = require('./App').default; ReactDOM.render( <App />, document.getElementById('root') ); }); }
我用到了react-redux,并且想不指定页面,实现hmr:
const store = configureStore(); ReactDOM.render( <Provider store = { store }> <App /> </Provider>, document.getElementById('root')); if (module.hot) { module.hot.accept(() => { ReactDOM.render( <Provider store = { store }> <App /> </Provider>, document.getElementById('root')); }); }
目前用的这个是create-react-app自带的hmr,只要简单开启个hot开关即可。然后重启项目,更新代码,保存,页面已更新,但浏览器未刷新。