请问一下关于多标签页的性能问题?

[MLDIE]

之前用了您的多标签页的方案应用到现有项目中, 但是遇到了一些性能问题:

每次打开一个新的标签页花费的时长会增加几十到一百毫秒不等的等待时间, 打开后切换标签页的等待时间也会同样变长.

如下图:

ps: 是每一次点击菜单或者切换标签页的click.

标签页再关掉之后等待时间会变少, 但是都是浏览器警告的范围.

请问您之前有没有遇到这样的问题并且如何解决的?或者有什么方案?谢谢

[MLDIE]

我继续看了一下应该是每一次添加标签和修改标签都会把TabPane中的内容全部重新render一次:

如图(您的项目):

ps: 这是在这5个页面组件中render内return前打印对应的页面.

如果每个页面比较复杂,或者标签过多,比如我的项目, 全部重新渲染就会花费更多时间

[MLDIE]

shouldComponentUpdate 判断是否重新渲染已解决

[yunsii]

不好意思，才看见。不知道是不是没 watch 的问题，我没收到通知。

如果打开的比较多再加上电脑性能较差的话，的确会有这样的问题，我暂时没解决。之所以这么做，是考虑到一个层次较深的路由的页面的刷新问题，所以直接采用了这种简单直接的办法。

你的解决办法是给每个页面都加上 shouldComponentUpdate ？

[yunsii]

测试了一下，如果一个页面不用嵌套路由刷新页面的话，直接

shouldComponentUpdate() {
  return false;
}

应该是一个不错的办法。

需要路由刷新页面的地方： router.config.js#L141

[yunsii]

通过封装 children 解决了这个问题，参考引用的 commit ，有什么问题可进一步讨论。

README 中关于性能问题的说明

[MLDIE]

我现在是这么处理的

shouldComponentUpdate(nextProps: any) {
    return nextProps.history.location.pathname === nextProps.location.pathname;
}

判断路由是否为当前路由
基本每个需要打开标签的模块都要判断一下
你的提交我还没来得及看
不过谢谢解答~

[yunsii]

我是通过读取路由配置判断的是否需要刷新，这样就不用去为每个页面添加这个额外的生命周期函数了。

ps: 要不是你提供的思路，我还在琢磨怎么搞合适呢 2333

[yunsii]

@MLDIE 回过头来发现如果直接在页面组件添加 shouldComponentUpdate 方法，并且直接 return false 的话，会导致异步注入的数据无法刷新页面，你这样没有问题的吗？

[yunsii]

新方法通过高阶组件判断是否需要刷新

[MLDIE]

异步注入是无法刷新未激活页面的..

[MLDIE]

我试试高阶组件判断的方法呢. 谢谢大佬~~

[yunsii]

最近遇到一些问题，才回过头发现了这个严重的问题 (:3J∠)

现在的方法我测试了都 ok ，有什么问题再讨论

[MLDIE]

我在用高阶组件方式判断的时候遇到一个问题, 在tab中组件是受控form, 改变表单中值的时候, 在HOC中shouldComponentUpdate判断不了from中控件的值都否有变化, 所以不会重新render..你有这种问题么?

[yunsii]

2333 ，我刚更新了文档，把 withRoutePage 提前到 Form.create() 之前就行了。因为 Form.create() 注入的都是方法。

[MLDIE]

lol..