react-native - 如何处理 ListView 排序性能？

Question

我有一个ListView显示聊天会话列表（类似于 Whatsapp/Facebook Messenger），其中包含以下内容rowHasChanged：

rowHasChanged: (r1, r2) => r1.id !== r2.id

我注意到未更新的项目正在重新渲染，即使我使用shouldComponentUpdate.

经过一些跟踪后，我发现因为我在克隆数据源之前对项目进行了不同的排序（新消息使项目跳转到列表的顶部），rowHasChanged所以正在比较不同的行。这样做是有道理的。

但是没有解决方案来支持以高性能方式进行排序吗？在 WPF中，由于相同的问题（也支持过滤等），除了数据之外，我们还CollectionViewSource收到了一些要排序的内容。

有谁知道摆脱这些冗余渲染的方法？

score 0 · Accepted Answer

你在使用这样的数据源吗？

this.setState({
    dataSource: this.ds.cloneWithRows(rowData)
});

尝试像这样使用：

this.setState(state => ({
    dataSource: this.state.dataSource.cloneWithRows(rowData)
}))

在第一种情况下，您为 dataSource 设置了一个新值，因此它不会使用 rowHasChanged，而是将其视为一个新的数据源。

1 回答 1