Svelte elutsükli konksud: mis need on ja kuidas need töötavad?

Võtmed kaasavõtmiseks

• Svelte elutsükli konksud võimaldavad teil juhtida komponendi elutsükli erinevaid etappe, nagu lähtestamine, värskendamine ja hävitamine.
• Svelte neli peamist elutsükli konksu on onMount, onDestroy, beforeUpdate ja afterUpdate.
• Neid elutsükli konkse kasutades saate teha selliseid toiminguid nagu andmete toomine, sündmuste kuulajate seadistamine, ressursside puhastamine ja kasutajaliidese värskendamine olekumuudatuste põhjal.

Svelte on kaasaegne JavaScripti raamistik, mis võimaldab luua tõhusaid veebirakendusi. Üks Svelte kriitilisi omadusi on selle elutsükli konksud, mis annavad teile kontrolli komponendi elutsükli erinevate etappide üle.

Mis on elutsükli konksud?

Elutsükli konksud on meetodid, mis käivituvad komponendi elutsükli teatud punktides. Need võimaldavad teil nendes punktides teha teatud toiminguid, nagu komponendi lähtestamine, muudatustele reageerimine või ressursside puhastamine.

Erinevatel raamistikel on erinevad elutsükli konksud, kuid neil kõigil on mõned ühised omadused. Svelte pakub nelja peamist elutsükli konksu: onMount, onDestroy, enne värskendamistja pärast värskendust.

Svelte projekti seadistamine

Et mõista, kuidas saate Svelte elutsükli konkse kasutada, alustage Svelte projekti loomisest. Saate seda teha mitmel viisil, näiteks nagu Vite'i (liidese koostamise tööriista) kasutamine või degit. Degit on käsurea tööriist Git-hoidlate allalaadimiseks ja kloonimiseks ilma kogu giti ajalugu alla laadimata.

Vite kasutamine

Svelte projekti loomiseks Vite abil käivitage terminalis järgmine käsk:

npm init vite

Kui olete käsu käivitanud, vastate mõnele viipale, et sisestada oma projekti nimi, raamistik, mida soovite kasutada, ja selle raamistiku konkreetne variant.

Nüüd liikuge projekti kataloogi ja installige vajalikud sõltuvused.

Selleks käivitage järgmised käsud:

cd svelte-app
npm install

Kasutades degit

Svelte projekti seadistamiseks degiti abil käivitage terminalis see käsk:

npx degit sveltejs/template svelte-app

Seejärel navigeerige projekti kataloogi ja installige vajalikud sõltuvused:

cd svelte-app
npm install

OnMount Hookiga töötamine

The onMount konks on Svelte elutsükli konks. Kui komponent esimest korda renderdatakse ja DOM-i sisestatakse, kutsub Svelte esile onMount hooki. See on sarnane komponentDidMount elutsükli meetod React klassi komponentides või useEffecthaak React funktsionaalsete komponentidega tühja sõltuvusmassiiviga.

Peamiselt kasutate onMount konksu lähtestamistoimingute tegemiseks, nagu näiteks andmete toomine API-st või sündmuste kuulajate seadistamine. OnMount hook on funktsioon, mis võtab ühe argumendi. See argument on funktsioon, mida rakendus komponendi esmakordsel renderdamisel kutsub.

Siin on näide onMount konksu kasutamise kohta:

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

Sinu peenike-rakendus projekt, loo a src/Test.svelte faili ja lisage sellele ülaltoodud kood. See kood impordib Sveltest onMount konksu ja kutsub seda käivitama lihtsat funktsiooni, mis logib konsooli teksti. OnMounti konksu testimiseks renderdage Test komponent sinus src/App.svelte fail:

Näiteks:

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

Seejärel käivitage rakendus:

npm run dev

Selle käsu käivitamine annab teile kohaliku URL-i nagu http://localhost: 8080. Rakenduse vaatamiseks külastage veebibrauseris linki. Rakendus logib teie brauseri konsoolis teksti "Komponent on DOM-i lisatud".

OnDestroy konksuga töötamine

Vastandina sellele onMount konks, kutsub Svelte onDestroy konks, kui kavatsete komponenti DOM-ist eemaldada. OnDestroy konks on kasulik kõigi ressursside või sündmuste kuulajate puhastamiseks, mille olete komponendi elutsükli jooksul seadistanud.

See konks sarnaneb Reacti omaga komponentWillUnmount elutsükli meetod ja see useEffect puhastusfunktsiooniga konks.

Siin on näide onDestroy konksu kasutamisest:

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

See kood käivitab taimeri, mis logib teie brauseri konsooli iga sekundi järel teksti "intervall". See kasutab onDestroy konksu intervalli tühjendamiseks, kui komponent DOM-ist lahkub. See takistab intervalli jätkamist, kui komponenti pole enam vaja.

Töö konksudega beforeUpdate ja afterUpdate

The enne värskendamist ja pärast värskendust konksud on elutsükli funktsioonid, mis töötavad enne ja pärast DOM-i värskendamist. Need konksud on kasulikud olekumuutustel põhinevate toimingute tegemiseks, nagu kasutajaliidese värskendamine või kõrvalmõjude käivitamine.

EnneUpdate konks töötab enne DOM-i värskendusi ja igal ajal, kui komponendi olek muutub. See on sarnane getSnapshotBeforeUpdate React klassi komponentides. Peamiselt kasutate enneUpdate konksu rakenduse uue oleku ja vana oleku võrdlemisel.

Allpool on näide, kuidas enne Update'i konksu kasutada:

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

Asendage kood oma Test komponent ülaloleva koodiplokiga. See kood kasutab konksu beforeUpdate väärtuse logimiseks loendama olek enne DOM-i värskendusi. Iga kord, kui klõpsate nuppu, käivitub suurendamisfunktsioon ja suurendab loendusoleku väärtust 1 võrra. See käivitab funktsiooni beforeUpdate ja logib loendusoleku väärtuse.

AfterUpdate konks töötab pärast DOM-i värskendusi. Tavaliselt kasutatakse seda koodi käitamiseks, mis peab toimuma pärast DOM-i värskendusi. See konks on sarnane komponentDidUpdate in React. Konks afterUpdate töötab nagu beforeUpdate konks.

Näiteks:

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

Ülaltoodud koodiplokk on sarnane eelmisele, kuid see kasutab loendusoleku väärtuse logimiseks konksu afterUpdate. See tähendab, et pärast DOM-i värskendusi logib loendusoleku.

Looge tugevaid rakendusi Svelte'i elutsükli konksude abil

Svelte elutsükli konksud on olulised tööriistad, mida kasutatakse dünaamiliste ja tundlike rakenduste loomiseks. Elutsükli konksude mõistmine on Svelte programmeerimise väärtuslik osa. Nende konksude abil saate juhtida oma komponentide lähtestamist, värskendamist ja hävitamist ning hallata nende olekumuutusi.