Özet - Performans mühendisliği
- React Native kursu
- Uzman
- Ders 12/47
- 5 dk
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.
Başlangıç kodu
import React from 'react';
import { Text } from 'react-native';
// ListItem'ı React.memo ile sar
export default ListItem;Örnek çözüm
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.
Başlangıç kodu
import React from 'react';
// FlatList'i içe aktar ve getItemLayout ekle
export default function App() {
return null;
}Örnek çözüm
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 })}
/>
);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 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 Doğru cevap
Açıklama: Ölçmeden optimize etme; önce profil çıkar.
2 Tüm araçları eşleştir
| Kavram | Anlamı |
|---|---|
Perf Monitor |
JS/UI thread |
React Profiler |
Bileşen süresi |
FlatList |
Virtualization |
useEffect cleanup |
Bellek temizliği |