Çoklu sınır
- React kursu
- Orta seviye
- Ders 59/80
- 4 dk
Birden çok Suspense sınırını stratejik yerleştirmeyi öğrenirsin.
Çoklu sınır
Birden fazla lazy bileşenin varsa, her birine ayrı Suspense sarmalı vermek daha iyi kontrol sağlar. Buna çoklu sınır denir.
Tek Suspense tüm bileşenler yüklene kadar yedek gösterir. Ayrı Suspense'ler ise her bileşen yüklendiği anda gerçek içeriğe geçer; böylece kullanıcı kademeli olarak içerik görür.
Bu yaklaşım büyük sayfalarda iyidir; her bölüm kendi hızında yüklenir ve kullanıcı beklerken bir şeyler görür.
Çoklu sınır örneği
Bir sayfa üç bölüm içerir: header, main ve footer. Her bölüm ayrı bir lazy bileşense, üç ayrı Suspense kullanırsın. Header önce, footer sonra yüklenir; kullanıcı beklerken header'ı görür.
Eğer tek Suspense kullansaydın, tüm bölümler yüklenene kadar yedek gösterilirdi. Bu da daha uzun bekleme demektir.
Çoklu sınır, bölgesel yükleme hatalarını da izole eder; bir bölüm hata verirse diğerleri etkilenmez.
Uygulama Çoklu Suspense
Aşağıdaki iskeleti tamamla. App bileşeni yaz; iki ayrı <Suspense fallback={"{"<Spinner />}"}> içinde <A /> ve <B /> çiz. Dışa aktar.
Başlangıç kodu
import { Suspense } from "react";
// App bileşenini buraya yazÖrnek çözüm
import { Suspense } from "react";
function App() {
return (
<div>
<Suspense fallback={<Spinner />}><A /></Suspense>
<Suspense fallback={<Spinner />}><B /></Suspense>
</div>
);
}
export default App;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Çoklu sınır ne sağlar?
- Tek yükleme
- Kademeli yükleme Doğru cevap
- Daha az kod
- Hızlı çizim
Açıklama: Çoklu sınır her bölümün ayrı yüklenmesini sağlar.
2 Çoklu Suspense
<Suspense fallback={<Spinner />}><A /></Suspense><____ fallback={<Spinner />}><B /></Suspense><Suspense fallback={<Spinner />}><A /></Suspense><Suspense fallback={<Spinner />}><B /></Suspense>Açıklama: Her bölüm için ayrı Suspense kullanılır.
3 Çoklu sınır: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
Çoklu Suspense |
Kademeli yükleme |
Tek Suspense |
Hepsi bekler |
fallback |
Yedek içerik |
bölgesel hata |
İzole kalır |