zoukankan      html  css  js  c++  java
  • React-Router路由跳转时render触发两次的情况。

    问题:React-Router路由跳转时,render触发两次,导致页面重复渲染。

    原因:项目中使用的react-router ^3.x.x。react-router路由跳转时,this.props.location.action的值会有两种状态。这两种状态都会触发render。故页面渲染两次。

         1、当点击Link时,this.props.location.action=PUSH,2、当浏览器前进后退时,this.props.location.action=POP。

         所以当点击了Link时,状态先是PUSH,之后浏览器发生前进后退,状态变为POP。

    解决方案:在路由层,使用react周期函数 shouldComponentUpdate(生命周期不熟悉的同学请另查资料) 进行 this.props.location.action值得判断。根据项目实际需要判断值是PUSH,或者是POP。

         本人选择的是POP,因为项目中有些需求要使用到 window.location.hash='xxxxxxxx',这种情况PUSH是触发不到的,所以路由跳转会失败。

    1 shouldComponentUpdate() {
    2         // POP 浏览器前进后退, PUSH 点击Link
    3         return this.props.location.action === "POP"
    4 }

    备注:facebook官方说此情况是 react-router 的BUG,已经在 ^4.x.x中修复了。

         以上内容均是本人在实际项目开发中所遇所得,每个人所遇BUG不同,请大神轻喷。谢谢! 

  • 相关阅读:
    Anaconda安装之路——坑呀!
    初读《企业应用架构模式》——阅读笔记1
    《需求工程》阅读笔记3
    codeforces 432D. Prefixes and Suffixes(后缀数组)
    hdu 6096String(trie树)
    uva 1349 Optimal Bus Route Design(拆点,费用流)
    数据结构c语言
    六个排序算法
    c无聊编程
    文件写入与文件读取
  • 原文地址:https://www.cnblogs.com/ygjoe/p/7193540.html
Copyright © 2011-2022 走看看