Erken return
- React kursu
- Başlangıç
- Ders 25/84
- 4 dk
Bileşenden erken return ile null veya yedek içerik döndürmeyi öğrenirsin.
Erken return
Erken return deseni, bileşenin başında bir koşulu kontrol edip, sağlanmıyorsa erken çıkmaktır. if (!user) return null; gibi.
Bu desen karmaşık koşullarda okunurluğu artırır. İç içe ternary yazmak yerine, koşulları sırayla ele alıp her biri için erken return yaparsın.
Erken return çoğunlukla null döndürür, ama yedek bir JSX de döndürebilir: if (!user) return <Login />;.
Erken return avantajı
Erken return'ün en büyük avantajı mutlu yolu vurgulamasıdır. Bileşenin asıl işi alt kısımda kalır; üstteki erken return'ler kenar durumları ele alır.
Bu yaklaşım kodu düz tutar: her koşul kendi satırında, iç içe bloklar yerine. Bakımı kolaydır.
Ancak her koşul için erken return yazmak dağınık olabilir. İki-üç koşuldan fazlasında yardımcı fonksiyon düşünmek gerekir.
Uygulama LoadingGuard erken return
Aşağıdaki iskeleti tamamla. LoadingGuard adında bir bileşen yaz; ({ '{ loading }' }) parametresi alsın. loading === true ise erken return ile <p>Yükleniyor</p> döndürsün; değilse <p>Hazır</p>. Dışa aktarmayı unutma.
Başlangıç kodu
// LoadingGuard bileşenini buraya yazÖrnek çözüm
function LoadingGuard({ loading }) {
if (loading === true) return <p>Yükleniyor</p>;
return <p>Hazır</p>;
}
export default LoadingGuard;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Erken return ne döndürür?
- effect
- state
- DOM
- null veya yedek JSX Doğru cevap
Açıklama: Erken return genelde null veya yedek JSX döndürür.
2 Erken return örneği
Erken return genellikle ____ döndürür.Erken return genellikle null döndürür.Açıklama: null çizilmeyen değerdir.
3 Erken return desenini eşleştir
| Kavram | Anlamı |
|---|---|
if (!user) |
Koşul |
return null |
Erken çıkış |
return <Login /> |
Yedek |
if (loading) |
Başka koşul |