Otkrijte kako pokrenuti kod na različitim točkama životnog ciklusa vaših komponenti.

Ključni zahvati

  • Svelteove kuke životnog ciklusa omogućuju vam kontrolu različitih faza životnog ciklusa komponente, kao što su inicijalizacija, ažuriranje i uništavanje.
  • Četiri glavne kuke životnog ciklusa u Svelteu su onMount, onDestroy, beforeUpdate i afterUpdate.
  • Upotrebom ovih kukica životnog ciklusa možete izvoditi radnje poput dohvaćanja podataka, postavljanja slušatelja događaja, čišćenja resursa i ažuriranja korisničkog sučelja na temelju promjena stanja.

Svelte je moderan JavaScript okvir koji vam omogućuje izradu učinkovitih web aplikacija. Jedna od kritičnih značajki Sveltea su njegove kuke životnog ciklusa koje vam omogućuju kontrolu nad različitim fazama životnog ciklusa komponente.

Što su kuke životnog ciklusa?

Priključnice životnog ciklusa metode su koje se aktiviraju u određenim točkama životnog ciklusa komponente. Oni vam omogućuju izvođenje određenih radnji u tim točkama, kao što je inicijalizacija komponente, odgovaranje na promjene ili čišćenje resursa.

instagram viewer

Različiti okviri imaju različite kuke životnog ciklusa, ali svi dijele neke zajedničke značajke. Svelte nudi četiri glavne udice životnog ciklusa: onMount, onDestroy, prijeAžuriranja, i afterUpdate.

Postavljanje Svelte projekta

Da biste razumjeli kako možete koristiti Svelteove kuke životnog ciklusa, započnite stvaranjem Svelte projekta. To možete učiniti na različite načine, npr kao korištenje Vite (alat za izradu prednjeg dijela) ili degit. Degit je alat naredbenog retka za preuzimanje i kloniranje git repozitorija bez preuzimanja cijele git povijesti.

Korištenje Vite

Da biste izradili Svelte projekt koristeći Vite, pokrenite sljedeću naredbu na svom terminalu:

npm init vite

Nakon što pokrenete naredbu, odgovorit ćete na neke upite da navedete naziv svog projekta, okvir koji želite koristiti i određenu varijantu tog okvira.

Sada idite do direktorija projekta i instalirajte potrebne ovisnosti.

Pokrenite sljedeće naredbe da to učinite:

cd svelte-app
npm install

Korištenje degit

Da biste postavili svoj Svelte projekt koristeći degit, pokrenite ovu naredbu na svom terminalu:

npx degit sveltejs/template svelte-app

Zatim idite do direktorija projekta i instalirajte potrebne ovisnosti:

cd svelte-app
npm install

Rad s kukom onMount

The onMount kuka je vitalna kuka životnog ciklusa u Svelteu. Svelte poziva onMount hook kada se komponenta prvi put renderira i umetne u DOM. Slično je komponentaDidMount metoda životnog ciklusa u komponentama klase React ili useEffectspojiti funkcionalne komponente Reacta s praznim poljem ovisnosti.

Primarno ćete koristiti onMount kuku za izvođenje zadataka inicijalizacije, kao što je dohvaćanje podataka iz API-ja ili postavljanje slušatelja događaja. OnMount kuka je funkcija koja uzima jedan argument. Ovaj argument je funkcija koju će aplikacija pozvati kada prvi put renderira komponentu.

Evo primjera kako možete koristiti onMount kuku:

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

U vašem vitka aplikacija projekt, stvoriti a src/Test.svelte datoteku i dodajte joj gornji kod. Ovaj kod uvozi onMount kuku iz Sveltea i poziva je da pokrene jednostavnu funkciju koja zapisuje tekst na konzoli. Da biste testirali onMount kuku, renderirajte Test komponenta u vašem src/App.svelte datoteka:

Na primjer:

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

Zatim pokrenite aplikaciju:

npm run dev

Izvođenjem ove naredbe dobit ćete lokalni URL poput http://localhost: 8080. Posjetite poveznicu u web-pregledniku da biste vidjeli svoju prijavu. Aplikacija će zabilježiti tekst "Komponenta je dodana u DOM" u konzoli vašeg preglednika.

Rad s kukom onDestroy

Kao suprotnost od onMount kuka, Svelte naziva onDestroy hook kada se sprema ukloniti komponentu iz DOM-a. OnDestroy kuka korisna je za čišćenje svih resursa ili slušatelja događaja koje ste postavili tijekom životnog ciklusa komponente.

Ova kuka je slična Reactovoj componentWillUnmount metoda životnog ciklusa i njezina useEffect kuka s funkcijom čišćenja.

Evo primjera kako koristiti onDestroy kuku:

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

Ovaj kod pokreće mjerač vremena koji svake sekunde bilježi tekstualni "interval" na konzolu vašeg preglednika. Koristi onDestroy kuku za brisanje intervala kada komponenta napusti DOM. Ovo sprječava da interval nastavi teći kada komponenta više nije potrebna.

Rad s preusmjerivačima beforeUpdate i afterUpdate

The prijeAžuriranja i afterUpdate kuke su funkcije životnog ciklusa koje se pokreću prije i nakon ažuriranja DOM-a. Te su kuke korisne za izvođenje radnji na temelju promjena stanja, kao što je ažuriranje korisničkog sučelja ili pokretanje nuspojava.

Priključak beforeUpdate pokreće se prije ažuriranja DOM-a i kad god se promijeni stanje komponente. Slično je getSnapshotBeforeUpdate u komponentama klase React. Uglavnom koristite zakačilicu beforeUpdate kada uspoređujete novo stanje aplikacije sa starim stanjem.

Ispod je primjer kako koristiti zakačilicu beforeUpdate:

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

Zamijenite kôd u svom Test komponenta s gornjim blokom koda. Ovaj kod koristi zakačilicu beforeUpdate za zapisivanje vrijednosti računati stanje prije ažuriranja DOM-a. Svaki put kada kliknete gumb, pokreće se funkcija povećanja i povećava vrijednost stanja brojanja za 1. To uzrokuje pokretanje funkcije beforeUpdate i zapisivanje vrijednosti stanja brojanja.

Zakačka afterUpdate pokreće se nakon ažuriranja DOM-a. Obično se koristi za pokretanje koda koji se treba dogoditi nakon ažuriranja DOM-a. Ova udica je slična komponentaDidUpdate u Reactu. AfterUpdate hook funkcionira kao beforeUpdate hook.

Na primjer:

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

Gornji blok koda sličan je prethodnom, ali ovaj umjesto toga koristi zakačilicu afterUpdate za zapisivanje vrijednosti stanja brojanja. To znači da će zabilježiti stanje brojanja nakon ažuriranja DOM-a.

Izgradite robusne aplikacije koristeći Svelteove kukice životnog ciklusa

Priključci životnog ciklusa u Svelteu ključni su alati koji se koriste za stvaranje dinamičnih i responzivnih aplikacija. Razumijevanje kukica životnog ciklusa vrijedan je dio Svelte programiranja. Koristeći ove kuke, možete kontrolirati inicijalizaciju, ažuriranje i uništavanje svojih komponenti i upravljati njihovim promjenama stanja.