FlatList-data, renderItem og keyExtractor
Send en tabell til data-propen i FlatList, implementer renderItem slik at den returnerer en stylet radkomponent, og oppgi en keyExtractor for stabil identitet i listen.
FlatList-data, renderItem og keyExtractor er en gratis leksjon i React Native Academy på CoddyKit. Dette er leksjon 1 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i React Native Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i React Native Academy inneholder totalt 4 leksjoner.
Hvorfor FlatList i stedet for ScrollView?
ScrollView gjengir alle underordnede elementer samtidig, noe som blir tregt når hundrevis av elementer vises. FlatList virtualiserer listen — den gjengir bare elementene som for øyeblikket er synlige på skjermen, samt en liten buffer. Dette reduserer minnebruken betydelig og forbedrer rulleytelsen for store datasett.
data-propen
Send arrayet med elementer til data-propen. FlatList går gjennom dette arrayet og kaller renderItem for hvert element. Arrayet kan inneholde JavaScript-objekter av alle typer. Endringer i data-arrayet utløser ny gjengivelse av berørte listeelementer.
const DATA = [
{ id: '1', name: 'Alice' },
{ id: '2', name: 'Bob' },
{ id: '3', name: 'Carol' },
];
<FlatList data={DATA} ... />renderItem-propen
renderItem-propen er en funksjon som mottar et objekt med en item-egenskap (det gjeldende elementet i arrayet), og som må returnere et React-element. Det er her De definerer hvordan hver rad skal se ut. Hold den som en stabil referanse ved å bruke useCallback for å unngå unødvendig ny gjengivelse.
const renderItem = ({ item }) => (
<View style={styles.row}>
<Text>{item.name}</Text>
</View>
);
<FlatList
data={DATA}
renderItem={renderItem}
/>keyExtractor-propen
keyExtractor forteller FlatList hvordan den skal hente ut en unik strengnøkkel fra hvert element. React bruker disse nøklene til å holde oversikt over hvilke elementer som ble endret under ny gjengivelse. Uten en riktig nøkkeluttrekker bruker FlatList arrayindeksen som reserve, noe som kan føre til vanskelige feil når data endres.
<FlatList
data={DATA}
renderItem={renderItem}
keyExtractor={(item) => item.id}
/>Et komplett FlatList-eksempel
Ved å kombinere data, renderItem og keyExtractor får De en fullt fungerende, rullbar og virtualisert liste. De kan style radene inne i renderItem på samme måte som alle andre komponenter. FlatList håndterer automatisk rulle- og berøringshendelser.
import { FlatList, View, Text, StyleSheet } from 'react-native';
const DATA = [
{ id: '1', title: 'First Item' },
{ id: '2', title: 'Second Item' },
{ id: '3', title: 'Third Item' },
];
export default function App() {
return (
<FlatList
data={DATA}
keyExtractor={(item) => item.id}
renderItem={({ item }) => (
<View style={styles.item}>
<Text>{item.title}</Text>
</View>
)}
/>
);
}
const styles = StyleSheet.create({
item: { padding: 16, borderBottomWidth: 1, borderColor: '#eee' },
});Legge til topptekst og bunntekst i en liste
Bruk ListHeaderComponent til å gjengi innhold over listen, for eksempel et søkefelt eller en sidetittel, og ListFooterComponent til innhold under listen, for eksempel en lasteindikator når flere data hentes. Disse komponentene ruller sammen med listen, i motsetning til en visning som er plassert utenfor FlatList.
<FlatList
data={DATA}
renderItem={renderItem}
keyExtractor={(item) => item.id}
ListHeaderComponent={() => <Text style={styles.header}>Users</Text>}
ListFooterComponent={() => <ActivityIndicator />}
/>Tom liste med ListEmptyComponent
Når data-arrayet er tomt, gjengir FlatList ingenting som standard. Oppgi en ListEmptyComponent for å vise en plassholdermelding eller illustrasjon når det ikke finnes noen elementer. Dette er mye ryddigere enn å pakke FlatList inn i en betingelse.
<FlatList
data={filteredData}
renderItem={renderItem}
keyExtractor={(item) => item.id}
ListEmptyComponent={() => (
<Text style={styles.empty}>No results found</Text>
)}
/>Elementskilletegn med ItemSeparatorComponent
I stedet for å legge kantlinjestiler direkte på rader bruker De ItemSeparatorComponent til å gjengi et skilletegn mellom elementene. React Native gjengir bare skilletegnet mellom elementer, ikke før det første eller etter det siste. Dermed unngås doble kantlinjer langs kantene.
const Separator = () => (
<View style={{ height: 1, backgroundColor: '#eee' }} />
);
<FlatList
data={DATA}
renderItem={renderItem}
keyExtractor={(item) => item.id}
ItemSeparatorComponent={Separator}
/>Horisontal FlatList
Sett propen horizontal til true for å gjengi en liste som ruller horisontalt. Dette er nyttig for karuseller, kategoribrikker eller historierader. Propen showsHorizontalScrollIndicator kan skjule rullefeltet for et ryddigere utseende.
<FlatList
horizontal
showsHorizontalScrollIndicator={false}
data={categories}
renderItem={({ item }) => (
<View style={styles.chip}>
<Text>{item.label}</Text>
</View>
)}
keyExtractor={(item) => item.id}
/>Rulle til en indeks programmatisk
Bruk ref på FlatList og kall flatListRef.current.scrollToIndex({ index, animated: true }) for å hoppe til et bestemt element. De kan også bruke scrollToOffset for kontroll på pikselnivå eller scrollToEnd for å rulle til bunnen av listen.
const flatListRef = useRef(null);
const scrollToTop = () => {
flatListRef.current.scrollToIndex({ index: 0, animated: true });
};
<FlatList ref={flatListRef} data={DATA} renderItem={renderItem} />Unngå vanlige FlatList-feil
Unngå å definere renderItem som en anonym arrow-funksjon direkte i JSX (renderItem={() => ...}). Dette oppretter en ny funksjonsreferanse ved hver gjengivelse, slik at hver rad gjengis på nytt uten at det er nødvendig. Definer den utenfor JSX, eller bruk useCallback for å memorere den. Bruk heller aldri en arrayindeks som nøkkel — bruk alltid en stabil, unik ID.
// Bad: anonymous function in JSX
<FlatList renderItem={({ item }) => <Row item={item} />} />
// Good: stable reference
const renderItem = useCallback(({ item }) => <Row item={item} />, []);
<FlatList renderItem={renderItem} />Hurtigsjekk
Test forståelsen Deres av FlatList-data, renderItem og keyExtractor fra denne leksjonen.
Oppsummering av leksjonen
I denne leksjonen lærte De at: FlatList virtualiserer store lister ved bare å gjengi synlige elementer, renderItem definerer hvordan hver rad ser ut og keyExtractor gir stabile, unike nøkler for effektiv React-avstemming. Deretter skal vi utforske dra-for-å-oppdatere og uendelig rulling med lasting av flere elementer.
Lær deg JavaScript med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 30
- Leksjoner
- 120
Ofte stilte spørsmål
Er leksjonen «FlatList-data, renderItem og keyExtractor» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien React Native Academy, inkludert «FlatList-data, renderItem og keyExtractor», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i React Native Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «FlatList-data, renderItem og keyExtractor»?
Send en tabell til data-propen i FlatList, implementer renderItem slik at den returnerer en stylet radkomponent, og oppgi en keyExtractor for stabil identitet i listen. Du øver på React Native Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med React Native Academy?
Ingen tidligere erfaring er nødvendig. React Native Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.
Hvor lang tid tar leksjonen «FlatList-data, renderItem og keyExtractor»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne React Native Academy-leksjonen?
Ja. Alle React Native Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- FlatList-data, renderItem og keyExtractor
- Trekk for å oppdatere og last inn mer
- SectionList med overskrifter
- Bygge en app med kontaktliste