Bileşenlerinizin yaşam döngüsünün çeşitli noktalarında kodu nasıl çalıştıracağınızı keşfedin.

Temel Çıkarımlar

  • Svelte'nin yaşam döngüsü kancaları, bir bileşenin yaşam döngüsünün başlatma, güncelleme ve yok etme gibi farklı aşamalarını kontrol etmenize olanak tanır.
  • Svelte'deki dört ana yaşam döngüsü kancası onMount, onDestroy, beforeUpdate ve afterUpdate'tir.
  • Bu yaşam döngüsü kancalarını kullanarak veri getirme, olay dinleyicilerini ayarlama, kaynakları temizleme ve durum değişikliklerine göre kullanıcı arayüzünü güncelleme gibi eylemleri gerçekleştirebilirsiniz.

Svelte, verimli web uygulamaları oluşturmanıza olanak tanıyan modern bir JavaScript çerçevesidir. Svelte'nin kritik özelliklerinden biri, bir bileşenin yaşam döngüsünün farklı aşamaları üzerinde kontrol sahibi olmanızı sağlayan yaşam döngüsü kancalarıdır.

Yaşam Döngüsü Kancaları Nelerdir?

Yaşam döngüsü kancaları, bir bileşenin yaşam döngüsündeki belirli noktalarda tetiklenen yöntemlerdir. Bu noktalarda bileşeni başlatmak, değişikliklere yanıt vermek veya kaynakları temizlemek gibi belirli eylemleri gerçekleştirmenize olanak tanır.

instagram viewer

Farklı çerçevelerin farklı yaşam döngüsü kancaları vardır, ancak hepsi bazı ortak özellikleri paylaşır. Svelte dört ana yaşam döngüsü kancası sunar: onMount, yok etme, Güncellemeden önce, Ve güncellemeden sonra.

Svelte Projesi Kurma

Svelte'nin yaşam döngüsü kancalarını nasıl kullanabileceğinizi anlamak için bir Svelte projesi oluşturarak başlayın. Bunu çeşitli şekillerde yapabilirsiniz, örneğin Vite (bir ön uç oluşturma aracı) kullanıyormuş gibi veya rakam. Degit, git geçmişinin tamamını indirmeden git depolarını indirmek ve klonlamak için kullanılan bir komut satırı aracıdır.

Vite'ı kullanma

Vite kullanarak bir Svelte projesi oluşturmak için terminalinizde aşağıdaki komutu çalıştırın:

npm init vite

Komutu çalıştırdığınızda, projenizin adını, kullanmak istediğiniz çerçeveyi ve bu çerçevenin spesifik varyantını belirtmek için bazı istemleri yanıtlayacaksınız.

Şimdi projenin dizinine gidin ve gerekli bağımlılıkları yükleyin.

Bunu yapmak için aşağıdaki komutları çalıştırın:

cd svelte-app
npm install

Rakam kullanma

Svelte projenizi degit kullanarak ayarlamak için terminalinizde şu komutu çalıştırın:

npx degit sveltejs/template svelte-app

Ardından projenin dizinine gidin ve gerekli bağımlılıkları yükleyin:

cd svelte-app
npm install

onMount Hook ile Çalışmak

onMount kanca, Svelte'de hayati bir yaşam döngüsü kancasıdır. Svelte, bir bileşen ilk kez oluşturulduğunda ve DOM'a eklendiğinde onMount kancasını çağırır. Şuna benzer bileşenDidMount React sınıfı bileşenlerindeki yaşam döngüsü yöntemi veya kullanımEtkisiReact fonksiyonel bileşenlerini bağlayın boş bir bağımlılık dizisiyle.

Aşağıdaki gibi başlatma görevlerini gerçekleştirmek için öncelikle onMount kancasını kullanacaksınız: bir API'den veri alma veya olay dinleyicilerini ayarlama. onMount hook, tek bir argüman alan bir fonksiyondur. Bu argüman, uygulamanın bileşeni ilk kez işlediğinde çağıracağı işlevdir.

onMount kancasını nasıl kullanabileceğinizi gösteren bir örnek:

<script>
import { onMount } from 'svelte'
onMount( () => { console.log('Component has been added to the DOM')} );
script>
<div>
<p>This is a random componentp>
div>

senin içinde zarif uygulama proje oluşturmak src/Test.svelte Dosyayı açın ve yukarıdaki kodu ona ekleyin. Bu kod, onMount kancasını Svelte'den içe aktarır ve onu basit bir işlevi çalıştırmak için çağırır. konsoldaki metni günlüğe kaydeder. onMount kancasını test etmek için Ölçek senin içindeki bileşen src/App.svelte dosya:

Örneğin:

<script>
import Test from "./Test.svelte";
script>
<main>
<h1>Hello There!h1>
<Test />
main>

Ardından uygulamayı çalıştırın:

npm run dev

Bu komutu çalıştırmak size aşağıdaki gibi bir yerel URL sağlayacaktır: http://localhost: 8080. Başvurunuzu görüntülemek için bir web tarayıcısındaki bağlantıyı ziyaret edin. Uygulama, tarayıcınızın konsoluna "Bileşen DOM'a eklendi" metnini kaydedecektir.

onDestroy Hook ile Çalışmak

Bunun tersi olarak onMount kanca, Svelte çağırır yok etme DOM'dan bir bileşeni kaldırmak üzereyken kancayı takın. onDestroy kancası, bileşenin yaşam döngüsü boyunca kurduğunuz kaynakları veya olay dinleyicilerini temizlemek için kullanışlıdır.

Bu kanca React'ınkine benzer bileşenWillUnmount yaşam döngüsü yöntemi ve onun kullanımEtkisi temizleme işlevine sahip kanca.

onDestroy kancasının nasıl kullanılacağına dair bir örnek:

<script>
import { onDestroy } from "svelte";
let intervalId;
intervalId = setInterval(() => {
 console.log("interval");
}, 1000);
onDestroy(() => {
 clearInterval(intervalId);
});
script>

Bu kod, "aralık" metnini her saniye tarayıcınızın konsoluna kaydeden bir zamanlayıcı başlatır. Bileşenin DOM'dan ayrıldığı zaman aralığını temizlemek için onDestroy kancasını kullanır. Bu, bileşene artık ihtiyaç duyulmadığında aralığın çalışmaya devam etmesini önler.

beforeUpdate ve afterUpdate Kancalarıyla Çalışmak

Güncellemeden önce Ve güncellemeden sonra Kancalar, DOM'un güncellenmesinden önce ve sonra çalışan yaşam döngüsü işlevleridir. Bu kancalar, kullanıcı arayüzünü güncelleme veya yan etkileri tetikleme gibi durum değişikliklerine dayalı eylemleri gerçekleştirmek için kullanışlıdır.

BeforeUpdate kancası, DOM güncellemelerinden önce ve bileşenin durumu değiştiğinde çalışır. Benzer Güncellemeden Önce Anlık Görüntü Al React sınıfı bileşenlerinde. Uygulamanın yeni durumunu eski durumuyla karşılaştırırken çoğunlukla beforeUpdate kancasını kullanırsınız.

Aşağıda beforeUpdate kancasının nasıl kullanılacağına dair bir örnek verilmiştir:

<script>
import { beforeUpdate } from "svelte";
let count = 0;


beforeUpdate(() => {
 console.log("Count before update:", count);
});


function increment() {
 count += 1;
}
script>
<buttonon: click={increment}>Count: {count}button>

Kodunuzdaki kodu değiştirin Ölçek Yukarıdaki kod bloğuna sahip bileşen. Bu kod, değerini günlüğe kaydetmek için beforeUpdate kancasını kullanır. saymak DOM güncellemelerinden önceki durum. Düğmeye her tıkladığınızda, artırma işlevi çalışır ve sayma durumunun değerini 1 artırır. Bu, beforeUpdate işlevinin çalışmasına ve sayım durumunun değerini günlüğe kaydetmesine neden olur.

AfterUpdate kancası DOM güncellemelerinden sonra çalışır. Genellikle DOM güncellemelerinden sonra gerçekleşmesi gereken kodu çalıştırmak için kullanılır. Bu kancaya benzer bileşenDidUpdate React'ta. AfterUpdate kancası beforeUpdate kancası gibi çalışır.

Örneğin:

<script>
import { afterUpdate } from "svelte";
let count = 0;


afterUpdate(() => {
 console.log("Count after update:", count);
});


function increment() {
 count += 1;
}
script>
<buttonon: click={increment}>Count: {count}button>

Yukarıdaki kod bloğu öncekine benzer, ancak bu, bunun yerine sayım durumunun değerini günlüğe kaydetmek için afterUpdate kancasını kullanır. Bu, DOM güncellemelerinden sonra sayım durumunu günlüğe kaydedeceği anlamına gelir.

Svelte'nin Yaşam Döngüsü Kancalarını Kullanarak Sağlam Uygulamalar Oluşturun

Svelte'deki yaşam döngüsü kancaları, dinamik ve duyarlı uygulamalar oluşturmak için kullanılan temel araçlardır. Yaşam döngüsü kancalarını anlamak Svelte programlamanın değerli bir parçasıdır. Bu kancaları kullanarak bileşenlerinizin başlatılmasını, güncellenmesini ve yok edilmesini kontrol edebilir ve durum değişikliklerini yönetebilirsiniz.