我有一个显示数据列表（用户个人资料卡）的反应父组件。每条数据都是一个子组件，由十几个子组件（渲染的配置文件卡）组成。
我在排序和过滤此列表时遇到性能问题。
在父组件中，我维护排序/过滤的数据列表，并在 render() 方法期间将其映射到子组件：
...
{ this.state.dataList.map(dataPoint =>
<ProfileCardController key={dataPoint.key} data={dataPoint} />
}
...
排序/过滤时，我更新这个列表，触发每个孩子的更新。当有数十或数百个孩子时，这很慢。
我怎样才能提高这个应用程序的性能？
注意：我已经排除了应用程序以下部分的速度：
- 排序/过滤本身。我使用 lunr.js，它的速度已经足够快了
- 更新/重新渲染页面的其余部分（它们与 ProfileCardController 更新相形见绌）。
一个想法是保持所有 ProfileCardControllers 呈现，但使用类似 display: none 来隐藏与当前过滤器不匹配的那些。我还必须对列表进行排序，以便匹配项以正确的顺序显示在顶部。这看起来很混乱，但也许这是要走的路？