先写一个简单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链接,只会渲染一次,修改之后完整的代码如下: