FlatList-data, renderItem och keyExtractor
Skicka en array till FlatLists data-prop, implementera renderItem så att den returnerar en formaterad radkomponent och ange en keyExtractor för stabil identitet i listan.
FlatList-data, renderItem och keyExtractor är en gratis lektion i React Native Academy på CoddyKit. Detta är lektion 1 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för React Native Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i React Native Academy innehåller totalt 4 lektioner.
Varför FlatList i stället för ScrollView?
ScrollView renderar alla sina underordnade komponenter på en gång, vilket blir långsamt när hundratals objekt visas. FlatList virtualiserar listan – den renderar bara objekten som för närvarande är synliga på skärmen samt en liten buffert. Det minskar minnesanvändningen avsevärt och förbättrar rullningsprestandan för stora datamängder.
Propen data
Skicka din array med objekt till propen data. FlatList itererar över denna array och anropar renderItem för varje element. Arrayen kan innehålla JavaScript-objekt av valfri typ. Ändringar i arrayen data utlöser en ny rendering av de listobjekt som berörs.
const DATA = [
{ id: '1', name: 'Alice' },
{ id: '2', name: 'Bob' },
{ id: '3', name: 'Carol' },
];
<FlatList data={DATA} ... />Propen renderItem
Propen renderItem är en funktion som tar emot ett objekt med en egenskap item (det aktuella array-elementet) och måste returnera ett React-element. Här definierar du hur varje rad ska se ut. Behåll den som en stabil referens genom att använda useCallback för att undvika onödiga omrenderingar.
const renderItem = ({ item }) => (
<View style={styles.row}>
<Text>{item.name}</Text>
</View>
);
<FlatList
data={DATA}
renderItem={renderItem}
/>Propen keyExtractor
keyExtractor anger för FlatList hur en unik strängnyckel ska hämtas från varje objekt. React använder dessa nycklar för att hålla reda på vilka objekt som ändrades under omrenderingar. Utan en korrekt key extractor använder FlatList arrayens index som reserv, vilket kan orsaka svårupptäckta buggar när data ändras.
<FlatList
data={DATA}
renderItem={renderItem}
keyExtractor={(item) => item.id}
/>Ett komplett FlatList-exempel
Genom att kombinera data, renderItem och keyExtractor får du en fullt fungerande, rullningsbar och virtualiserad lista. Du kan formge raderna i renderItem precis som vilken annan komponent som helst. FlatList hanterar automatiskt rullnings- och tryckhändelser.
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' },
});Lägga till ett list-huvud och en listfot
Använd ListHeaderComponent för att rendera innehåll ovanför listan, till exempel ett sökfält eller en sidtitel, och ListFooterComponent för innehåll under listan, till exempel en laddningsindikator när mer data hämtas. Dessa komponenter rullar med listan, till skillnad från en vy som placeras utanför FlatList.
<FlatList
data={DATA}
renderItem={renderItem}
keyExtractor={(item) => item.id}
ListHeaderComponent={() => <Text style={styles.header}>Users</Text>}
ListFooterComponent={() => <ActivityIndicator />}
/>Tom lista med ListEmptyComponent
När data-arrayen är tom renderar FlatList som standard ingenting. Ange en ListEmptyComponent för att visa ett platshållarmeddelande eller en illustration när det inte finns några objekt. Det är betydligt renare än att omsluta FlatList med ett villkor.
<FlatList
data={filteredData}
renderItem={renderItem}
keyExtractor={(item) => item.id}
ListEmptyComponent={() => (
<Text style={styles.empty}>No results found</Text>
)}
/>Objektavgränsare med ItemSeparatorComponent
I stället för att lägga till kantlinjer direkt på objektraderna använder du ItemSeparatorComponent för att rendera en avgränsare mellan objekten. React Native renderar endast avgränsaren mellan objekten, inte före det första eller efter det sista, vilket förhindrar dubbla kantlinjer vid kanterna.
const Separator = () => (
<View style={{ height: 1, backgroundColor: '#eee' }} />
);
<FlatList
data={DATA}
renderItem={renderItem}
keyExtractor={(item) => item.id}
ItemSeparatorComponent={Separator}
/>Horisontell FlatList
Ange propen horizontal som true för att rendera en lista som rullar horisontellt. Det är användbart för karuseller, kategorietiketter eller story-rader. Propen showsHorizontalScrollIndicator kan dölja rullningslisten för ett renare utseende.
<FlatList
horizontal
showsHorizontalScrollIndicator={false}
data={categories}
renderItem={({ item }) => (
<View style={styles.chip}>
<Text>{item.label}</Text>
</View>
)}
keyExtractor={(item) => item.id}
/>Rulla till ett index programmatiskt
Använd ref på FlatList och anropa flatListRef.current.scrollToIndex({ index, animated: true }) för att hoppa till ett specifikt objekt. Du kan också använda scrollToOffset för kontroll på pixelnivå eller scrollToEnd för att rulla till slutet av listan.
const flatListRef = useRef(null);
const scrollToTop = () => {
flatListRef.current.scrollToIndex({ index: 0, animated: true });
};
<FlatList ref={flatListRef} data={DATA} renderItem={renderItem} />Undvika vanliga FlatList-misstag
Undvik att definiera renderItem som en anonym arrow-funktion direkt i JSX (renderItem={() => ...}). Då skapas en ny funktionsreferens vid varje rendering, vilket gör att varje rad renderas om i onödan. Definiera den utanför JSX eller memoizera den med useCallback. Använd inte heller ett array-index som nyckel – använd alltid ett stabilt, unikt 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} />Snabbtest
Testa dina kunskaper om FlatLists data, renderItem och keyExtractor från den här lektionen.
Sammanfattning av lektionen
I den här lektionen lärde du dig att: FlatList virtualiserar stora listor genom att bara rendera synliga objekt, renderItem definierar hur varje rad ser ut och keyExtractor tillhandahåller stabila, unika nycklar för effektiv React-avstämning. Härnäst utforskar vi dra-för-att-uppdatera och oändlig rullning med funktionen för att läsa in mer.
Lär dig JavaScript med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 30
- Lektioner
- 120
Vanliga frågor
Är lektionen ”FlatList-data, renderItem och keyExtractor” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen React Native Academy, inklusive ”FlatList-data, renderItem och keyExtractor”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i React Native Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”FlatList-data, renderItem och keyExtractor”?
Skicka en array till FlatLists data-prop, implementera renderItem så att den returnerar en formaterad radkomponent och ange en keyExtractor för stabil identitet i listan. Ni övar på React Native Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig React Native Academy?
Du behöver inga förkunskaper. Utbildningen i React Native Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.
Hur lång tid tar lektionen ”FlatList-data, renderItem och keyExtractor”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här React Native Academy-lektionen?
Ja. Varje React Native Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- FlatList-data, renderItem och keyExtractor
- Dra för att uppdatera och läsa in mer
- SectionList med rubriker
- Bygga en app med kontaktlista