zoukankan      html  css  js  c++  java
  • create-react-app react-redux项目 配置模块热更新hmr

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

  • 相关阅读:
    动画,缩放
    本地公司
    调研 公司信息
    外贸 内贸 经商
    情感 爱情 恋爱
    H5源码
    世界 生活
    标识
    Jackson
    java数据结构
  • 原文地址:https://www.cnblogs.com/juexin/p/9370268.html
Copyright © 2011-2022 走看看