正文

create-react-app react-redux项目 配置模块热更新hmr

IP云
IP云V管理员/4 阅读
09/06
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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开关即可。然后重启项目，更新代码，保存，页面已更新，但浏览器未刷新。