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

我有一个ListView,显示聊天会话列表(类似于Whatsapp / Facebook Messenger),其中包含以下rowHasChanged:
rowHasChanged: (r1,r2) => r1.id !== r2.id

我注意到即使我使用shouldComponentUpdate,也会重新呈现未更新的项目.

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

但它是不是有一个解决方案来支持以高性能的方式进行排序?在WPF中,我们有一个CollectionViewSource,除了它的数据之外还收到了something to sort by,因为同样的问题(也支持过滤和其他).

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

您是否正在使用dataSource?
this.setState({
    dataSource: this.ds.cloneWithRows(rowData)
});

尝试使用这样:

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

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

相关文章

一、前言 在组件方面react和Vue一样的,核心思想玩的就是组件...
前言: 前段时间学习完react后,刚好就接到公司一个react项目...
前言: 最近收到组长通知我们项目组后面新开的项目准备统一技...
react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom...