Svelte Reactivity Kavramına Giriş

Reactivity Kavramı

Reactivity, modern frontend frameworkleriyle yaygınlaşan bir kavramdır. Bu kavram, uygulamanın herhangi bir durum değişikliği olduğunda kullanıcı arayüzünün (UI) otomatik olarak güncellenmesini sağlar. Svelte’in reactivity özelliğini kullanmanın farklı yöntemleri vardır.

Svelte’de Reactivity Türleri:

1. Değişkenler

Değişkenler, Svelte’de reactivity’nin en temel türüdür. Değişken değeri güncellendiğinde, UI buna uygun olarak tepki verir.

Bir framework’ler dizisi oluşturalım ve diziye yeni bir framework ekleyelim, ve bir listede tüm framework’leri görüntüleyelim.

<script>
    let frameworks = ["React", "Vue", "Angular"];
    
    function addFramework(name) {
        frameworks.push(name); // reactivity çalışmadı, neden?
    }
</script>

<button on:click={() => addFramework("svelte")}>framework ekle</button>

<ul>
	{#each frameworks as f}
		<li>{f}</li>
	{/each}
</ul>

Öncelikle, svelte elamanı diziye ekledi, ancak UI güncellenmedi. Neden?

Çünkü push metodu yeni bir referans oluşturmadı, sadece var olan diziyi değiştirdi. Svelte, değişikliği algılamak ve reactivity’i çalıştırmak için yeni bir referansa ihtiyaç duyar.

İşte, bu durumda reactivity’i aktişleştirmek için çözüm:

Diziye eleman eklemek için push metodu yerine yeni bir diziyi atamak için spread fonksiyonunu kullanacağız ve ardından reaktivity çalışacak ve ekrana yazdırılan liste güncellenecek.

<script>
    let frameworks = ["React", "Vue", "Angular"];
    
    function addFramework(name) {
        frameworks = [...frameworks, name]; // reactivity çalıştı
    }
</script>

<button on:click={() => addFramework("svelte")}>framework ekle</button>

<ul>
	{#each frameworks as f}
		<li>{f}</li>
	{/each}
</ul>

Diğer frameworklerin aksine Svelte, bir değişkenin değeri değiştiğinde otomatik olarak UI’yi günceller. Bu, uygulamayı daha hızlı ve daha verimli hale getirir.

Örneğin, React’te bir değişkenin değerini setState fonksiyonunu kullanarak değiştirdiğinizde, bileşen yeniden render edilmelidir.

2. Reaktif İfadeler

Reaktif ifadeler, bir değişkenin değeri değiştiğinde çalışan kod satırlarıdır. Örnek olarak bir dizi işlem yapmak istediğinizde kullanışlıdır.

<script>
  let isDarkMode = false;

  $: {
    if (isDarkMode) {
      document.body.classList.add('dark');
    } else {
      document.body.classList.remove('dark');
    }
  }
</script>

<label>
  <input type="checkbox" bind:checked={isDarkMode}>
  Dark Modu Değiştir
</label>

<style>
  .dark {
    background-color: #333;
    color: #fff;
  }</style>

Örneğin, yukarıdaki örnekte, isDarkMode değişkeninin değeri değiştiğinde document.body öğesine .dark class’ını eklemek veya kaldırmak için reaktif bir ifade kullanılır.

$: işareti, bir reaktif ifadenin başlangıcını belirtir. Bu ifade, isDarkMode değişkeninin güncellendiğinde document.body elemanının .dark class’ını ekler veya kaldırır.

3. Reaktif Tanımlar

Reaktif tanımlar, diğer reaktif değerlere bağlı olarak hesaplanan reaktif değerler oluşturmak için kullanılır. Örneğin, bir reaktif değerin değerine bağlı olarak hesaplanan başka bir reaktif değer oluşturabilirsiniz.

Bunu bir örnek ile görelim:

<script>
  let initialRelease = new Date("26/Kasım/2016");
  let currentDate = new Date();

  $: seconds = Math.floor((currentDate - initialRelease) / (1000));
</script>

<button on:click={() => currentDate = new Date()}>Hesapla</button>

<p>Svelte'in ilk sürümünden bu yana {seconds} geçti.</p>