ListViewソートの処理方法

私は、次のrowHasChangedで、（のWhatsApp/Facebookのメッセンジャーと同様に）チャットセッションのリストが表示されListViewを持っている：ListViewソートの処理方法

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

私も、更新されていないアイテムが再レンダリングなっていることに気づきました私がshouldComponentUpdateを使用している場合。

データソースを複製する前にアイテムを別々に並べ替えるので（新しいメッセージがアイテムをリストの先頭に移動させる）、いくつかのトレースの後に私が見つけたのはrowHasChangedです。それがそれをするのは理にかなっています。

しかし、パフォーマンス上のソートをサポートするソリューションはありませんか？ WPFでは、同じ問題（フィルタリングなどもサポートされているため）のために、something to sort byを受け取ったCollectionViewSourceがありました。

誰でもこれらの冗長なレンダリングを削除する方法を知っていますか？

出典

2017-01-11 Moti Azu

'ListViewDataSource'は不変なデータを使用しているので、' ListView'を使ってそれを使うことはできません。しかし、 'removeClippedSubviews'を有効にしておけば、非常に多くの行をレンダリングするようには見えません。あなたはそれを試しましたか？ –

@ GarrettMcCullough問題は、不変のデータや描画が多すぎることではありません。 1つの行がその位置を変更すると、他のすべての行がデータ内の位置を変更するため、リストビューは異なる行を互いに比較しているため、すべての行が変更された行とみなされます。 –

Moti、私のコメントは、あなたが不変のデータオブジェクトを使用しているため、新しいレコードをキューの先頭にプッシュすると*データ構造が変更されているため、すべての行を再レンダリングする必要があるデータ構造が異なるようになりました。しかし、 'removeClippedSubviews'がオンになっている場合は、表示行を再描画するだけなので、すべての行を再描画しても問題ありません。パフォーマンス上の問題は発生しません。リストビューの代替案の一部を見るかもしれません。 –

このようなデータソースを使用していますか？

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

次のように使用してみてください：最初のsutiationで

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

それは勝ったので、あなたは、データソースに新しい値を設定していますrowHasChangedを使用せず、新しいdataSourceのようにします。

出典

2017-03-15 06:44:13 njafei

いいえ、状態のデータソースを一貫して使用していました。 RowHasChangedに関する問題ではなく、行の比較がインデックスのみに基づいているため、おそらく不要な再レンダリングを引き起こさずにListViewをソートすることはできません。 –

ListViewソートの処理方法

答えて

関連する問題