Üst Düzey Bileşenler
Özgün bileşeni değiştirmeden davranış veya veri eklemek için bileşenleri sarmalayın.
Üst Düzey Bileşenler, CoddyKit'te ücretsiz bir Sveltejs Academy dersidir. Bu, 4 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, Sveltejs Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Sveltejs Academy kursu toplamda 4 dersten oluşur.
HOC'ler Tanımlandı
Üst düzey bir bileşen, davranış veya veri eklemek için başka bir bileşeni sarmalar.
Svelte'de
Temel bir bileşeni içe aktarıp yetenekler (günlük kaydı, kimlik doğrulama, tema oluşturma) ekleyen bir sarmalayıcı bileşen yazabilirsiniz.
<!-- WithAuth.svelte -->
{#if user}
<slot />
{:else}
<a href="/login">Login</a>
{/if}Kullanım
Kimlik doğrulama gerektiren sayfaları sarın.
<WithAuth>
<Dashboard />
</WithAuth>Davranış Ekleme
Bir HOC, alt bileşenlerinin çevresine olay işleyicileri ekleyebilir, kaydırmayı gözlemleyebilir veya stiller yerleştirebilir.
Bileşimle Karşılaştırma
HOC'ler tek bir desendir; yuvalar ve parçacıklarla bileşim çoğu zaman daha basittir.
HOC'ler Ne Zaman Kullanılmalı
Birçok bileşeni tutarlı biçimde sarmalaması gereken ortak kaygılar için kullanın.
Bağlam Sağlayıcı HOC
setContext çağıran bir HOC, bağımlılıkları bir alt ağaçla sınırlamanın temiz bir yoludur.
Özellikleri İletme
Herhangi bir özelliği iletmek için $$restProps veya $props() içindeki rest özelliğini kullanın.
Performans
Sarmalayıcılar bir bileşen katmanı ekler; genellikle sorun değildir, ancak çok iç içe kullanıcı arayüzlerinde dikkatli olun.
Sınama
HOC'leri, sarmalayıcıyı çeşitli girdilerle bağlayarak kolayca sınayabilirsiniz.
Alternatif: Özel Durum Depoları
Bazen özel bir durum deposu ile küçük bir bileşen, HOC'den daha temizdir.
Kısa Kontrol
Bir HOC ne yapar?
Özet
Üst düzey bileşenler, ortak kaygıları eklemek için bileşenleri sarar. Kimlik doğrulama, tema oluşturma ve birçok sayfada günlük kaydı tutma için kullanışlıdır.
Sıkça Sorulan Sorular
“Üst Düzey Bileşenler” dersi ücretsiz mi?
Evet — “Üst Düzey Bileşenler” 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 Sveltejs Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Sveltejs Academy kursu toplamda 4 dersten oluşur.
“Üst Düzey Bileşenler” dersinde ne öğreneceğim?
Özgün bileşeni değiştirmeden davranış veya veri eklemek için bileşenleri sarmalayın. Sveltejs 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.
Sveltejs Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Sveltejs 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, 4 dersinin 2. dersidir.
“Üst Düzey Bileşenler” 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 Sveltejs Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Sveltejs 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
- Snippet'lerle İşleme Özellikleri
- Üst Düzey Bileşenler
- Başsız Kullanıcı Arayüzü için Builder Deseni
- Context ile Birleşik Bileşenler