FlatList ఉపయోగించి లిస్టులను ఎలా రెండర్ చేస్తారు?

Question

Accepted Answer

**FlatList** అనేది React Native యొక్క **స్క్రోల్ చేయగల డేటా లిస్టులను** సమర్థవంతంగా రెండర్ చేసే కాంపోనెంట్. ఇది అంశాలను **게으르게** (కనిపించేవి మాత్రమే) రెండర్ చేస్తుంది, ఇది దీర్ఘ లిస్టుల కోసం కార్యపనీయమైనది — ScrollView లో డేటాపై మ్యాపింగ్ చేయడం కంటే చాలా మెరుగైనది. ## FlatList — సమర్థవంతమైన లిస్టులు ```jsx import { FlatList, Text, View } from 'react-native'; function UserList({ users }) { return ( item.id} // unique key per item (important!) renderItem={({ item }) => ( // how to render each item {item.name} )} /> ); } ``` FlatList **data** శ్రేణిని, **renderItem** ఫంక్షన్ (ప్రతి అంశాన్ని రెండర్ చేయడం), మరియు **keyExtractor** (ప్రత్యేక కీలు) — తీసుకుని, అంశాలను సమర్థవంతంగా రెండర్ చేస్తుంది. ## ఎందుకు FlatList (ScrollView + map కాదు) ```text ❌ ScrollView with data.map(...) → renders ALL items at once (even off-screen) → slow/memory-heavy for long lists ✅ FlatList → renders only VISIBLE items lazily (virtualization); recycles as you scroll → performant for long/large lists → Use FlatList for any non-trivial list; ScrollView only for small, fixed content. ``` ## ఉపయోగకరమైన FlatList లక్షణాలు ```text ✓ onEndReached → load more data when scrolling near the end (INFINITE SCROLL / pagination) ✓ refreshing / onRefresh → PULL-TO-REFRESH ✓ ListHeaderComponent / ListFooterComponent / ItemSeparatorComponent ✓ numColumns → grid layout; horizontal → horizontal list ✓ SectionList → for sectioned/grouped lists ``` ## ఇది ఎందుకు ముఖ్యమైనది FlatListని అర్థం చేసుకోవడం ముఖ్యమైనది ఎందుకంటే **డేటా యొక్క లిస్టులను ప్రదర్శించడం అనేది దాదాపు విశ్వవ్యాప్త అవసరం** అనువర్తనాలలో, మరియు FlatList అనేది React Native లో దీన్ని చేయడానికి ప్రామాణిక, సమర్థవంతమైన మార్గం, కాబట్టి ఇది తప్పనిసరిగా తెలుసుకోవాలసిన జ్ఞానం. స్థిరంగా ప్రతి అనువర్తనం లిస్టులను ప్రదర్శిస్తుంది (ఫీడ్‌లు, సందేశాలు, సెర్చ్ ఫలితాలు), మరియు దీన్ని సమర్థవంతంగా చేయడం ముఖ్యమైనది. మূల అంతర్దృష్టి ఏమిటంటే **FlatList అంశాలను게으르게** (కనిపించేవి మాత్రమే, వర్చువలైజేషన్ ద్వారా, మీరు స్క్రోల్ చేస్తున్నప్పుడు పునర్వినియోగం) రెండర్ చేస్తుంది — ఇది దీర్ఘ లిస్టుల కోసం సమర్థవంతమైనది, **ScrollView with `data.map()`** సాధారణ పొరపాటే కాకుండా (ఇది అన్ని అంశాలను ఎక్కసారి రెండర్ చేస్తుంది, ఆ కూడా స్క్రీన్ బయట), ఇది దీర్ఘ లిస్టుల కోసం నెమ్మదిని మరియు స్మృతి సమస్యలను కలిగిస్తుంది. **ఏదైనా నిరాన్యమైన లిస్ట్ కోసం FlatList ఉపయోగించాలని** (మరియు ScrollView కేవలం చిన్న, సవరణీయ కంటెంట్ కోసం మాత్రమే) అర్థం చేసుకోవడం ముఖ్యమైన ఆచరణాత్మక జ్ఞానం ఇది నిజమైన పనితీరు సమస్యలను నిరోధిస్తుంది. **ప్రాధమిక ఉపయోగం** అర్థం చేసుకోవడం (`data` శ్రేణి, `renderItem` ఫంక్షన్, మరియు ప్రత్యేక కీల కోసం `keyExtractor`) లిస్టులను రెండర్ చేయడానికి అవసరం. **ఉపయోగకరమైన లక్షణాలను** అర్థం చేసుకోవడం — `onEndReached` (అనంత స్క్రోల్/పేజీనేషన్ కోసం, చివరకు సమీపంలో మరిన్ని డేటాను లోడ్ చేయడం — చాలా సాధారణ అవసరం), పుల్-టు-రిఫ్రెష్, హెడర్/ఫూటర్/సెపరేటర్ కాంపోనెంట్‌లు, గ్రిడ్ మరియు సమాంతర లేআউట్‌లు, మరియు సమూహీకృత లిస్టుల కోసం SectionList — అనువర్తనాలు కలిగి ఉన్న సాధారణ లిస్ట్ అవసరాలను కవర్ చేస్తుంది. లిస్టులను సమర్థవంతంగా ప్రదర్శించడం అనేది దాదాపు విశ్వవ్యాప్త అనువర్తన అవసరం మరియు FlatList (దాని게으lazy రెండర్‌లో/వర్చువలైజేషన్‌తో) ప్రామాణిక, సమర్థవంతమైన React Native పరిష్కారం — చెత్త ScrollView+map విధానం కంటే చాలా మెరుగైనది — FlatList అర్థం చేసుకోవడం ముఖ్యమైనది, తరచుగా-వర్తించిన React Native జ్ఞానం — ఒక ప్రధాన కాంపోనెంట్ దాదాపు ప్రతి అనువర్తనంలో ఉపయోగించబడుతుంది డేటా లిస్టులను ప్రదర్శించడానికి, ఇక్కడ దాని సమర్థవంతమైన game lazy రెండర్లో మరియు లక్షణాలను (అనంత స్క్రోల్ మరియు పుల్-టు-రిఫ్రెష్ వంటివి) అర్థం చేసుకోవడం సమర్థవంతమైన, క్రియాత్మక లిస్టులను నిర్మించడానికి ప్రాథమికం, React Native అభివృద్ధి కోసం ప్రామాణిక నైపుణ్యం.