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:
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.
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.
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>