reactjs - react 性能: rendering medium size list with obvious delay

Question

当导航到具有 250 个重复组件的路线时，我遇到了 React 和 React-router 的延迟。我用 chrome 进行了分析，发现瓶颈位于“ReactCompositeComponentMixin.mountComponent”。该函数本身花费了 36.1ms，总共花费了 570.7ms。

我注意到访问react-router中的路由会导致分配的routehandler组件(保存这250个重复组件)每次都重新初始化。在这种情况下，该路由处理程序组件的状态对象是不可变的，但我无法利用它的好处，因为 shouldComponentUpdate 永远不会被触发。

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

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

重复组件的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 的负担并确保它对您来说是独一无二的，但这是最好的方法。