Özet - Yaşam döngüsü
- React Native kursu
- Orta seviye
- Ders 64/116
- 5 dk
mount, update ve unmount'ı birleştirerek bir kaynak yönetici yazarsın.
Özet - Yaşam döngüsü
Yaşam döngüsü üç aşamadan oluşur: mount (ilk çizim), update (state/prop değişimiyle yeniden çizim) ve unmount (kaldırma). useEffect bu üç aşamayı tek kancada birleştirir.
Boş dizi mount'ta, dolu dizi ilgili değişimde, dizi yoksa her çizimde çalışır. Cleanup döndürerek unmount davranışı eklenir. Görsel titreme varsa useLayoutEffect kullanılır.
Uygulama Mount ve unmount logu
Mount'ta console.log('mounted') yaz ve cleanup olarak console.log('unmounted') yaz. Boş bağımlılık dizisi kullan.
Başlangıç kodu
import React from 'react';
import { View } from 'react-native';
export default function Widget() {
// Mount ve unmount loglarını ekle
return <View />
}Örnek çözüm
import React, { useEffect } from 'react';
import { View } from 'react-native';
export default function Widget() {
useEffect(() => {
console.log('mounted');
return () => {
console.log('unmounted');
};
}, []);
return <View />
}Uygulama useLayoutEffect ekle
Bir useLayoutEffect ekle, içine console.log('layout') yaz ve boş bağımlılık dizisi kullan.
Başlangıç kodu
import React from 'react';
import { View } from 'react-native';
export default function Bar() {
// useLayoutEffect ekle
return <View />
}Örnek çözüm
import React, { useLayoutEffect } from 'react';
import { View } from 'react-native';
export default function Bar() {
useLayoutEffect(() => {
console.log('layout');
}, []);
return <View />
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Hangi dizi yalnızca mount'ta çalıştırır?
- [count]
- dizi yok
- [count, ready]
- [] Doğru cevap
Açıklama: Boş dizi [] yalnızca mount'ta çalışır.
2 Yaşam döngüsü özeti
| Kavram | Anlamı |
|---|---|
mount |
İlk çizim |
update |
Yeniden çizim |
unmount |
Kaldırma |
useLayoutEffect |
Boyama öncesi |