Erken return

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.

Örnek çözümü göster

function LoadingGuard({ loading }) {
  if (loading === true) return <p>Yükleniyor</p>;
  return <p>Hazır</p>;
}

export default LoadingGuard;

Kendini test et

Erken return ne döndürür?
- effect
- state
- DOM
- null veya yedek JSX
Cevabı göster

null veya yedek JSX — Erken return genelde null veya yedek JSX döndürür.

Erken return örneği

Erken return genellikle ____ döndürür.

Cevabı göster

Erken return genellikle null döndürür.

Erken return desenini eşleştir

if (!user)

Koşul
return null

Erken çıkış
return <Login />

Yedek
if (loading)

Başka koşul

Sıradaki ders: Özet - Koşullu render

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler