FlatList optimizasyonu
- React Native kursu
- Orta seviye
- Ders 91/116
- 5 dk
FlatList performans optimizasyonunu öğrenirsin.
FlatList optimizasyonu
FlatList büyük listeleri verimli çizer ama birkaç ayar daha hız sağlar. initialNumToRender ilk çizilecek satır sayısını belirler; maxToRenderPerBatch her toplu çizimde kaç satır işleneceğini. removeClippedSubviews ekrandan çıkan satırları görünmez yapar.
getItemLayout verdiğinde FlatList ölçüm yapmadan konum hesaplar; sabit yükseklikli satırlarda kaydırmayı ciddi hızlandırır. keyExtractor ise her öğeye benzersiz anahtar vererek yeniden render'ı azaltır. Bu prop'lar birlikte büyük listelerde akıcılığı korur. Her prop'un gerçek veriyle denenmesi gerekir; bazıları küçük listelerde işe yaramaz.
getItemLayout
getItemLayout her öğenin boyutunu ve konumunu önceden söyler. Sabit yükseklikli satırlarda FlatList ölçüm adımını atlar ve kaydırma anında doğru satıra atlar. İmza: (item, index) => ({ length, offset, index }).
Örnek: getItemLayout={(item, index) => ({ length: 60, offset: 60 * index, index })}. Burada length satır yüksekliği, offset o satırın başlangıç konumu, index ise sıra numarasıdır. Değişken yükseklikte çalışmaz; o durumda bu prop'u kullanma. Yanlış offset vermek çizimi bozar; yüksekliği gerçek değerle aynı tut.
Uygulama Optimize FlatList yaz
Bir NumberList bileşeni yaz. numbers dizisi tanımlı: [1, 2, 3]. <FlatList> kullan; data, renderItem, keyExtractor ve getItemLayout prop'larını ver. Satır yüksekliği 60 olsun.
Başlangıç kodu
import React from 'react';
import { FlatList, Text } from 'react-native';
export default function NumberList() {
const numbers = [1, 2, 3];
// FlatList'e getItemLayout ekle
return (
<FlatList
data={numbers}
renderItem={({ item }) => <Text>{item}</Text>}
keyExtractor={(item) => item.toString()}
/>
);
}Örnek çözüm
import React from 'react';
import { FlatList, Text } from 'react-native';
export default function NumberList() {
const numbers = [1, 2, 3];
return (
<FlatList
data={numbers}
renderItem={({ item }) => <Text>{item}</Text>}
keyExtractor={(item) => item.toString()}
getItemLayout={(item, index) => ({
length: 60,
offset: 60 * index,
index,
})}
/>
);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 FlatList'i hızlandırmak için ne yapılır?
<FlatList data={items} renderItem={renderItem} />- Her satıra 50 alt bileşen koymak
- ScrollView'a çevirmek
- getItemLayout ayarı yapmak Doğru cevap
- Tüm veriyi tek seferde çizmek
Açıklama: getItemLayout ölçüm yapmadan konum hesaplar.
2 getItemLayout prop'unu yaz
<FlatList ____={(item, index) => ({ length: 60, offset: 60 * index, index })} /><FlatList getItemLayout={(item, index) => ({ length: 60, offset: 60 * index, index })} />Açıklama: getItemLayout satır konumunu önceden söyler.
3 Prop'u rolüne eşle
| Kavram | Anlamı |
|---|---|
initialNumToRender |
İlk çizilen satır |
getItemLayout |
Ölçümü atlatır |
keyExtractor |
Benzersiz anahtar |
removeClippedSubviews |
Ekrandan çıkanı gizler |