链接进入react二级路由,引发的子组件二次挂载

这个问题很怪,我两个二级路由从链接进入的时候,会挂载两次子组件。

  • 从链接进入,是因为新页面在新标签页打开的。

  • 有子组件是因为公共组件提取

  • 同样的操作,有一些简单的二级路由页面,就不会挂载两次。

讲道理,没有理由有的可以,有的不可以,程序是死的,所以我断定出现这种差异,是因为代码有bug了。那么问题来了,怎么定位这个问题?

关于定位这个问题,这次吃了个大亏,说一下思路和过程吧。

  1. 第一症状是这样的,链接进入二级路由,会发出两个相同的网络请求,这个请求是放在 componentDidMount 生命周期里的,如你所知,这个生命周期是用来做初始化操作的。
    在组件的生命周期里 只会被调用一次。那么,两次请求的意思很明显,挂载了两次,到这里是很自然而然的考虑。so,在 componentWillUnmount生命周期里alert进行验证,猜想是需要验证才能确定的

  2. 确定了两次挂载后,就要考虑,哪些因素会让这个组件销毁一次?(找到销毁的原因等同于找到了挂两次的原因)

  • 【三元判断】 在react世界里,没有类似vue中 keep-alive这种保存组件状态的东西, 我管它叫做 离开即销毁。在开发中会经常用三元运算,来做显示不显示(这里没有隐藏,只有销毁)。
    so,我首先想到的也是这个可能,(至少检查过之后,可以排除这个问题)。我进行了长时间的检查(从二级路由的路由组件,到父组件,到layout布局组件,甚至祖先级的兄弟组件 都进行了检查,这个工作量有点大了,这是需要注意的地方,以后在排查问题的过程中,应该首先保证有限的因素先排查,最后才大海捞针,节省时间),结果跟你想的一样,毫无所获。那么这个三元判断的因素先排除。

  • 【路由跳转?配置?】排除了上一个,再要想到的就是路由跳转和配置方面的问题。这里的路由还是老式的 对象配置方法(对象平铺,并不能嵌套),所以把路由捋了一遍,也没有发现什么问题。那么考虑会不会是配置出了问题呢?于是我又配置了一个测试路由,,配置顺序?匹配顺序?发现也有同样的问题,搞的我一下子不知所措了。彻底懵了。再仔细想想,还有什么能影响这个呢?我想了很久,还是没有头绪。难顶。。。

  • 【安装devtools开发工具调试】 平常开发过程中,我一般是不用这个工具的,用不着,今天装上用它调试了一下,检查里 也没有发现什么问题,请求两次 ,state和props也没有异常。

  • 【点开主页,开始思考路由的嵌套】 没有头绪,还是没有头绪,然后我刷新了一会主页,发现主页始终是正常的,这一方面说明路由还是在正常工作的,另一方面,也说明我的代码结构里 还是有问题的。所以,遇到问题的时候,不能放弃,不要放弃。 我查了一些资料,没有相似的问题,我还傻兮兮的照着别人的博客多写了一个重定向,希望把父组件先加载进来,结果也是没什么用。我甚至考虑用render,children来重写这块的路由规则。
 <Switch>
              {getRoutes(match.path, getRouters(routerData,match)).map(item => (
                <Route
                  key={item.key}
                  path={item.path}
                      component={item.component}
                  exact={item.exact}
                />
              ))}
               <Redirect  to='/user/index/ioc' />
            </Switch>

在思考路由的过程中,我还对每一级的路由进行了过滤,

    const { routerData, match } = this.props;
    const  getRouters = (routerData,match) =>{
         const routes = {}
         Object.keys(routerData).map(route => {
            if(route.indexOf(match.path)>-1){
                return routes[route] = routerData[route];
            }
         })
        return routes
    }

在这个过程中,也感受到这种平铺对象操作的繁琐。但是到目前为止,关于这个bug的原因,没有一点进展,没有定位到问题所在,也没有解决方案。

  • 【柳暗花明】事情的转机出现在我6点下楼抽了一颗烟,空气中分不清是雾还是霾,我觉得 实在找不到原因,就重写一下页面,或者对项目进行一个大重构。回来之后,我把这个组件挂到主页路由上,这时候奇迹出现了,不会挂载2次了,我那个兴奋啊 , 从业以来花时间最长的bug,终于可以让我喘口气,我把这个页面放在一级路由,发现是完美运行的。 到这里,业务上的问题可以解决,但是还是没有把问题搞清楚。
    于是,我考虑二级路由的问题,我至今还是没想明白为什么二级路由,别的页面不会挂载2次,仅这两个页面挂载2次,隐约觉得,这两个页面也是有问题的。

  • 【其他尝试】发现二级路由的问题之后,由于并不想把它俩放在顶层路由,我干脆给它放到三级路由了,原始页面仍然有问题,换空白组件测试,通过了。然后一下一下的还原,发现只要引入了一个table的公共组件,就会挂载2次。

  • 【最后】最后又尝试二级路由,不显示table组件,这种情况下,发现也是正常的,所以基本排除路由的问题了。

解决方案:

  1. 提升至顶级路由。
  2. 改造table公用组件。

问题到这里算是基本找到原因了,但具体是为什么会出现这种情况,明天再尝试解决,先把过程记录下来。在react世界里,到处都充满了蝴蝶效应,有时候你的一个巨大bug,很可能就是一个逗号引起的,所以搞react开发的同学,要更认真仔细了

猜你喜欢

转载自www.cnblogs.com/chengyunshen/p/11415643.html
今日推荐