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开关即可。然后重启项目,更新代码,保存,页面已更新,但浏览器未刷新。
create-react-app react-redux项目 配置模块热更新hmr的更多相关文章
- webpack 配置 (支持 React SCSS ES6 编译打包 和 模块热更新 / 生成SourceMap)
1.首先是目录结构 |-node_modules/ #包文件 |-build/ #静态资源生成目录 |-src/ #开发目录 |-js/ |-index.js #入口文件 |-app.js #Reac ...
- 解放F5——React开启模块热更新
解放F5--React开启模块热更新 在一个正在开发的应用中,刷新页面将会降低你的生产效率:你必须得等待页面加载完毕. 一个大的应用可能会花很多秒钟才能刷新完页面.使用 HMR(模块热替换) 可以避免 ...
- 【ASP.NET Core快速入门】(六)配置的热更新、配置的框架设计
配置的热更新 什么是热更新:一般来说,我们创建的项目都无法做到热更新:即项目无需重启,修改配置文件后读取到的信息就是修改配置之后的 我们只需要吧项目中用到的IOptions改成IOptionsSnap ...
- 菜鸟入门【ASP.NET Core】6:配置的热更新、配置的框架设计
配置的热更新 什么是热更新:这个词听着有点熟悉,但到底是什么呢? 一般来说:创建的项目都无法做到热更新:即项目无需重启,修改配置文件后读取到的信息就是修改配置之后的 我们只需要吧项目中用到的IOpti ...
- 我发起了一个 .Net Core 平台上的 开源项目 ShadowDomain 用于 热更新
大家好, 我发起了一个 .Net Core 平台上的 开源项目 ShadowDomain 用于 热更新 . 简单的说, 原理就是 类似 Asp.net 那样 让 当前 WebApp 运行在一个 A ...
- .NET CORE 2.0小白笔记(五):配置的热更新、配置的框架设计
配置的热更新 什么是热更新:一般来说,我们创建的项目都无法做到热更新:即项目无需重启,修改配置文件后读取到的信息就是修改配置之后的 我们只需要吧项目中用到的IOptions改成IOptionsSnap ...
- 微软Azure配置中心 App Configuration (三):配置的动态更新
写在前面 我在前文: <微软Azure配置中心 App Configuration (一):轻松集成到Asp.Net Core>已经介绍了Asp.net Core怎么轻易的接入azure ...
- ubuntu开发项目不能执行热更新
当项目开发到一定成熟度,项目基本上比较大(vue,angular,react,java,php等),在Ubuntu系统环境下,我们写了代码,但是不能想Windows一样执行热更新,这是因为Ubuntu ...
- [Android教程] Cordova开发App入门(二)使用热更新插件
前言 不知各位遇没遇到过,刚刚发布的应用,突然发现了一个隐藏极深的“碧油鸡(BUG)”,肿么办!肿么办!肿么办!如果被老板发现,一定会让程序员哥哥去“吃鸡”.但是想要修复这个“碧油鸡”,就必须要重新打 ...
随机推荐
- PHP-----CMS
刚刚看到了一篇关于phpcms的文章自己今后比较有帮助,就把它摘了下来. 1.首先下载phpcms v9的集成安装包并安装,这里就不详细说明了. 2.本地调试建议大家使用APMserver,或者wam ...
- 2019.1.7 Mac的Vscode插件总结
Vscode插件 通用插件 Chinese 配置中文界面 HTML Snippets H5代码片段以及提示 HTML CSS Support 让 html 标签上写class 智能提示当前项目所支持的 ...
- Windows平台JxCore打包
1.下载JxCore https://raw.githubusercontent.com/jxcore/jxcore-release/master/0311/jx_win64v8.zip 2.解压并配 ...
- 【转】NHIBERNATE的各种保存方式的区别 (SAVE,PERSIST,UPDATE,SAVEORUPDTE,MERGE,FLUSH,LOCK)
前言 今天学学习NH这个框架,在新增对象的时候,看见大神用了persist而没有用Save,心中比较疑惑,查阅资料的时候,发现这篇写的非常不错,转载供大家参考. hibernate的保存hiberna ...
- oracle11g的安装与卸载
1.首先确认电脑已安装 .NET Framework3.5 2.本地计算机的安装: 参考:https://www.cnblogs.com/hoobey/p/6010804.html 3.服务器的安装: ...
- (二、下) springBoot 、maven 、mysql、 mybatis、 通用Mapper、lombok 简单搭建例子 《附项目源码》
接着上篇文章中 继续前进. 一.在maven 的pom.xm中添加组件依赖, mybatis通用Mapper,及分页插件 1.mybatis通用Mapper <!-- mybatis通用Mapp ...
- 【oracle笔记1】基础知识大集锦:增删改,数据类型,用户操作,持续更新中···
什么是数据库?数据库就是用来存储和管理数据的仓库.首先我来简单介绍一下各数据库的背景,常见的数据库如下,oracle:甲骨文公司(市场占用率最高),oracle也是一个公司名,翻译过来就是甲骨文的意思 ...
- Webstorm设置代码提示
下载路径: https://github.com/virtoolswebplayer/ReactNative-LiveTemplate 本插件可以配合Webstorm设置代码提示. Mac下安装 We ...
- Vue--- 一点车项目 6个小时实际看了10天(完结)
一个项目 环境安装 使用了 cli 脚手架 Koa2 workpackage 其他小的不计 前端Vue组件搭建 数据的简单测试交互 数据库的设计 创建.连接接数据库 前台[表单/分类] ...
- C++切勿混用带符号类型和无符号类型
如果表达式里既有带符号类型又有无符号类型,当带符号类型取值为负时会出现异常结果. 因为带符号数会自动转化为无符号数. 例如 a*b,a=-1, b=1,a是int,b是unsigned int,如果在 ...