Svelte gyvavimo ciklo kabliukai: kas tai yra ir kaip jie veikia?

Key Takeaways

• „Svelte“ gyvavimo ciklo kabliukai leidžia valdyti skirtingus komponento gyvavimo ciklo etapus, tokius kaip inicijavimas, atnaujinimas ir sunaikinimas.
• Keturi pagrindiniai Svelte gyvavimo ciklo kabliukai yra onMount, onDestroy, beforeUpdate ir afterUpdate.
• Naudodami šiuos gyvavimo ciklo kabliukus, galite atlikti tokius veiksmus kaip duomenų gavimas, įvykių klausytojų nustatymas, išteklių valymas ir vartotojo sąsajos atnaujinimas pagal būsenos pokyčius.

„Svelte“ yra moderni „JavaScript“ sistema, leidžianti kurti efektyvias žiniatinklio programas. Viena iš svarbiausių „Svelte“ savybių yra jos gyvavimo ciklo kabliukai, kurie suteikia jums galimybę valdyti skirtingus komponento gyvavimo ciklo etapus.

Kas yra gyvavimo ciklo kabliukai?

Gyvenimo ciklo kabliukai yra metodai, kurie suveikia tam tikruose komponento gyvavimo ciklo taškuose. Jie leidžia atlikti tam tikrus veiksmus šiuose taškuose, pvz., inicijuoti komponentą, reaguoti į pakeitimus arba išvalyti išteklius.

Skirtingos sistemos turi skirtingus gyvavimo ciklo kabliukus, tačiau jie visi turi tam tikrų bendrų bruožų. „Svelte“ siūlo keturis pagrindinius gyvavimo ciklo kabliukus: antMount, onDestroy, prieš atnaujinimą, ir po atnaujinimo.

Svelte projekto kūrimas

Norėdami suprasti, kaip galite naudoti „Svelte“ gyvavimo ciklo kabliukus, pradėkite nuo „Svelte“ projekto kūrimo. Tai galite padaryti įvairiais būdais, pvz kaip naudojant Vite (priekinės dalies kūrimo įrankį) arba degit. „Degit“ yra komandų eilutės įrankis, skirtas atsisiųsti ir klonuoti „git“ saugyklas, neatsisiunčiant visos „git“ istorijos.

Naudojant Vite

Norėdami sukurti Svelte projektą naudodami Vite, terminale paleiskite šią komandą:

npm init vite

Kai paleisite komandą, atsakysite į kai kuriuos raginimus, nurodydami projekto pavadinimą, norimą naudoti sistemą ir konkretų tos sistemos variantą.

Dabar eikite į projekto katalogą ir įdiekite reikiamas priklausomybes.

Norėdami tai padaryti, paleiskite šias komandas:

cd svelte-app
npm install

Naudojant degit

Norėdami nustatyti savo Svelte projektą naudodami degit, paleiskite šią komandą savo terminale:

npx degit sveltejs/template svelte-app

Tada eikite į projekto katalogą ir įdiekite reikiamas priklausomybes:

cd svelte-app
npm install

Darbas su onMount Hook

The antMount kabliukas yra gyvybiškai svarbus Svelte gyvavimo ciklo kabliukas. „Svelte“ iškviečia „onMount“ kabliuką, kai komponentas pirmą kartą atvaizduojamas ir įterpiamas į DOM. Jis panašus į komponentasDidMount gyvavimo ciklo metodas React klasės komponentuose arba naudojimoEfektaskablys į React funkcinius komponentus su tuščiu priklausomybių masyvu.

Pirmiausia naudosite onMount kabliuką inicijavimo užduotims atlikti, pvz., gauti duomenis iš API arba renginių klausytojų nustatymas. „OnMount Hook“ yra funkcija, kuriai taikomas vienas argumentas. Šis argumentas yra funkcija, kurią programa iškvies, kai pirmą kartą pateiks komponentą.

Štai pavyzdys, kaip galite naudoti „onMount“ kabliuką:

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

Jūsų svelte-app projektą, sukurti a src/Test.svelte failą ir pridėkite prie jo aukščiau pateiktą kodą. Šis kodas importuoja onMount kabliuką iš Svelte ir ragina jį paleisti paprastą funkciją, kuri registruoja tekstą konsolėje. Norėdami išbandyti onMount kabliuką, atvaizduokite Testas komponentas jūsų src/App.svelte failas:

Pavyzdžiui:

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

Tada paleiskite programą:

npm run dev

Vykdydami šią komandą gausite vietinį URL, pvz., http://localhost: 8080. Norėdami peržiūrėti programą, spustelėkite žiniatinklio naršyklės nuorodą. Programa jūsų naršyklės konsolėje įrašys tekstą „Komponentas pridėtas prie DOM“.

Darbas su onDestroy Hook

Kaip priešingybė antMount kabliukas, vadina Sveltė onDestroy kabliukas, kai ruošiamasi pašalinti komponentą iš DOM. OnDestroy kabliukas yra naudingas norint išvalyti visus išteklius ar įvykių klausytojus, kuriuos nustatėte per komponento gyvavimo ciklą.

Šis kabliukas panašus į React ComponentWillUnmount gyvavimo ciklo metodas ir jo naudojimoEfektas kabliukas su valymo funkcija.

Štai pavyzdys, kaip naudoti onDestroy kabliuką:

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

Šis kodas paleidžia laikmatį, kuris kas sekundę įrašo tekstą „intervalas“ į jūsų naršyklės konsolę. Jis naudoja onDestroy kabliuką, kad išvalytų intervalą, kai komponentas palieka DOM. Tai neleidžia toliau veikti intervalui, kai komponentas nebereikalingas.

Darbas su „prieš naujinimą“ ir „afterUpdate“ kabliukais

The prieš atnaujinimą ir po atnaujinimo kabliukai yra gyvavimo ciklo funkcijos, veikiančios prieš ir po DOM atnaujinimo. Šie kabliukai yra naudingi atliekant veiksmus, pagrįstus būsenos pokyčiais, pvz., atnaujinant vartotojo sąsają arba suaktyvinant šalutinį poveikį.

Kabliukas beforeUpdate veikia prieš atnaujinant DOM ir bet kada pasikeitus komponento būsenai. Jis panašus į getSnapshotBeforeUpdate React klasės komponentuose. Lyginant naują programos būseną su senąja, dažniausiai naudojate kabliuką beforeUpdate.

Toliau pateikiamas pavyzdinis, kaip naudoti „forwardUpdate“ kabliuką:

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

Pakeiskite kodą savo Testas komponentas su aukščiau esančiu kodo bloku. Šis kodas naudoja kabliuką beforeUpdate, kad užregistruotų reikšmę skaičiuoti būsena prieš DOM atnaujinimus. Kiekvieną kartą spustelėjus mygtuką, paleidžiama didinimo funkcija ir padidina skaičiavimo būsenos reikšmę 1. Dėl to paleidžiama funkcija beforeUpdate ir registruojama skaičiavimo būsenos reikšmė.

AfterUpdate kabliukas veikia po DOM atnaujinimų. Paprastai jis naudojamas paleisti kodą, kuris turi įvykti po DOM atnaujinimų. Šis kabliukas yra panašus į ComponentDidUpdate Reakcijoje. Kabliukas afterUpdate veikia kaip beforeUpdate kabliukas.

Pavyzdžiui:

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

Aukščiau pateiktas kodo blokas yra panašus į ankstesnį, tačiau šis naudoja afterUpdate kabliuką, kad užregistruotų skaičiavimo būsenos reikšmę. Tai reiškia, kad po DOM atnaujinimų jis užregistruos skaičiavimo būseną.

Kurkite patikimas programas naudodami „Svelte“ gyvavimo ciklo kabliukus

„Svelte“ gyvavimo ciklo kabliukai yra pagrindiniai įrankiai, naudojami kuriant dinamiškas ir reaguojančias programas. Gyvenimo ciklo kabliukų supratimas yra vertinga „Svelte“ programavimo dalis. Naudodami šiuos kabliukus galite valdyti komponentų inicijavimą, atnaujinimą ir naikinimą bei tvarkyti jų būsenos pokyčius.