先写一个简单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,及解决方案的更多相关文章

  1. 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 ...

  2. puppeteer render local HTML template bug

    puppeteer render local HTML template bug ➜ url-to-poster git:(master) ✗ dev ^-v-^ app is running in ...

  3. 一个诡异的MySQL查询超时问题,居然隐藏着存在了两年的BUG

    这一周线上碰到一个诡异的BUG. 线上有个定时任务,这个任务需要查询一个表几天范围内的一些数据做一些处理,每隔十分钟执行一次,直至成功. 通过日志发现,从凌晨5:26分开始到5:56任务执行了三次,三 ...

  4. React 16.13.1触发两次render

    一段很普通的代码,出发了两次render import React, { useState, useEffect } from 'react' const MouseTracker: React.FC ...

  5. React源码 ReactDOM.render

    在 react 当中,主要创建更新的有三种方式 1.ReactDOM.render || hydrate  这两个api都是要把这个应用第一次渲染到我们页面上面,展现出来整个应用的样子的过程,这就是初 ...

  6. [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 ...

  7. [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 ...

  8. React给state赋值的两种写法

    如果你看过React的官方文档,就会对怎么给局部state赋值有一定的了解.如下代码: class Test extends React.Component { constructor(props) ...

  9. react源码之render

    1.最近学习react源码,刚刚入门,看了render的原理,到了fiberRoot的创建 如图:

随机推荐

  1. BMP085气压传感器驱动

    BMP085是新一代的小封装气压传感器,主要用于气压温度检测,在四轴飞行器上可以用作定高检测,该传感器属于IIC总线接口,依然沿用标准IIC驱动程序 使用该传感器需要注意的是我们不能直接读出转换好的二 ...

  2. Mybatis3.2.1整合Spring3.1

    Mybatis3.2.1整合Spring3.1 根 据官方的说法,在ibatis3,也就是Mybatis3问世之前,Spring3的开发工作就已经完成了,所以Spring3中还是没有对 Mybatis ...

  3. $smary模板缓存

    <?php //引入配置文件 $fillname="../cache/testhuancun.html"; //设置一个缓存时间 $time=; //判断如果缓存文件不存在的 ...

  4. NSString总结

    [from]http://www.jianshu.com/p/7994b0ad6b88 问题:NSString到底是不是字符串? NSString 是 OC中专门处理字符串的对象!提供了转换大小写,拼 ...

  5. js 匿名函数 json

    <script type="text/javascript"> var My_func = function(name){   this.obj_name=name; ...

  6. 连接linux主机

    需要工具:putty PuTTY是一个Telnet.SSH.rlogin.纯TCP以及串行接口连接软件 远程连接Linux云服务器-命令行模式 1.远程连接工具.目前Linux远程连接工具有很多种,您 ...

  7. Angular - - angular.bind、angular.bootstrap、angular.copy

    angular.bind 返回一个调用self的函数fn(self代表fn里的this).可以给fn提供参数args(*).这个功能也被称为局部操作,以区别功能. 格式:angular.bind(se ...

  8. jQuery中animate动画第二次点击事件没反应

    jQuery中animate动画第二次点击事件没反应 用animate做点击翻页动画时发现第二次点击事件动画没反应,而第一次点击有动画效果,代码如下: 复制代码 代码如下: $(".page ...

  9. Eclipse 使用说明

    2. 使用技巧 2.1. Eclipse 打开文件所在文件夹 2.2. Mac 安装Eclipse 2.3. Eclipse 安装插件 2.4. Eclipse 工具栏不见了 2.5. Eclipse ...

  10. Java Swing paint repaint update 方法的关系

    Java Swing paint repaint update 方法的关系: 参考:http://blog.csdn.net/xiaoliangmeiny/article/details/691665 ...