大きなリストでのReact-Native FlatListのパフォーマンスの問題

Question

私のコードは、配列へのJsonデータをFlatListを使用してリストします。電話帳の写真とテキストのように見えます。

は、ここに私のコードです：

renderItem = ({ item }) => 
    (
    <ListItem 
     title={item.username} 
     avatar={{ uri: item.photo }} 
    /> 
    ) 


    render() { 
    console.log(this.state.myData); 
    return (
     <View style={styles.container}> 
     <FlatList 
      data={this.state.myData} 
      renderItem={this.renderItem} 
     /> 
     </View> 
    ); 
    } 

その作品と私は出力を得るが、パフォーマンスが低下します。レンダリングには約10秒かかり、ユーザーにとって迷惑です。私はそれをより速くするために何をすべきですか？

Answer 1

は、ここでは、あなたのflatlistを最適化するために行うことができますいくつかの改良点です：

1. 改ページ
   • あなたのバックエンドでデータをページ分割して、スクロールが終わりに近づくときにそれを再フェッチすることができます。 onEndReachedとonEndReachedThresholdはあなたを助けることができます。
2. アップデートは、あなたが49にネイティブバージョンを反応したり、ファイバー16
   • 最新のためのレンダリング、すべてが高速に実行されます驚くべき性能向上とスムーズな
3. 使用PureComponentを持つアイテム
   • PureComponentコンポーネントのレンダリングとメモリ使用を改善し、レンダリング項目を純粋なものとして作成することで、より良いパフォーマンスを提供します
4. リアクトので、それはアイテムのレンダリングを改善しgetItemLayout小道具
   • の定義は、以前

はそれが

を役に立てば幸いそのレイアウト定義を知っているだろう