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

create-react-app react-redux项目 配置模块热更新hmr的更多相关文章

  1. webpack 配置 (支持 React SCSS ES6 编译打包 和 模块热更新 / 生成SourceMap)

    1.首先是目录结构 |-node_modules/ #包文件 |-build/ #静态资源生成目录 |-src/ #开发目录 |-js/ |-index.js #入口文件 |-app.js #Reac ...

  2. 解放F5——React开启模块热更新

    解放F5--React开启模块热更新 在一个正在开发的应用中,刷新页面将会降低你的生产效率:你必须得等待页面加载完毕. 一个大的应用可能会花很多秒钟才能刷新完页面.使用 HMR(模块热替换) 可以避免 ...

  3. 【ASP.NET Core快速入门】(六)配置的热更新、配置的框架设计

    配置的热更新 什么是热更新:一般来说,我们创建的项目都无法做到热更新:即项目无需重启,修改配置文件后读取到的信息就是修改配置之后的 我们只需要吧项目中用到的IOptions改成IOptionsSnap ...

  4. 菜鸟入门【ASP.NET Core】6:配置的热更新、配置的框架设计

    配置的热更新 什么是热更新:这个词听着有点熟悉,但到底是什么呢? 一般来说:创建的项目都无法做到热更新:即项目无需重启,修改配置文件后读取到的信息就是修改配置之后的 我们只需要吧项目中用到的IOpti ...

  5. 我发起了一个 .Net Core 平台上的 开源项目 ShadowDomain 用于 热更新

    大家好,  我发起了一个 .Net Core 平台上的 开源项目 ShadowDomain  用于 热更新 . 简单的说, 原理就是 类似 Asp.net 那样 让 当前 WebApp 运行在一个 A ...

  6. .NET CORE 2.0小白笔记(五):配置的热更新、配置的框架设计

    配置的热更新 什么是热更新:一般来说,我们创建的项目都无法做到热更新:即项目无需重启,修改配置文件后读取到的信息就是修改配置之后的 我们只需要吧项目中用到的IOptions改成IOptionsSnap ...

  7. 微软Azure配置中心 App Configuration (三):配置的动态更新

    写在前面 我在前文: <微软Azure配置中心 App Configuration (一):轻松集成到Asp.Net Core>已经介绍了Asp.net Core怎么轻易的接入azure ...

  8. ubuntu开发项目不能执行热更新

    当项目开发到一定成熟度,项目基本上比较大(vue,angular,react,java,php等),在Ubuntu系统环境下,我们写了代码,但是不能想Windows一样执行热更新,这是因为Ubuntu ...

  9. [Android教程] Cordova开发App入门(二)使用热更新插件

    前言 不知各位遇没遇到过,刚刚发布的应用,突然发现了一个隐藏极深的“碧油鸡(BUG)”,肿么办!肿么办!肿么办!如果被老板发现,一定会让程序员哥哥去“吃鸡”.但是想要修复这个“碧油鸡”,就必须要重新打 ...

随机推荐

  1. C# Path类 FileStream(文件流) 与 File(文件) 读取的区别

    1.采用文件流读取数据是一点一点从文件中读取数据对内存的压力相对较小;而采用文件读取数据是一下全部读取过来对内存造成的压力相对较大 2.File读取: string str = @"E:\Q ...

  2. 二十二、详述 IntelliJ IDEA 中恢复代码的方法

    在咱们正常开发项目的时候,难免遇到在开发过程中由于某种原因,想要将代码恢复到前一版本的情景.特别是在咱们删除了某些代码,想要恢复之前删除的代码的时候,了解这个在 IntelliJ IDEA 中恢复代码 ...

  3. PAT——有几个PAT

    思路来源:https://www.cnblogs.com/asinlzm/p/4440603.html 字符串APPAPT中包含了两个单词“PAT”,其中第一个PAT是第2位(P),第4位(A),第6 ...

  4. java中prepareStatement与createStatement的区别

    首先来看两段代码: 第一个使用createStatement() public void delete( int id){ try { Connection c = DBUtil.getConnect ...

  5. STM32之系统时钟

    转载:http://www.openedv.com/posts/list/302.htm 时钟系统是处理器的核心,所以在学习STM32所有外设之前,认真学习时钟系统是必要的,有助于深入理解STM32. ...

  6. Asp.net 中 OnClientClick 与 OnClick 的区别

    OnClientClick 是客户端事件处理方法,一般采用JavaScript来进行处理,也就是直接在IE端运行,一点击就运行. OnClick 是服务器端事件处理方法,在服务器端也就是IIS中运行, ...

  7. JavaScript-比较运算符

    一.概述 > 大于运算符 < 小于运算符 <= 小于或者等于运算符 >= 大于或者等于运算符 == 相等运算符 === 严格相等运算符 != 不相等运算符 !== 严格不相等运 ...

  8. 463. Island Perimeter (5月29日)

    解答 class Solution { public: int islandPerimeter(vector<vector<int>>& grid) { int num ...

  9. linux中删除文件内空白行的几种方法。

    linux中删除文件内空白行的几种方法 有时你可能需要在 Linux 中删除某个文件中的空行.如果是的,你可以使用下面方法中的其中一个.有很多方法可以做到,但我在这里只是列举一些简单的方法. 你可能已 ...

  10. 同步请求和异步请求的区别(理解ajax用)

    同步请求:发送方发送数据包后,等待接收方发回响应之后,才能发送下一个数据包的通信方式. 异步请求:发送方发送数据包后,不用等待接收方发回响应,就可以发送下一个数据包的通信方式. 同步通信:要求通信双方 ...