web-dev-qa-db-ja.com

VirtualizedList：更新に時間がかかる大きなリストがある

多数のアイテムでFlatListを使用します。 Expo XDEから次のアラートを受け取ります。

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

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

reactjsreact-nativereact-native-flatlist
22
Przemek Piechota

以前にこのエラーが発生していました。コードを最適化した後、表示されなくなりました。この問題は、FlatListを作成するComponentのrender（）関数と、List内の各アイテムをレンダリングする関数に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に通常の関数を渡していたとき、つまり、次のようなことをする関数：

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

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

リスト全体を初めてレンダリングするのにはまだ比較的時間がかかります。ただし、initialNumToRenderを使用すると、画面がほぼ瞬時にいっぱいになります（残りのアイテムはバックグラウンドでレンダリングされます）。さらに重要なことに、その最初のレンダリングの後、FlatListは一度に1つのアイテム（変化するアイテム）のみをレンダリングする必要があります。

この投稿 とても役に立ちました）。

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

24
Kes115

また、確かめる、あなたはFlatListをSourceListでカプセル化しないでください。ネイティブベースを使用していることに気づかなかったので、コンポーネント<Content> ScrollListを置き換えます。

詳細については、こちらを参照してください： https://stackoverflow.com/a/54512633/1256697

1
suther