React选项卡导航速度慢

Question

我创建了选项卡，如本例所示：

http://codepen.io/trey/post/tabbed-navigation-react

它似乎工作得很好，内容很少，但呈现一个表格会减缓标签之间的切换，特别是在移动平台上，会出现明显的延迟。

下面是一个表的示例：

http://jsfiddle.net/xn2bv6v5/

var Content = React.createClass({
  render: function(){
    ...

慢的原因是什么？

与我的实际更复杂的数据，它需要3-4秒来切换标签移动。我还尝试更改它，以便选项卡切换两个内容组件的可见性，而不是更改一个组件呈现的内容，但这似乎没有任何效果。

唯一有帮助的是用纯js切换内容元素的可见性，这样就不会发生react，所以react部分肯定有根本问题，我只是说不出什么？

Answer 1

如果您的初始呈现时间不是性能方面的问题，您可以同时呈现所有选项卡内容，然后将其放入简单的包装器中，以显示/隐藏它们。然后只会切换他们的能见度。确保可见性切换存在于与重内容不同的组件中。

然后确保您在内容和任何更深层次的元素上实现了shouldComponentUpdate，这样当它知道没有任何更改时，这种反应可以更快地跳过不同的组件。使用实现良好的shouldComponentUpdate函数将更深层次的布局划分到几个组件上，这将大大改进您的视图的更新。

下面的文档为您提供了一些关于shouldComponentUpdate的更多信息，您应该如何实现它以及它如何帮助提高性能：https://facebook.github.io/react/docs/advanced-performance.html