react-router3.x hashHistory render两次的bug,及解决方案

  • Z时代
  • 2024-01-10
  • 分类：综合

react

先写一个简单App页面，其实就是简单修改了react-router" title="react-router">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,及解决方案 的全部内容， 来源链接： utcz.com/z/381581.html

回到顶部