Question

在导航到包含250个重复组件的路线时，我遇到了反应和反应路由器的延迟。我用chrome进行了分析，发现瓶颈在于“ReactCompositeComponentMixin.mountComponent”。该函数本身花费36.1ms，总共570.7ms。

我注意到，在react-router中访问路由会导致分配的routehandler组件（其中包含这250个重复的组件）每次都重新初始化。在这种情况下，此routehandler组件的状态对象是Immutable，但我无法利用它的好处，因为shouldComponentUpdate永远不会被触发。

我想知道这是否是一个知道问题的反应。如果是，那么我会尝试在初始加载时渲染有限的记录，并在用户向下滚动时加载其余的记录。

所有组件都是“纯粹的”，不会执行复杂的计算。

重复组件的html结构如下：

<section data-reactid=".0.3.0.$3553">
  <div data-reactid=".0.3.0.$3553.0"><span data-reactid=".0.3.0.$3553.0.0">TEST</span><span data-reactid=".0.3.0.$3553.0.1">TEST</span>
  </div>
  <header data-reactid=".0.3.0.$3553.1">
    <h1 data-reactid=".0.3.0.$3553.1.0">TEST</h1>
  </header>
  <footer data-reactid=".0.3.0.$3553.2">TEST</footer><i data-reactid=".0.3.0.$3553.3"></i>
  <button data-reactid=".0.3.0.$3553.4">TEST</button>
  <div data-reactid=".0.3.0.$3553.5 ">
    <button data-reactid=".0.3.0.$3553.5.0 ">TEST</button>
  </div>
</section>

Answer 1

由于您在渲染列表时遇到此性能问题，我的直觉是考虑keys

渲染应用时是否会看到警告？

我建议为每个重复的结构添加一个唯一的key属性。

最简单但又不是最好的方法是添加index

arrayOfData.map((data, index) => <RepeatedComponent key={index} />)

虽然这会为每个key分配一个唯一值，但这种方法有problems。

最好的方法是将id作为data的一部分，也许是unique identifier，您可以像这样使用

arrayOfData.map(data => <RepeatedComponent key={data.id} />)

这会产生id的负担并确保它的独特性，但这是最好的方法。

反应性能：呈现具有明显延迟的中型列表

1 个答案: