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)”,肿么办!肿么办!肿么办!如果被老板发现,一定会让程序员哥哥去“吃鸡”.但是想要修复这个“碧油鸡”,就必须要重新打 ...
随机推荐
- 【[SHOI2015]超能粒子炮·改】
就是运用\(Lucas\)推一个柿子 首先是前置芝士\(Lucas\)定理 \[C_{n}^{m}\%p=C_{n/p}^{m/p}*C_{n\%p}^{m\%p}\%p\] 至于证明 我建议去问一下 ...
- c++ 基础用法、基础知识以及一些常规的操作
1.二叉平衡树:左子树和右子树的深度差小于等于1 2.二叉搜索树:左子树小于根节点的值,右子树大于根结点的值 3.队列:push(),pop(),front(),back(),empty(),size ...
- win7 xampp php7 yii2 配置sqlserver
第一步: https://www.microsoft.com/en-us/download/details.aspx?id=20098 下载 如下图 php7 版本 放到 xampp\php ...
- 华为交换机SSH配置
设备:S5700 一.在本地设备服务端生成秘钥对 [Huawei]rsa local-key-pair create 二.配置VTY [Huawei]user-interface vty 0 4进入虚 ...
- SSM框架构建多模块之业务拆分实践
在如下这两篇篇文章我都或多或少强调过业务分层方面的的方法和注意事项,感兴趣的可以看看: 系统设计和系统划分有定律可循 业务拆分的思考 之前是说,现在是做.以我个人博客为例,我的博客最初只是一个单体应用 ...
- jFinal 2.2入门学习之二:使用sqlserver数据库学习搭建jfinal-demo框架(MySQL的话就不需要看这个了)
1.去官网下载最新的jfinal_Demo(我这是JFinal-2.2) 2.解压demo源码,eclipse导入项目 3.本地创建数据库,修改信息,(注意:如果sqlserver端口号冲突,需要配置 ...
- JS n秒后自动跳转实例
<p><a href="<?php echo base_url();?>usercenter/index" id="message" ...
- win10系统下多python版本部署
说明:win10,已安装有python3.5.2,为使用新浪云应用(SAE)支持微信公众号后台开发(SAE的python运行环境使用的是2.7.9),需部署python2.7的版本以便本地编辑调试. ...
- 个人开源Git地址
开源Git地址 序号 Git地址 描述 1 https://github.com/winds-june 各种源码.直接调用的jar包 2
- react路由配置(未完)
React路由 React推了两个版本 一个是react-router 一个是react-router-dom 个人建议使用第二个 因为他多了一个Link组件 Npm install react-ro ...