Sveltejs Academy · Ders

$state: İnce Taneli Reaktivite

Ayrıntılı DOM güncellemeleri için $state runesiyle reaktif durum tanımlayın.

2. ders / 413 adım

$state: İnce Taneli Reaktivite, 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.

Durumu Bildirme

Reaktif bir değişken bildirmek için $state(initial) kullanın.

let count = $state(0);

Normal Olarak Yeniden Atama

Normal atama ile güncelleyin. Svelte, bağımlı kullanıcı arayüzünü yeniden oluşturur.

count = count + 1;

Nesneler ve Diziler

Nesnelerle ve dizilerle kullanılan $state, derin vekil nesneler oluşturur; değişiklikler reaktiftir.

let user = $state({ name: "Ada" });
user.name = "Bea";   // triggers update

Artık items = items Gerekmez

Güncellemeleri tetiklemek için artık yeniden atama yapmanız gerekmez; vekil nesneler değişiklikleri yakalar.

Ayrıntılı Güncellemeler

Yalnızca değişen özelliği kullanan DOM bölümleri yeniden oluşturulur.

İşlev Dönüşleri

Yeniden kullanılabilir durum parçaları için $state destekli nesneleri işlevlerden döndürebilirsiniz.

function counter() {
  let n = $state(0);
  return {
    get value() { return n; },
    increment() { n++; }
  };
}

Kitaplıklarda Kullanım

.svelte.ts uzantısını kullanmaları koşuluyla $state'i .ts/.js dosyalarında da kullanabilirsiniz.

İzleme Dışı

Bir durum değerini bağımlılık kaydetmeden okumak için untrack() kullanın.

Ham Durum

Reaktif olmayan büyük veriler için vekil nesneyi atlamak üzere $state.raw kullanın.

Dondurulmuş Anlık Görüntü

Vekil nesne olmayan düz bir kopya almak için $state.snapshot(obj) kullanın.

let ile Karşılaştırma

$state, örtük reaktiviteye sahip düz let kullanımının modern karşılığıdır.

Kısa Kontrol

Bir $state nesnesini değiştirdiğinizde ne olur?

Özet

$state, derin vekil nesneler ve diziler de dâhil olmak üzere ayrıntılı reaktif değişkenler oluşturur.

Başlamak ücretsiz

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

“$state: İnce Taneli Reaktivite” dersi ücretsiz mi?

Evet — “$state: İnce Taneli Reaktivite” 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.

“$state: İnce Taneli Reaktivite” dersinde ne öğreneceğim?

Ayrıntılı DOM güncellemeleri için $state runesiyle reaktif durum tanımlayı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.

“$state: İnce Taneli Reaktivite” 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

  1. Runeler Neden Var: Derleyici Sihirinin Ötesine Geçmek
  2. $state: İnce Taneli Reaktivite
  3. $derived: Bildirimsel Hesaplanmış Değerler
  4. $effect: Yan Etkiler
← Sveltejs Academy Sayfasına Dön