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. 交叉熵Cross-Entropy

    1.交叉熵:用来描述通信中将一个概率分布的最优编码用到另一个概率分布的平均比特数 公式: 2.交叉熵是不对称的 3.交叉熵的作用是表达两个概率分布的差异性 设概率分布p(x)和q(x),两个概率分布差 ...

  2. PHP-----CMS

    刚刚看到了一篇关于phpcms的文章自己今后比较有帮助,就把它摘了下来. 1.首先下载phpcms v9的集成安装包并安装,这里就不详细说明了. 2.本地调试建议大家使用APMserver,或者wam ...

  3. Vue通过input筛选数据

    <div id="app"> <input v-model='search' /> <ul> <li v-for="item i ...

  4. MFC中用户自定义类响应自定义消息

    这篇技术文章不是讨论经典的MFC中的消息工作机理的,讨论消息工作原理.方式和路径的文章在网上和书本中随处可见.网上众多的讨论都是关于如何响应并进行用户自定义消息映射的:网上还有一些文章介绍如何在自定义 ...

  5. 使用jmeter进行简单的压测

    安装下载 前往官网下载,[地址] 环境 需要java环境,此处略 最好对jmeter配置下环境变量,方便打开,此处略 运行 启动jmeter 进入到bin目录,输入   ./jmeter    启动 ...

  6. springboot集成activiti工作流时容易出现的问题

    No.1 启动报错 org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'or ...

  7. 手机端app开发初识

    1.所需软件说明 百度云下载链接: https://pan.baidu.com/s/1-TEQZP9QbJSlGSYedyAUFw密码: 2z8l 或者官方链接: Hbuilder:http://ww ...

  8. luajit 64位 for cocos2dx 编译ios解决方法

    最近luajit发布了64位beta版,由于appstore上线必须是64位的应用,而且我的游戏项目用到lua脚本,所以必须要用到64位的luajit来编译lua脚本. 方法如下: 在luajit官网 ...

  9. 为什么我们需要DTO?

    最近在写代码时突然产生了这个疑惑,我们为什么需要DTO进行数据传输呢? 要了解DTO首先我们要知道什么是DAO,DAO就是数据库的一个数据模型,是一个类文件里面存储着数据库的字段及其getter&am ...

  10. 解决thinkphp query()执行原生SQL语句成功结果报错的问题

    1.query方法 query方法用于执行SQL查询操作,如果数据非法或者查询错误则返回false,否则返回查询结果数据集(同select方法). 2.execute方法 execute用于更新和写入 ...