Performance 改进筛选和排序数据集时的React性能

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

我在排序和筛选此列表时遇到性能问题

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

。。。
{this.state.dataList.map（dataPoint=>
}
...

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

如何提高此应用程序的性能？

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

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

一种方法是保持所有ProfileCardController都呈现，但使用类似“显示：无”的方法来隐藏与当前筛选器不匹配的那些。我还必须对列表进行排序，以便匹配项以正确的顺序显示在顶部。这看起来很混乱，但也许是解决方法

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