☰

VirtualizedList: 更新が遅い大きなリストがあります 質問する

tag-icon • tag-icon reactjs react-native react-native-flatlist
VirtualizedList: 更新が遅い大きなリストがあります 質問する

多数のアイテムを持つ FlatList を使用しています。Expo XDE から次のアラートが表示されます。

VirtualizedList: 更新が遅い大きなリストがあります。renderItem 関数が PureComponent、shouldComponentUpdate などの React パフォーマンスのベスト プラクティスに従ったコンポーネントをレンダリングすることを確認してください。{"dt":13861,"prevDt":1498372326027,"contentLength":6624}

FlatList に PureComponent などの最適化アプローチをいくつか使用しましたが、それでもこのアラートが表示されます。最適化について説明する前に、FlatList が最適化されていてもこのアラートが常に表示されるかどうかを教えてください。それとも、パフォーマンスに関する実際の問題を示しているのでしょうか。FlatList のパフォーマンスが良好なので質問します。

ベストアンサー1

以前、このエラーが表示されていました。コードを最適化したら、このエラーは表示されなくなりました。FlatList を作成するコンポーネントの render() 関数と、リスト内の各項目をレンダリングする関数に console.log() ステートメントを追加することで、問題を解決しました。以前は、そのページ上のコンポーネントの状態が変化するたびに (FlatList に関連しないコンポーネントであっても)、コードが FlatList 全体とそのすべての項目を再レンダリングしていたことに気付きました。さまざまなコンポーネントを PureComponents に変換することで、この問題を修正しました。FlatList 宣言は次のようになります。

<FlatList
    ref={(ref) => { this.flatListRef = ref; }}
    data={allPosts}
    initialNumToRender={7}
    renderItem={({ item }) =>
      <Post postJson={item} isGroupAdmin={isGroupAdmin} user={user} />
    }
  />

<Post />純粋なコンポーネントを返していることに注意してください。

import React, { PureComponent } from 'react';
class Post extends PureComponent {

  render() { ... }
}

これにより、投稿が変更された場合にのみ FlatList が再レンダリングされるようになります。以前は、renderItem次のようなことを実行する通常の関数を ie に渡していました。

return (
  <View>
  ...
  </View>
);

FlatList は、アイテムが変更されるたびにすべてのアイテムを再レンダリングしていることに気付きました。現在は、PureComponent を使用することで、FlatList はリストに追加された新しいアイテムのみをレンダリングします (リストがすでに表示されている場合)。

リスト全体を最初にレンダリングするには、まだ比較的長い時間がかかります。ただし、initialNumToRender画面がほぼ瞬時にいっぱいになることが保証されます (残りの項目はバックグラウンドでレンダリングされます)。さらに重要なのは、最初のレンダリングの後、FlatList は一度に 1 つの項目 (変更される項目) のみをレンダリングする必要があることです。

私は見つけたこの郵便受け非常に役立ちます）。

これも説明されていることに気づきましたここ

おすすめ記事