Svelte Lifecycle Hooks: kaj so in kako delujejo?

Ključni zaključki

• Kavlji življenjskega cikla podjetja Svelte vam omogočajo nadzor nad različnimi stopnjami življenjskega cikla komponente, kot so inicializacija, posodabljanje in uničenje.
• Štiri glavne zanke življenjskega cikla v Svelte so onMount, onDestroy, beforeUpdate in afterUpdate.
• Z uporabo teh kavljev življenjskega cikla lahko izvajate dejanja, kot so pridobivanje podatkov, nastavitev poslušalcev dogodkov, čiščenje virov in posodabljanje uporabniškega vmesnika na podlagi sprememb stanja.

Svelte je sodobno ogrodje JavaScript, ki vam omogoča izdelavo učinkovitih spletnih aplikacij. Ena od kritičnih lastnosti družbe Svelte so njegove kljuke življenjskega cikla, ki vam zagotavljajo nadzor nad različnimi stopnjami življenjskega cikla komponente.

Kaj so kljuke življenjskega cikla?

Kavlji življenjskega cikla so metode, ki se sprožijo na določenih točkah v življenjskem ciklu komponente. Omogočajo vam izvajanje določenih dejanj na teh točkah, kot je inicializacija komponente, odzivanje na spremembe ali čiščenje virov.

Različna ogrodja imajo različne kljuke življenjskega cikla, vendar imajo vsi nekaj skupnih lastnosti. Svelte ponuja štiri glavne kljuke življenjskega cikla: onMount, onDestroy, beforeUpdate, in afterUpdate.

Postavitev projekta Svelte

Če želite razumeti, kako lahko uporabite kljuke življenjskega cikla podjetja Svelte, začnite z ustvarjanjem projekta Svelte. To lahko storite na različne načine, npr kot uporaba Vite (orodje za gradnjo na sprednji strani) ali degit. Degit je orodje ukazne vrstice za prenos in kloniranje repozitorijev git brez prenosa celotne zgodovine git.

Uporaba Vite

Če želite ustvariti projekt Svelte z uporabo Vite, zaženite naslednji ukaz v vašem terminalu:

npm init vite

Ko zaženete ukaz, boste odgovorili na nekaj pozivov za vnos imena vašega projekta, ogrodja, ki ga želite uporabiti, in posebne različice tega ogrodja.

Zdaj se pomaknite do imenika projekta in namestite potrebne odvisnosti.

Za to zaženite naslednje ukaze:

cd svelte-app
npm install

Uporaba degit

Če želite nastaviti svoj projekt Svelte z uporabo degit, zaženite ta ukaz v terminalu:

npx degit sveltejs/template svelte-app

Nato se pomaknite do imenika projekta in namestite potrebne odvisnosti:

cd svelte-app
npm install

Delo s kavljem onMount

The onMount kavelj je pomemben kavelj življenjskega cikla v Svelte. Svelte pokliče kavelj onMount, ko je komponenta prvič upodobljena in vstavljena v DOM. Podobno je componentDidMount metoda življenjskega cikla v komponentah razreda React ali useEffecthook v funkcionalnih komponentah React s prazno matriko odvisnosti.

Kavelj onMount boste uporabljali predvsem za izvajanje inicializacijskih nalog, kot je npr pridobivanje podatkov iz API-ja ali nastavitev poslušalcev dogodkov. Kavelj onMount je funkcija, ki sprejme en sam argument. Ta argument je funkcija, ki jo bo aplikacija poklicala, ko prvič upodablja komponento.

Tukaj je primer, kako lahko uporabite kljuko onMount:

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

V vašem svelte-app projekt, ustvarite a src/Test.svelte datoteko in ji dodajte zgornjo kodo. Ta koda uvozi kljuko onMount iz Svelte in jo pokliče za zagon preproste funkcije, ki beleži besedilo na konzoli. Če želite preizkusiti kavelj onMount, upodobite Test komponento v vašem src/App.svelte mapa:

Na primer:

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

Nato zaženite aplikacijo:

npm run dev

Zagon tega ukaza vam bo zagotovil lokalni URL, kot je http://localhost: 8080. Obiščite povezavo v spletnem brskalniku, da si ogledate svojo aplikacijo. Aplikacija bo v konzolo vašega brskalnika zabeležila besedilo »Komponenta je bila dodana v DOM«.

Delo s kljuko onDestroy

Kot nasprotje od onMount kavelj, Svelte kliče onDestroy hook, ko namerava odstraniti komponento iz DOM. Kavelj onDestroy je uporaben za čiščenje virov ali poslušalcev dogodkov, ki ste jih nastavili med življenjskim ciklom komponente.

Ta kavelj je podoben Reactovemu componentWillUnmount metoda življenjskega cikla in njena useEffect kavelj s funkcijo čiščenja.

Tukaj je primer uporabe kljuke onDestroy:

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

Ta koda zažene časovnik, ki vsako sekundo zabeleži besedilni "interval" v konzolo vašega brskalnika. Za brisanje intervala, ko komponenta zapusti DOM, uporablja kavelj onDestroy. To prepreči, da bi se interval nadaljeval, ko komponenta ni več potrebna.

Delo s kavlji beforeUpdate in afterUpdate

The beforeUpdate in afterUpdate kavlji so funkcije življenjskega cikla, ki se izvajajo pred in po posodobitvi DOM-a. Te kljuke so uporabne za izvajanje dejanj na podlagi sprememb stanja, kot je posodabljanje uporabniškega vmesnika ali sprožitev stranskih učinkov.

Kavelj beforeUpdate se zažene, preden se DOM posodobi in kadar koli se spremeni stanje komponente. Podobno je getSnapshotBeforeUpdate v komponentah razreda React. Kavelj beforeUpdate večinoma uporabljate, ko primerjate novo stanje aplikacije z njenim starim stanjem.

Spodaj je primer uporabe kljuke 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>

Zamenjajte kodo v svojem Test komponento z zgornjim blokom kode. Ta koda uporablja kljuko beforeUpdate za beleženje vrednosti štetje stanje pred posodobitvijo DOM. Vsakič, ko kliknete gumb, se zažene funkcija povečanja in poveča vrednost stanja štetja za 1. To povzroči, da se funkcija beforeUpdate zažene in zabeleži vrednost stanja štetja.

Kavelj afterUpdate se zažene po posodobitvi DOM. Običajno se uporablja za izvajanje kode, ki se mora zgoditi po posodobitvah DOM. Ta kavelj je podoben componentDidUpdate v Reactu. Kavelj afterUpdate deluje kot kavelj beforeUpdate.

Na primer:

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

Zgornji blok kode je podoben prejšnjemu, vendar ta namesto tega uporablja kljuko afterUpdate za beleženje vrednosti stanja štetja. To pomeni, da bo zabeležil stanje štetja po posodobitvah DOM.

Zgradite robustne aplikacije z uporabo zavojev življenjskega cikla podjetja Svelte

Kavlji življenjskega cikla v Svelte so bistvena orodja, ki se uporabljajo za ustvarjanje dinamičnih in odzivnih aplikacij. Razumevanje zavojev življenjskega cikla je dragocen del programiranja Svelte. Z uporabo teh kavljev lahko nadzirate inicializacijo, posodobitev in uničenje svojih komponent ter obravnavate spremembe njihovega stanja.