2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【React Native】ScrollViewとFlatlistの違い

Posted at

#はじめに
現在UdemyでReact Nativeを勉強しています。
小さいことですが、なるほどと感じたことをこちらでアウトプットしようと思います。
ちなみに受講しているコースはこちら↓です。

React Native - The Practical Guide [2021 Edition]
https://www.udemy.com/course/react-native-the-practical-guide/

日本語字幕が無いのがちょっと残念ですが、分かりやすくゆっくり話してくれるのでだいぶ助かります。

#ScrollViewの書き方

<ScrollView>
     {goals.map(goal => (
       <VIew key={goal}>
         <Text>{goal}</Text>
       </View>
     ))}
</ScrollView>

シンプルにmap関数で表示させているものをScrollViewタグで挟んであげる。

#Flatlistの書き方

<FlatList
        keyExtractor={(item, index) => item.id}
        data={goals}
        renderItem={itemData => (
          <View>
            <Text>{itemData.item.value}</Text>
          </View>
        )}
      />

ScrollViewと書き方は全然違う。

#ScrollViewとFlatlistの違い
コース内ではパフォーマンスの観点でFlatlistをオススメされました。
ScrollViewは全てのデータをレンダリングしてしまうため、データの数が100,1000となるとパフォーマンスが下がってしまうようです。
一方Flatlistは画面に表示されるデータのみレンダリングするので、データ数が多くてもScrollViewと比べてパフォーマンスに影響しないようです。

#終わりに
今回はScrollViewとFlatlistの違いについて書きましたが、正直まだ自身を持って説明できません。
今後新たな学びがありましたら更新します。
もしご指摘等ありましたら、ご教示いただけると幸いです。

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?