ちゃんとしないと VirtualizedList の仮想化を生かせない

3291 ワード
vurtualizedlist reactnative FlatList reactnative テキストリンク

React Native の話です。

と思った。

みたいなレイアウトの（下にスクロールした先にコンテンツが並んでいる）ユーザー詳細画面があったら、

A
const UserPage = () => {
  return (
    <ScrollView>
      <ProfileComponent />
      <FlatList
        data={tweets}
        renderItem={renderItem}
      />
    </ScrollView>
  )
}

ではなく、

B
const UserPage = () => {
  return (
    <FlatList
      ListHeaderComponent={<ProfileComponent />}
      data={tweets}
      renderItem={renderItem}
    />
  )
}

と作る。

A で作ってしまいそうだけど、これでは FlatList はうまく仮想化されず、レンダリングのパフォーマンスが最適化されない。

A, B それぞれの renderItem の中で console.log するなどして、画面よりだいぶ下のほうの item が、画面をスクロールする前の段階でレンダリングされてしまうかどうかを確かめられる。A だとレンダリングされてしまうが、B だとその item の近くまでスクロールしないとレンダリングされない。

あと onEndReached とかも使えないしね

参考