先写一个简单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. STM32F10X SPI操作flash MX25L64读写数据(转)

    源:STM32F10X SPI操作flash MX25L64读写数据 前一段时间在弄SPI,之前没接触过嵌入式外围应用,就是单片机也只接触过串口通信,且也是在学校的时候了.从离开手机硬件测试岗位后,自 ...

  2. Word中的公式向上偏或向下偏的解决方法

    在word 2010中,发现公式无法与文字排成一行时,可选中文字,然后点“字体”,然后“高级”选项中选择“位置”,然后根据不同情况选择“标准”.“提升”.“降低”.

  3. 【转】图片缓存之内存缓存技术LruCache、软引用 比较

    每当碰到一些大图片的时候,我们如果不对图片进行处理就会报OOM异常,这个问题曾经让我觉得很烦恼,后来终于得到了解决,那么现在就让我和大家一起分享一下吧.这篇博文要讲的图片缓存机制,我接触到的有两钟,一 ...

  4. JavaScript高级程序设计-13:事件

    JavaScript与HTML之间的交互是通过事件实现的. 一.事件流 首先我们要明白事件流的概念.当我们点击一个按钮时,也点击了按钮的容器元素,甚至也点击了整个事件.事件流描述就是从页面中接收事件的 ...

  5. 非root用户Memcached repcached安装

    安装memcached前先要确定系统是否安装了gcc: 1.解压安装包: tar -zxf memcached-1.2.8-repcached-2.2.tar.gz 2.编译: 系统应安装了libev ...

  6. AtCoder Beginner Contest 052 ABCD题

    A - Two Rectangles Time limit : 2sec / Memory limit : 256MB Score : 100 points Problem Statement The ...

  7. readystate, 异步

    EventUtil.addHandler(window, "load", function(){ //create a new <script/> element. v ...

  8. 利用 Grunt (几乎)无痛地做前端开发 (一)之单元测试

    前言 如果你想开发一个js应用,甭管多简单,都要先创建整个宇宙 来看看我们的Javascript小宇宙: 确定如何根据需求.功能划分模块,如何将代码分成多个文件开发,合成一个发布 保证上一条的同时,使 ...

  9. Angular - - angular.element

    angular.element 将DOM元素或者HTML字符串一包装成一个jQuery元素. 格式:angular.element(element); element:包装成jquery对象的html ...

  10. iOS 之 工厂模式

    参考:http://www.jikexueyuan.com/course/2054_2.html?ss=2 1. 简单工厂 简单工厂类是一个实体类.用于几种相似类的统一创建,简化流程,隔离细节. 下面 ...