List optimizasyonu

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.

Örnek çözümü göster

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>}
    />
  );
}

Kendini test et

FlatList'te keyExtractor ne yapar?
- Benzersiz anahtar verir
- Resim yükler
- Renk seçer
- Tarih biçimler
Cevabı göster

Resim yükler — keyExtractor her öğeye benzersiz anahtar verir.

FlatList props adı

<FlatList
  data={items}
  ____={item => item.id}
  renderItem={renderItem}
/>

Cevabı göster

<FlatList
  data={items}
  keyExtractor={item => item.id}
  renderItem={renderItem}
/>

FlatList ayarlarını eşleştir

keyExtractor

Benzersiz anahtar
getItemLayout

Sabit yükseklik
windowSize

Render penceresi
removeClippedSubviews

Ekran dışını kaldırır

Sıradaki ders: Memory leak

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler