List optimizasyonu
- React Native kursu
- Uzman
- Ders 10/47
- 5 dk
FlatList ve SectionList optimizasyonunu öğrenirsin.
List optimizasyonu
React Native'de uzun listeler FlatList veya SectionList ile çizilir. Yanlış kullanımda tüm liste her kaydırmada yeniden çizilir; UI donar. Doğru kullanımda yalnızca ekrandaki öğeler çizilir (virtualization).
Temel ayarlar: keyExtractor, getItemLayout, windowSize, removeClippedSubviews. Liste öğesi memo ile sarılırsa yalnızca değişen öğe çizilir.
getItemLayout
getItemLayout, FlatList'in bir öğenin yerini ölçmeden bilmesini sağlar. Sabit yükseklikli öğelerde kaydırma hızlanır; jump-to-index mümkün olur.
İmzası: (data, index) => ({ length, offset, index }). Öğe yüksekliği değişkense getItemLayout kullanılamaz; o zaman FlatList ölçmek zorundadır ve yavaşlar; bu da kaydırmada donma yaratır.
Uygulama FlatList'i optimize et
Bir FlatList bileşeni yaz. data özelliği items olsun, keyExtractor her öğenin id'sini döndürsün, renderItem bir Text göstersin. FlatList'i react-native'den içe aktar.
Başlangıç kodu
import React from 'react';
// FlatList ve Text'i react-native'den içe aktar
// FlatList bileşenini yaz
export default function App() {
return null;
}Örnek çözüm
import React from 'react';
import { FlatList, Text } from 'react-native';
const items = [{ id: '1', title: 'Bir' }];
export default function App() {
return (
<FlatList
data={items}
keyExtractor={item => item.id}
renderItem={({ item }) => <Text>{item.title}</Text>}
/>
);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 FlatList'te keyExtractor ne yapar?
- Benzersiz anahtar verir
- Resim yükler Doğru cevap
- Renk seçer
- Tarih biçimler
Açıklama: keyExtractor her öğeye benzersiz anahtar verir.
2 FlatList props adı
<FlatList
data={items}
____={item => item.id}
renderItem={renderItem}
/><FlatList
data={items}
keyExtractor={item => item.id}
renderItem={renderItem}
/>Açıklama: keyExtractor öğeleri tanımlar.
3 FlatList ayarlarını eşleştir
| Kavram | Anlamı |
|---|---|
keyExtractor |
Benzersiz anahtar |
getItemLayout |
Sabit yükseklik |
windowSize |
Render penceresi |
removeClippedSubviews |
Ekran dışını kaldırır |