Özet - Performans mühendisliği

Profiler, bottleneck ve memory leak'i birleştirerek bir perf raporu yazarsın.

Özet - Performans mühendisliği

Performans mühendisliği beş adımdan oluşur: profiling (ölç), React Profiler (bileşen başına süre), bottleneck (darboğaz bul), list optimizasyonu (FlatList ayarları) ve memory leak (temizlik).

Temel ilke: ölçmeden optimize etme. Perf Monitor JS ve UI thread'i ayrı gösterir; React Profiler bileşeni, FlatList virtualization listeyi, useEffect temizliği belleği hızlandırır. 16 ms hedefini unutma.

Uygulama useCallback ile liste öğesi

Bir ListItem bileşenini React.memo ile sar. title prop alsın, Text göstersin. React'i içe aktar, sonucu default export et.

Örnek çözümü göster

import React from 'react';
import { Text } from 'react-native';

const ListItem = React.memo(({ title }) => <Text>{title}</Text>);

export default ListItem;

Uygulama getItemLayout ekle

Bir FlatList bileşenine getItemLayout ekle. Öğe yüksekliği 60 olsun. (data, index) => ({ length: 60, offset: 60 * index, index }) imzasını kullan. FlatList'i react-native'den içe aktar.

Örnek çözümü göster

import React from 'react';
import { FlatList } from 'react-native';

export default function App() {
  return (
    <FlatList
      data={[]}
      keyExtractor={(item, i) => String(i)}
      renderItem={() => null}
      getItemLayout={(data, index) => ({ length: 60, offset: 60 * index, index })}
    />
  );
}

Kendini test et

Performans optimizasyonu öncesi hangi adım şart?
- Tüm kodu yeniden yazmak
- Yeni bağımlılık eklemek
- Expo'yu kaldırmak
- Profil çıkarıp ölçmek
Cevabı göster

Profil çıkarıp ölçmek — Ölçmeden optimize etme; önce profil çıkar.
Tüm araçları eşleştir

Perf Monitor

JS/UI thread
React Profiler

Bileşen süresi
FlatList

Virtualization
useEffect cleanup

Bellek temizliği

Sıradaki ders: Feature-based

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler