Question

我创建了标签，如下例所示：

它似乎可以很好地处理很少的内容，但渲染表会减慢选项卡之间的切换速度，特别是在移动设备上有明显的延迟。

以下是表格的示例：

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

缓慢的原因是什么？

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

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

Answer 1

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

然后确保对内容和任何更深层元素实现shouldComponentUpdate，以便当React知道无论如何都没有更改时，可以更快地跳过变异组件。通过良好实施的shouldComponentUpdate函数将更深层次的布局拆分为多个组件，可以显着改进视图更新。

以下文档为您提供了有关shouldComponentUpdate的更多信息，如何实施以及如何帮助提高效果：https://facebook.github.io/react/docs/advanced-performance.html