React 选项卡导航很慢答案

【问题标题】：React tab navigation is slowReact 选项卡导航很慢
【发布时间】：2016-03-20 12:29:29
【问题描述】：

我创建了如下示例所示的选项卡：

它似乎在内容很少的情况下工作得很好，但呈现表格会减慢选项卡之间的切换速度，尤其是在移动设备上会有明显的延迟。

这是一个带有表格的示例：

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

速度慢的原因是什么？

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

唯一有帮助的是用纯 js 切换内容元素的可见性，这样就不会发生反应渲染，所以反应部分肯定存在根本性的问题，我就是不知道是什么？

【问题讨论】：

【解决方案1】：

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

然后确保在内容和任何更深层次的元素上实现shouldComponentUpdate，以便 React 在知道没有任何更改时可以更快地跳过差异组件。使用良好实现的 shouldComponentUpdate 函数将您的更深层次的布局拆分为多个组件应该可以大大改进您的视图更新。

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

【讨论】：