Svelte dzīves cikla āķi: kas tie ir un kā tie darbojas?

Key Takeaways

• Svelte dzīves cikla āķi ļauj kontrolēt dažādus komponenta dzīves cikla posmus, piemēram, inicializāciju, atjaunināšanu un iznīcināšanu.
• Četri galvenie dzīves cikla āķi Svelte ir onMount, onDestroy, beforeUpdate un afterUpdate.
• Izmantojot šos dzīves cikla āķus, varat veikt tādas darbības kā datu iegūšana, notikumu uztvērēju iestatīšana, resursu tīrīšana un lietotāja interfeisa atjaunināšana, pamatojoties uz stāvokļa izmaiņām.

Svelte ir moderns JavaScript ietvars, kas ļauj izveidot efektīvas tīmekļa lietojumprogrammas. Viena no Svelte svarīgākajām funkcijām ir tā dzīves cikla āķi, kas nodrošina kontroli pār dažādiem komponenta dzīves cikla posmiem.

Kas ir dzīves cikla āķi?

Dzīves cikla āķi ir metodes, kas iedarbojas noteiktos komponenta dzīves cikla punktos. Tie ļauj šajos punktos veikt noteiktas darbības, piemēram, inicializēt komponentu, reaģēt uz izmaiņām vai tīrīt resursus.

Dažādām sistēmām ir dažādi dzīves cikla āķi, taču tiem visiem ir kopīgas iezīmes. Svelte piedāvā četrus galvenos dzīves cikla āķus:

onMount, onDestroy, pirms atjaunināšanas, un pēc atjaunināšanas.

Svelte projekta izveide

Lai saprastu, kā izmantot Sveltes dzīves cikla āķus, sāciet ar Svelte projekta izveidi. To var izdarīt dažādos veidos, piemēram kā izmantojot Vite (priekšgala veidošanas rīks) vai degit. Degit ir komandrindas rīks, lai lejupielādētu un klonētu git repozitorijus, nelejupielādējot visu Git vēsturi.

Izmantojot Vite

Lai izveidotu Svelte projektu, izmantojot Vite, terminālī palaidiet šādu komandu:

npm init vite

Kad palaižat komandu, jūs atbildēsit uz dažām uzvednēm, lai norādītu sava projekta nosaukumu, ietvaru, kuru vēlaties izmantot, un konkrēto šī ietvara variantu.

Tagad dodieties uz projekta direktoriju un instalējiet nepieciešamās atkarības.

Lai to izdarītu, palaidiet šādas komandas:

cd svelte-app
npm install

Izmantojot degit

Lai iestatītu Svelte projektu, izmantojot degit, terminālī palaidiet šo komandu:

npx degit sveltejs/template svelte-app

Pēc tam dodieties uz projekta direktoriju un instalējiet nepieciešamās atkarības:

cd svelte-app
npm install

Darbs ar onMount Hook

The onMount āķis ir vitāli svarīgs dzīves cikla āķis Sveltē. Svelte izsauc onMount āķi, kad komponents pirmo reizi tiek renderēts un ievietots DOM. Tas ir līdzīgs komponentsDidMount dzīves cikla metodi React klases komponentos vai useEffectāķis React funkcionālajos komponentos ar tukšu atkarību masīvu.

Jūs galvenokārt izmantosit onMount āķi, lai veiktu inicializācijas uzdevumus, piemēram, datu iegūšana no API vai iestatīt notikumu klausītājus. OnMount āķis ir funkcija, kas izmanto vienu argumentu. Šis arguments ir funkcija, ko lietojumprogramma izsauks, pirmo reizi renderējot komponentu.

Šeit ir piemērs, kā izmantot onMount āķi:

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

Tavā Svelte-app projektu, izveidot a src/Test.svelte failu un pievienojiet tam iepriekš minēto kodu. Šis kods importē onMount āķi no Svelte un aicina to palaist vienkāršu funkciju, kas reģistrē tekstu konsolē. Lai pārbaudītu onMount āķi, renderējiet Pārbaude komponents jūsu src/App.svelte fails:

Piemēram:

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

Pēc tam palaidiet lietotni:

npm run dev

Palaižot šo komandu, jūs saņemsit vietējo URL, piemēram, http://localhost: 8080. Apmeklējiet saiti tīmekļa pārlūkprogrammā, lai skatītu savu lietojumprogrammu. Lietojumprogramma jūsu pārlūkprogrammas konsolē reģistrēs tekstu “Komponents ir pievienots DOM”.

Darbs ar onDestroy Hook

Kā pretstats onMount āķis, Svelte sauc onDestroy āķis, kad tas gatavojas noņemt komponentu no DOM. OnDestroy āķis ir noderīgs, lai iztīrītu visus resursus vai notikumu uztvērējus, ko iestatījāt komponenta dzīves cikla laikā.

Šis āķis ir līdzīgs React āķim komponentsWillUnmount dzīves cikla metode un tā useEffect āķis ar tīrīšanas funkciju.

Šeit ir piemērs, kā izmantot onDestroy āķi:

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

Šis kods iedarbina taimeri, kas katru sekundi jūsu pārlūkprogrammas konsolē reģistrē tekstu “intervāls”. Tas izmanto onDestroy āķi, lai notīrītu intervālu, kad komponents atstāj DOM. Tas neļauj intervālam turpināt darboties, kad komponents vairs nav vajadzīgs.

Darbs ar āķiem beforeUpdate un afterUpdate

The pirms atjaunināšanas un pēc atjaunināšanas āķi ir dzīves cikla funkcijas, kas darbojas pirms un pēc DOM atjaunināšanas. Šie āķi ir noderīgi, lai veiktu darbības, kuru pamatā ir stāvokļa izmaiņas, piemēram, lietotāja interfeisa atjaunināšana vai blakusparādību aktivizēšana.

Āķis beforeUpdate darbojas pirms DOM atjaunināšanas un jebkurā laikā, kad mainās komponenta stāvoklis. Tas ir līdzīgs getSnapshotBeforeUpdate sadaļā React klases komponenti. Jūs galvenokārt izmantojat pirmsUpdate āķi, salīdzinot lietojumprogrammas jauno stāvokli ar veco stāvokli.

Tālāk ir sniegts āķa beforeUpdate izmantošanas piemērs:

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

Nomainiet kodu savā Pārbaude komponents ar koda bloku iepriekš. Šis kods izmanto pirmsUpdate āķi, lai reģistrētu vērtību skaitīt stāvoklī pirms DOM atjauninājumiem. Katru reizi, noklikšķinot uz pogas, tiek izpildīta palielināšanas funkcija un tiek palielināta skaitīšanas stāvokļa vērtība par 1. Tas liek funkcijai beforeUpdate darboties un reģistrēt skaitīšanas stāvokļa vērtību.

AfterUpdate āķis darbojas pēc DOM atjauninājumiem. To parasti izmanto, lai palaistu kodu, kam jānotiek pēc DOM atjauninājumiem. Šis āķis ir līdzīgs komponentsDidUpdate sadaļā Reakt. Āķis afterUpdate darbojas tāpat kā pirmsUpdate āķis.

Piemēram:

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

Iepriekš minētais koda bloks ir līdzīgs iepriekšējam, taču šajā blokā tiek izmantots āķis afterUpdate, lai reģistrētu skaitīšanas stāvokļa vērtību. Tas nozīmē, ka pēc DOM atjauninājumiem tas reģistrēs skaitīšanas stāvokli.

Izveidojiet izturīgas lietotnes, izmantojot Svelte dzīves cikla āķus

Svelte dzīves cikla āķi ir būtiski rīki, ko izmanto, lai izveidotu dinamiskas un atsaucīgas lietojumprogrammas. Izpratne par dzīves cikla āķiem ir vērtīga Svelte programmēšanas sastāvdaļa. Izmantojot šos āķus, varat kontrolēt savu komponentu inicializēšanu, atjaunināšanu un iznīcināšanu, kā arī apstrādāt to stāvokļa izmaiņas.