React Native
FlatList optimizasyonu
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.
Örnek çözümü göster
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,
})}
/>
);
}
Kendini test et
-
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
- Tüm veriyi tek seferde çizmek
Cevabı göster
getItemLayout ayarı yapmak — getItemLayout ölçüm yapmadan konum hesaplar.
-
getItemLayout prop'unu yaz
<FlatList ____={(item, index) => ({ length: 60, offset: 60 * index, index })} />
Cevabı göster
<FlatList getItemLayout={(item, index) => ({ length: 60, offset: 60 * index, index })} />
-
Prop'u rolüne eşle
- initialNumToRender
- İlk çizilen satır
- getItemLayout
- Ölçümü atlatır
- keyExtractor
- Benzersiz anahtar
- removeClippedSubviews
- Ekrandan çıkanı gizler
Sıradaki ders: InteractionManager
