Rota ve Bileşen Düzeyinde Bölme
Rotaya göre (ekran düzeyinde) ve ekranların içinde (bileşen düzeyinde) bölün. Geri kalanın etkileşimli kalması için Suspense'i yavaş alanın yakınına yerleştirin.
Rota ve Bileşen Düzeyinde Bölme, CoddyKit'te ücretsiz bir React Academy dersidir. Bu, 3 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, React Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. React Academy kursu toplamda 3 dersten oluşur.
İki düzey: yön ve araç
Amaç: yönleri (tam ekranlar) ve araçları (ekran içindeki maliyetli bölümler) bölün. Sayfanın kullanılabilir kalması için yedek içerikleri yerel tutun.
Nerede ve neden bölmeli
- Yön tabanlı: büyük sayfaları bölün
- Bileşen düzeyinde: grafikleri veya düzenleyicileri bölün
- Suspense sınırını yavaş alana yakın yerleştirin
Örnek: yön tarzı bölme
Yön tabanlı: yalnızca Raporlar sekmesi tembel olarak yüklenir; diğer sekmeler hemen oluşturulur.
<div id="root"></div>
Örnek: araç düzeyinde bölme
Bileşen düzeyinde: maliyetli bir Grafik aracını tembel olarak yükleyin; sayfa kabuğu hemen oluşturulur.
<div id="root"></div>
Örnek: üzerine gelindiğinde ön yükleme
Niyet üzerine ön yükleme: kullanıcı düğmenin üzerine geldiğinde yüklemeyi başlatın; böylece tıklama anında gerçekleşmiş gibi hissedilir.
<div id="root"></div>
İpuçları ve yaygın hatalar
- Tek ve dev bir sınır kullanmaktan kaçının; sınırı yerel tutun
- Yedek içeriğin boyutunu son kullanıcı arayüzüyle eşleştirin
- Her küçük bileşene göre değil, kullanıcı akışlarına (yönlere) ve maliyetli araçlara göre bölün
Bölme stratejisi denetimi
Özet
Özet: Büyük ekranları (yönleri) ve maliyetli araçları bölün. Her yavaş alanı küçük bir yedek içerik içeren kendi Suspense sınırıyla sarmalayın; daha hızlı tıklamalar için niyet belli olduğunda ön yükleyin.
Sıkça Sorulan Sorular
“Rota ve Bileşen Düzeyinde Bölme” dersi ücretsiz mi?
Evet — “Rota ve Bileşen Düzeyinde Bölme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve React Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. React Academy kursu toplamda 3 dersten oluşur.
“Rota ve Bileşen Düzeyinde Bölme” dersinde ne öğreneceğim?
Rotaya göre (ekran düzeyinde) ve ekranların içinde (bileşen düzeyinde) bölün. Geri kalanın etkileşimli kalması için Suspense'i yavaş alanın yakınına yerleştirin. React Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
React Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te React Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 3 dersinin 2. dersidir.
“Rota ve Bileşen Düzeyinde Bölme” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu React Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her React Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- React.lazy ve Suspense — Tembel Bileşenler
- Rota ve Bileşen Düzeyinde Bölme
- Paketler, Önbellek ve Ön Yükleme İpuçları