过滤具有大量行的ListView答案

【问题标题】：Filtering ListView with large number of rows过滤具有大量行的ListView
【发布时间】：2015-11-18 17:16:39
【问题描述】：

尝试在 React Native 中实现 ListView 的快速过滤。目前我正在过滤 DataSource 来实现这一点。它可以工作，但会导致很大的性能问题。问题如下：

有一个包含 100 个项目的 ListView。所有这些都被渲染了
正在应用过滤器，将其缩小为 2 个项目
当过滤器被清除并且 DataSource 回到最初的 100 项时 ListView 重新渲染 98 项导致大的性能问题（讨论了批量渲染新行时的 ListView 性能here）

我错过了什么吗？

编辑：添加了 rnplay 示例应用程序来演示我目前使用的方法https://rnplay.org/apps/szko6Q

【问题讨论】：

没有代码示例的问题受到的关注较少，请发布您的代码示例并提出与提供的代码相关的问题。
可能会计算适合屏幕的内容并仅渲染这些项目，检测滚动并在用户滚动时渲染剩余项目。（你也可以删除那些滚动出屏幕的，有一个实验性的道具叫做 removeClippedSubviews）

标签： react-native

【解决方案1】：

在向用户呈现以下这些属性时

<ListView
   removeClippedSubviews={true}
   renderRow={this.renderRow}
   dataSource={this.getDataSource()}
   renderScrollComponent={(props) =><React.RecyclerViewBackedScrollView {...props}/>}
   style={{overflow:'hidden'}}
   renderSectionHeader={this.renderSectionHeader}/>

【讨论】：