反应选项卡导航很慢

React tab navigation is slow

本文关键字：导航 选项      更新时间：2023-09-26

>我创建了选项卡，如以下示例所示：

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

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

下面是一个带有表格的示例：

http://jsfiddle.net/xn2bv6v5/

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

缓慢的原因是什么？

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

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

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

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

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

相关文章：