Yeniden Oluşturmayı Zorlamak için {#key}
Bir değer değiştiğinde bileşenleri yok edip yeniden oluşturmak için anahtar bloğunu kullanın.
Yeniden Oluşturmayı Zorlamak için {#key}, CoddyKit'te ücretsiz bir Sveltejs Academy dersidir. Bu, 4 dersinin 3. 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.
key Bloğu
{#key expr}, expr değiştiğinde içeriğini yok eder ve yeniden oluşturur. Yeni bir bileşen istediğinizde kullanışlıdır.
Animasyonları Yeniden Başlatma
Anahtar her değiştiğinde geçişi yeniden oynatmak için animasyonlu bir öğeyi {#key} içine alın.
{#key id}
<div in:fade>{message}</div>
{/key}Bileşen Durumunu Sıfırlama
Bir kimlik değiştiğinde iç durumu tamamen sıfırlamak için iç durum taşıyan bir alt bileşeni {#key id} içine alın.
{#key currentUser.id}
<UserProfile user={currentUser} />
{/key}each Anahtarından Farkı
{#key} bloğu tek bir öğeye anahtar verir; {#each ... (key)} ise listedeki öğelere anahtar verir.
Ne Zaman Kullanılır
Her alanı elle temizlemeden karmaşık iç durumu sıfırlamak istediğinizde kullanın.
Performans Maliyeti
Her anahtar değişikliği alt ağacı kaldırıp yeniden oluşturur. Anahtar sık değişiyorsa büyük ağaçları sarmalamaktan kaçının.
Kapatma Etiketi
{/key} ile kapatın.
Yaygın Kullanımlar
Animasyonları yeniden başlatın, denetlenmeyen girdileri sıfırlayın ve yeni bir varlığa yönlendirme sırasında verileri yeniden alın.
Alternatif: bind:this
Bazen bir başvuru kullanarak durumu emirli biçimde sıfırlayabilirsiniz. Bildirimsel sıfırlamalar için {#key} daha temizdir.
Geçişlerle Birleştirme
Temel bir değişiklik olduğunu belirten yumuşak bir görsel ipucu vermek için geçişlerle birlikte kullanın.
Önemsiz Değişikliklerde Kullanmayın
Yalnızca tepkisel içeriği {#key} içine almayın; Svelte bunu zaten verimli biçimde günceller.
Hızlı Kontrol
x değiştiğinde {#key x} ne yapar?
Özet
{#key}, ifadesi her değiştiğinde tamamen yok edip yeniden oluşturmayı zorunlu kılar; sıfırlamalar ve animasyonları yeniden oynatma için kullanışlıdır.
Yapay zeka eğitmeniyle HTML öğren — ücretsiz
Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.
- Kurslar
- 41
- Dersler
- 163
Sıkça Sorulan Sorular
“Yeniden Oluşturmayı Zorlamak için {#key}” dersi ücretsiz mi?
Evet — “Yeniden Oluşturmayı Zorlamak için {#key}” 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.
“Yeniden Oluşturmayı Zorlamak için {#key}” dersinde ne öğreneceğim?
Bir değer değiştiğinde bileşenleri yok edip yeniden oluşturmak için anahtar bloğunu kullanı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 3. dersidir.
“Yeniden Oluşturmayı Zorlamak için {#key}” 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
- {#if} {#else if} {#else}
- Dizin ve Anahtarla {#each}
- Yeniden Oluşturmayı Zorlamak için {#key}
- İç İçe {#each} ve Anahtarlı Güncellemeler