Temizlik fonksiyonu
- React kursu
- Başlangıç
- Ders 67/84
- 4 dk
Effect'in return fonksiyonu ile temizlik yapmayı öğrenirsin.
Temizlik fonksiyonu
Effect bir temizlik fonksiyonu döndürebilir: return () => { ... }. React, bileşen ekrandan gitmeden veya effect yeniden çalışmadan önce bunu çağırır.
Bu, abonelikleri kaldırmak, zamanlayıcıları temizlemek veya bağlantıyı koparmak içindir. Temizlik yapmazsan bellek sızıntısı olur.
Her effect, başlattığı kaynağı temizlemelidir; bu, sorumlu etik kullanımın temelidir.
Abonelik örneği
Bir event aboneliği başlatınca temizlik ile onu kaldırırsın. Örnek: window.addEventListener("resize", fn) başlat, return () => window.removeEventListener("resize", fn) ile temizle.
Bu, "kurulum ve sökme" çiftidir; her başlatma bir sökme gerektirir. Aksi halde abonelik açık kalır ve bileşen kaldırıldıktan sonra da olay tetiklenir.
Bu disiplin, uzun ömürlü uygulamalarda sızıntıyı önler. Bellek sızıntısı en sık event ve zamanlayıcı kaynaklıdır; temizlik bunları tek satırda çözer.
Uygulama Zamanlayıcı effect'i
Aşağıdaki iskeleti tamamla. Timer bileşeni yaz; useEffect'i içe aktar. useEffect çağır; içine const id = setInterval(() => {}, 1000); yaz ve return () => clearInterval(id); döndür; ikinci argüman []. <p>Zamanlayıcı</p> döndür. Dışa aktar.
Başlangıç kodu
import { useEffect } from "react";
// Timer bileşenini buraya tanımlaÖrnek çözüm
import { useEffect } from "react";
function Timer() {
useEffect(() => {
const id = setInterval(() => {}, 1000);
return () => clearInterval(id);
}, []);
return <p>Zamanlayıcı</p>;
}
export default Timer;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Temizlik fonksiyonu ne zaman çağrılır?
Cleanup releases the resource.- Effect yeniden çalışmadan önce ve unmount'ta Doğru cevap
- Sadece hata durumunda
- Effect başlarken
- Asla
Açıklama: Temizlik, effect'ten önce ve bileşen gitmeden çağrılır.
2 Temizlik fonksiyonu: eksik parçayı tamamla
useEffect(() => { const id = setInterval(fn, 1000); return ____; }, []);useEffect(() => { const id = setInterval(fn, 1000); return () => clearInterval(id); }, []);Açıklama: Zamanlayıcıyı temizledin.
3 Temizlik fonksiyonu: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
return () => ... |
Temizlik |
clearInterval |
Zamanlayıcıyı durdur |
removeEventListener |
Aboneliği kaldır |
unmount |
Bileşen gider |