react-router3.x hashHistory render两次的bug,及解决方案
先写一个简单App页面,其实就是简单修改了react-router的官方例子中的animations例子,修改了两个地方:
1.路由方式由browserHistory修改为hashHistory
2.在Page1组件中打印console.log('render page1');
直接上代码:
然后现在点击Page1链接,会发现render page1 被打印了两次,说明,Page1组件被渲染了两次,假如Page1组件比较复杂的话,岂不是很影响性能;
为了仔细研究为什么会render两次,下面把Page1组件稍微改造一下如下,记录两次render的时候Page1的props:
再次点击Page1链接,打印出来了,两次的props;唯一的区别就在this.props.location.action的值,第一次位PUSH,第二次为POP
查阅了很多的文章和资料,想弄明白PUSH和POP的区别和联系,有一篇文章讲解的react-router内部原理,可以看一下深入理解react-router路由系统,可以参考一下,里面说
action, // location 类型,在点击 Link 时为 PUSH,浏览器前进后退时为 POP,调用 replaceState 方法时为 REPLACE
我在react-router的github issues上提出了这个问题,官方直接说这是3.x版本的BUG,react-router4.x的版本已经修复了这个问题,也不再深究为什么会出现这个问题,直接说目前的解决方案:
在容器组件的shouldComponentUpdate方法中添加一行代码:return (this.props.router.location.action === 'PUSH');
再次点击page1链接,只会渲染一次,修改之后完整的代码如下:
react-router3.x hashHistory render两次的bug,及解决方案的更多相关文章
- vue h render function & render select with options bug
vue h render function & render select with options bug https://github.com/xgqfrms/vue/issues/41 ...
- puppeteer render local HTML template bug
puppeteer render local HTML template bug ➜ url-to-poster git:(master) ✗ dev ^-v-^ app is running in ...
- 一个诡异的MySQL查询超时问题,居然隐藏着存在了两年的BUG
这一周线上碰到一个诡异的BUG. 线上有个定时任务,这个任务需要查询一个表几天范围内的一些数据做一些处理,每隔十分钟执行一次,直至成功. 通过日志发现,从凌晨5:26分开始到5:56任务执行了三次,三 ...
- React 16.13.1触发两次render
一段很普通的代码,出发了两次render import React, { useState, useEffect } from 'react' const MouseTracker: React.FC ...
- React源码 ReactDOM.render
在 react 当中,主要创建更新的有三种方式 1.ReactDOM.render || hydrate 这两个api都是要把这个应用第一次渲染到我们页面上面,展现出来整个应用的样子的过程,这就是初 ...
- [React] Use React.ReactNode for the children prop in React TypeScript components and Render Props
Because @types/react has to expose all its internal types, there can be a lot of confusion over how ...
- [React Router v4] Conditionally Render a Route with the Switch Component
We often want to render a Route conditionally within our application. In React Router v4, the Route ...
- React给state赋值的两种写法
如果你看过React的官方文档,就会对怎么给局部state赋值有一定的了解.如下代码: class Test extends React.Component { constructor(props) ...
- react源码之render
1.最近学习react源码,刚刚入门,看了render的原理,到了fiberRoot的创建 如图:
随机推荐
- BMP085气压传感器驱动
BMP085是新一代的小封装气压传感器,主要用于气压温度检测,在四轴飞行器上可以用作定高检测,该传感器属于IIC总线接口,依然沿用标准IIC驱动程序 使用该传感器需要注意的是我们不能直接读出转换好的二 ...
- Mybatis3.2.1整合Spring3.1
Mybatis3.2.1整合Spring3.1 根 据官方的说法,在ibatis3,也就是Mybatis3问世之前,Spring3的开发工作就已经完成了,所以Spring3中还是没有对 Mybatis ...
- $smary模板缓存
<?php //引入配置文件 $fillname="../cache/testhuancun.html"; //设置一个缓存时间 $time=; //判断如果缓存文件不存在的 ...
- NSString总结
[from]http://www.jianshu.com/p/7994b0ad6b88 问题:NSString到底是不是字符串? NSString 是 OC中专门处理字符串的对象!提供了转换大小写,拼 ...
- js 匿名函数 json
<script type="text/javascript"> var My_func = function(name){ this.obj_name=name; ...
- 连接linux主机
需要工具:putty PuTTY是一个Telnet.SSH.rlogin.纯TCP以及串行接口连接软件 远程连接Linux云服务器-命令行模式 1.远程连接工具.目前Linux远程连接工具有很多种,您 ...
- Angular - - angular.bind、angular.bootstrap、angular.copy
angular.bind 返回一个调用self的函数fn(self代表fn里的this).可以给fn提供参数args(*).这个功能也被称为局部操作,以区别功能. 格式:angular.bind(se ...
- jQuery中animate动画第二次点击事件没反应
jQuery中animate动画第二次点击事件没反应 用animate做点击翻页动画时发现第二次点击事件动画没反应,而第一次点击有动画效果,代码如下: 复制代码 代码如下: $(".page ...
- Eclipse 使用说明
2. 使用技巧 2.1. Eclipse 打开文件所在文件夹 2.2. Mac 安装Eclipse 2.3. Eclipse 安装插件 2.4. Eclipse 工具栏不见了 2.5. Eclipse ...
- Java Swing paint repaint update 方法的关系
Java Swing paint repaint update 方法的关系: 参考:http://blog.csdn.net/xiaoliangmeiny/article/details/691665 ...