#はじめに
現在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の違いについて書きましたが、正直まだ自身を持って説明できません。
今後新たな学びがありましたら更新します。
もしご指摘等ありましたら、ご教示いただけると幸いです。