Web sitemde bu konu hakkında birçok gönderi olduğumu göz önüne alarak Svelte ve SvelteKit'i ne kadar sevdiğimi görebilirsiniz. İnternette Svelte diğer frameworklerle karşılaştırıldığında - haksız yere - nispeten yeni olduğu için community desteği eksik olduğu belirtilir.

Bu harika framework'e olan görevim olarak, topluluğunu genişletmeye ve deneme yanılma yoluyla edindiğim bilgileri yeni gelenlerle paylaşmaya karar verdim.

Bu yazıda, Svelte'de reaktivite konusunu ele alalım.

Bazen bir değişkenin değişikliği DOM'da bir değişikliğe neden olmaz ve Svelte'in reaktivitesi nasıl gerçekleştiği konusunda bazı belirsizlikler vardır. Bu yüzden derine inelim.

Svelte'de Reaktivite

Aşağıdaki ayarlamaya sahip olduğunuzu düşünün ve kullanıcı adının aşağıdaki gibi yansıtılması gerektiğini düşünün:

Bunu Svelte'de binding kullanarak kolayca elde edebilirsiniz.

Binding (Baglama)

Girişin değeri aşağıdaki gibi name değişkenine bağlanabilir ve bu, DOM öğesinin her zaman giriş değeriyle senkronize olacağı anlamına gelir.

<script>
let name = 'Kepler';
</script>

<input bind:value={name} />
<h1>Welcome {name}</h1>

Şimdi bu beklendiği gibi çalışıp çalışmadığını görelim:

Evet! Bu Svelte'de reaktiviteyi sağlamanın en zarif yolu olmasına rağmen, konu hakkında tam bir anlayış elde etmek için diğer seçenekleri keşfetmekte fayda var.

Bunu başka bir değer atama yöntemiyle de elde edebilirsiniz.

Değer Atama (Value Assignment)

Bir değişkene değer script bölümünde atandığında, bu reaktif hale gelir. Bağlama etkisi, değer atama aracılığıyla, elbette zarif olmasa da, elde edilebilir.

<script>
let name = 'Copernicus';
</script>

<input on:change={(e) => (name = e.currentTarget.value)} value={name}/>
<h1>Welcome {name}</h1>

Yukarıdaki kod aşağıdaki gibi çalışır: Girişin değeri değiştiğinde, bir değişiklik olayı tetiklenir. Event tetiklendikten sonra, name değişkeni olayın tetiklediği değere atanır. name değişkenini script bölümünde tanımladığımızdan, reaktif hale gelir. Dolayısıyla, bu değişkende herhangi bir değişiklik, ilgili DOM öğesinin yeniden render edilmesini tetikler. Beklendiği gibi çalışıp çalışmadığını görelim:

Yazarken reaktivite yalnızca tamamlandığında görülür. Yazarken reaktiviteyi görmüyoruz. Bunu yapmak için, change olayının input olayına dönüştürülmesi gerekir:

<script>
let name = 'Newton';
</script>

<input on:input={(e) => (name = e.currentTarget.value)} value={name}/>
<h1>Welcome {name}</h1>

Yukarıdaki kodla, yazarken reaktivite sağlanabilir:

Reaktivite nerede bozulur?

Şimdiye kadar öğrendiğimiz kadarıyla, bir değişkenin script etiketleri içinde bildirilmesi durumunda, reaktif olacaktır. Yani, değerindeki değişiklikler DOM'da yansıtılacaktır.

Ancak, kuralın bir istisnası her zaman vardır.

Bir değişken, başka bir değişkenden türetilmiş olarak bildirilirse, DOM'da bir değişiklik olsa bile reaktif olmayacaktır, ve başlangıçta bildirilen değer reaktif de olsa. Bunun aşağıdaki eylemde nasıl gerçekleştiğini görelim:

<script>
let name = 'Einstein';
let welcomeMessage = `Hello ${name}`;
</script>

<input bind:value={name} />
<h1>{wolcomeMessage}</h1>

Yukarıdaki kodda, name değişkeni her zamanki gibi reaktiftir. Ancak, ondan yeni bir değişken olan welcomeMessage türetiliyor.

Bunu çalışıp çalışmayacağını görelim:

Yukarıda belirtildiği gibi, reaktivite burada çalışmayacaktır ve welcomeMessage, girişi değiştirdiğimizde bile "Welcome Einstein" olarak kalacaktır. Bunun nedeni, script etiketleri arasındaki alanın bileşen render edildiğinde yalnızca bir kez çalıştırılmasıdır. Bu nedenle, welcomeMessage "Welcome Einstein" olarak başlatılır ve ilk render işleminden sonra name değişkenine olan tüm bağlantısını bırakır.

Karmaşık uygulamalarda, türetilmiş değişkenlere sahip olacağımızdan eminiz, bu tür değişkenleri nasıl reaktif hale getirebiliriz?

Türetilmiş Değişkenleri Reaktif Hale Getirme: 1. $ İşareti

Türetilmiş değişkenin önüne bir $ (dolar) işareti ekleyerek, onu reaktif hale getirmek mümkündür. Bu şekilde, svelte bu değişkeni takip edecek ve değiştiğinde değişikliğin DOM'da yansıtılmasını sağlayacaktır.

Bunu aşağıdaki gibi elde edilir:

<script>
let name = 'Stephen';
$: welcomeMessage = `Hello ${name}`;
</script>

<input bind:value={name} />
<h1>{wolcomeMessage}</h1>

Bunun çalışıp çalışmayacağını görelim:

Evet! Bu nedenle, bir değişkenin başka bir değişkenden türetilmiş olduğu durumlarda, reaktif olması için $ (dolar) işaretini kullanmayı unutmayın. Bu sözdiziminden hoşlanmazsanız, reaktiviteyi sağlamanın başka bir yol daha vardır.

Türetilmiş Değişkenleri Reaktif Hale Getirme: 2. Key Fonksiyonu

Reaktif hale getirmek istediğiniz bölümü key etiketleri içine ekleyerek, $ (dolar) işareti olmadan da reaktiviteyi sağlayabilirsiniz. Sözdizimi aşağıdaki gibi:

<script>
let name = 'Carl';
let welcomeMessage = `Hello ${name}`;
</script>

<input bind:value={name} />
{#key name}
<h1>{wolcomeMessage}</h1>
{/key}

key yanına yazılan değişken, sveltin takip etmesini istediğiniz değişkendir. Bu durumda, ona name değişkenini takip etmesini söylüyoruz. Ancak, ona welcomeMessage değişkenini takip etmesini de isteyebilirsiniz ve bu da sorunsuz çalışmalıdır.

Sonuç

Bu yazıda, svelte'deki reaktiviteyi inceledik. Başlıca konular şunlardır:

• Değişkeni script içinde bildirme
• 2-way bindings (İki yönlü bağlama)
• Event binding (Olay baglama)

Ayrıca, türetilmiş değişkenlerin svelte'te izlenmediğini ve onlara yapılan değişikliklerin DOM'da yansıtılmayacağını öğrendik. Bu değişkenleri reaktif hale getirmenin 2 yolunu inceledik:

• $ (Dolar) İşareti
• Key Fonksiyonu

Svelte, en iyi front-end framework'tur ve reaktivitesi, bu harika framework'un neden olduğu başlıca nedenlerden biridir. Umarım bu yazıyla Svelte'deki reaktivite anlayışınızı derinleştirebilmişimdir.

Herhangi bir sorunuz varsa bana bildirin.

Keyifli kodlamalar!