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

Question

我有一个 ListView显示聊天 session 列表(类似于 Whatsapp/Facebook Messenger)，其中包含以下 rowHasChanged :

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

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

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

但是没有解决方案可以支持以高性能方式进行排序吗？在 WPF 中，我们有一个 CollectionViewSource收到 something to sort by除了它的数据因为同样的问题(也支持过滤和其他)。

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

Answer 1

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

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

尝试像这样使用:

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

在第一个 sutiation 中，您为 dataSource 设置了一个新值，因此它不会使用 rowHasChanged，并将其视为新的 dataSource。