过滤和排序数据集时提高React性能

Question

我有一个反应父组件，显示数据列表（用户的配置文件卡）。每条数据都是由十几个子组件（渲染的配置文件卡）组成的子组件。

在排序和过滤此列表时，我遇到了性能问题。

在父组件中，我维护已排序/已过滤的数据列表，并在render（）方法中将其映射到子项：

...
{ this.state.dataList.map(dataPoint =>
  <ProfileCardController key={dataPoint.key} data={dataPoint} />
}
...

排序/过滤时，我会更新此列表，触发每个孩子的更新。当有几十个或几百个孩子时，这很慢。

如何改善此应用的效果？

注意：我已排除了应用程序以下部分的速度：

• 排序/过滤本身。我使用lunr.js并且它的速度超过了它
• 更新/重新呈现页面的其余部分（它们与ProfileCardController更新相比相形见绌）。

一个想法是保持所有的ProfileCardControllers呈现，但使用display：none之类的东西来隐藏当前过滤器不匹配的那些。我还必须对列表进行排序，以便匹配以正确的顺序显示在顶部。这看起来很混乱，但也许它是要走的路？