CodeBlanks Logo Icon CodeBlanks
Giriş Yap Kayıt Ol

Performance monitor

Performance monitor ve FPS öğrenirsin.

Performance monitor nedir?

Performance monitor, React Native'in yerleşik FPS ve RAM ölçeridir. Geliştirici menüsünden Show Perf Monitor seçilince ekranda küçük bir pencere açılır; her saniye güncellenir. İki satır gösterir: JS ve UI iş parçacığı FPS değerleri.

FPS (saniyedeki kare) ne kadar yüksekse o kadar akıcıdır. 60 FPS idealdir; 30'un altı takılmaya işaret eder. RAM kullanımı da görünür; bu, memory leak şüphesinde yardımcı olur. Performance monitor, gerçek cihazda çalışır; simülatördeki değerler yanıltıcı olabilir. Kaydırma sırasında FPS düşüşünü izleyerek hangi ekranın yavaş olduğunu bulursun.

FPS ve RAM

Performance monitor iki FPS satırı gösterir. JS satırı JavaScript iş parçacığının hızını, UI satırı yerel çizim hızını yansıtır. Birincisi ağır hesaplar, ikincisi ağır çizim yüzünden düşer.

FPS düşüşünü izleyerek sorunun kaynağını anlarsın. JS düşüyorsa hesabını optimize et; UI düşüyorsa bileşen sayısını azalt. RAM ise zamanla artıyorsa memory leak olabilir; useEffect cleanup'ı eksik olabilir. Performance monitor bir başlangıç noktasıdır; ayrıntılı analiz için Flipper'ın Profiler sekmesi veya React DevTools'un Profiler'ı kullanılır. Sayıları yorumlamak, sorunun yerini tahmin etmeyi sağlar.

Uygulama Ağır hesap yaz

Performance monitor'da FPS'i düşürecek bir ağır hesap yaz. for döngüsü ile bin elemanlı bir dizi oluştur; her adımda arr.push(i) yap. i 0'dan 1000'e kadar gitsin.

Başlangıç kodu

App.js
// Ağır bir hesap yaz; for döngüsü ile büyük dizi oluştur
// her adımda diziye eleman ekle; i 0'dan 1000'e kadar

Örnek çözüm

App.js
const arr = [];
for (let i = 0; i < 1000; i++) {
  arr.push(i);
}

Soru ve cevaplar

Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.

1 Perf monitor menüsü

Soru 
// Cihazı sallayarak menüyü aç, "____" seçeneğini seç
Cevap 
// Cihazı sallayarak menüyü aç, "Show Perf Monitor" seçeneğini seç

Açıklama: Show Perf Monitor FPS penceresini açar.

2 Ölçütü rolüne eşle

Kavram Anlamı
JS FPS Hesap hızı
UI FPS Çizim hızı
RAM Bellek kullanımı
60 FPS İdeal hedef

3 Performance monitor ne gösterir?

App.js
[Show Perf Monitor]
  • CPU sıcaklığı
  • Pil seviyesi
  • Ağ hızı
  • FPS ve RAM Doğru cevap

Açıklama: Performance monitor FPS ve RAM gösterir.

Orta seviye bölümündeki tüm dersler

1 Hooks

  1. useEffect
  2. Dependency array
  3. Cleanup
  4. useRef
  5. useMemo
  6. Özet - Hooks

2 Özel hook'lar

  1. Özel hook
  2. useToggle
  3. useCounter
  4. usePrevious
  5. Hook kompozisyonu
  6. Özet - Özel hook'lar

3 Context

  1. Context nedir?
  2. createContext
  3. Provider
  4. useContext
  5. Context default değeri
  6. Özet - Context

4 Proje: Notlar uygulaması

  1. Proje tasarımı
  2. Not modeli
  3. Not ekleme
  4. AsyncStorage
  5. Birleştirme

5 useReducer

  1. useReducer
  2. Reducer fonksiyonu
  3. Action dispatch
  4. Initial state
  5. useReducer vs useState
  6. Özet - useReducer

6 Form yönetimi

  1. Controlled form
  2. Form state
  3. Validation
  4. Submit
  5. Form kütüphaneleri
  6. Özet - Form yönetimi

7 API ve fetch

  1. fetch
  2. GET isteği
  3. async/await
  4. JSON parse
  5. Error handling
  6. Özet - API ve fetch

8 Proje: Quiz uygulaması

  1. Quiz modeli
  2. Soruları yükleme
  3. Quiz oynatma
  4. Skor hesaplama
  5. Birleştirme

9 Tab navigasyonu

  1. Bottom Tabs
  2. createBottomTabNavigator
  3. Tab icons
  4. Material Top Tabs
  5. Tab badge
  6. Özet - Tab navigasyonu

10 Drawer navigasyonu

  1. Drawer navigator
  2. createDrawerNavigator
  3. Drawer items
  4. Drawer toggle
  5. Nested navigation
  6. Özet - Drawer navigasyonu

11 Yaşam döngüsü

  1. Mount
  2. Update
  3. Unmount
  4. useEffect lifecycle
  5. Layout effect
  6. Özet - Yaşam döngüsü

12 Proje: E-ticaret

  1. Proje tasarımı
  2. Ürün listesi
  3. Ürün detayı
  4. Sepet
  5. Birleştirme

13 Animated

  1. Animated.Value
  2. Animated.View
  3. Animated.timing
  4. Animated.spring
  5. interpolate
  6. Özet - Animated

14 Jestler

  1. PanResponder
  2. onMoveShouldSetPanResponder
  3. onPanResponderMove
  4. onPanResponderRelease
  5. react-native-gesture-handler
  6. Özet - Jestler

15 Tema

  1. Açık/koyu tema
  2. Theme context
  3. Theme toggle
  4. useColorScheme
  5. Persistent theme
  6. Özet - Tema

16 Performans

  1. React.memo
  2. useCallback
  3. useMemo
  4. FlatList optimizasyonu
  5. InteractionManager
  6. Özet - Performans

17 Test

  1. Jest
  2. React Native Testing Library
  3. render
  4. getByText
  5. fireEvent
  6. Özet - Test

18 Geliştirme araçları

  1. Flipper
  2. React DevTools
  3. Console
  4. Remote debug
  5. Performance monitor
  6. Özet - Geliştirme araçları

19 İzinler

  1. İzin nedir?
  2. expo-permissions
  3. Kamera izni
  4. Konum izni
  5. Bildirim izni
  6. Özet - İzinler

20 Orta seviye finali

  1. Proje tasarımı
  2. Context ve hooks
  3. API entegrasyonu
  4. Navigation
  5. Birleştirme