Tutustu koodin suorittamiseen komponenttisi elinkaaren eri vaiheissa.

Avaimet takeawayt

  • Svelten elinkaarikoukkujen avulla voit hallita komponentin elinkaaren eri vaiheita, kuten alustusta, päivitystä ja tuhoamista.
  • Svelten neljä tärkeintä elinkaaren koukkua ovat onMount, onDestroy, beforeUpdate ja afterUpdate.
  • Hyödyntämällä näitä elinkaaren koukkuja voit suorittaa toimintoja, kuten tietojen hakemista, tapahtumaseurainten määrittämistä, resurssien puhdistamista ja käyttöliittymän päivittämistä tilan muutosten perusteella.

Svelte on moderni JavaScript-kehys, jonka avulla voit rakentaa tehokkaita verkkosovelluksia. Yksi Svelten kriittisistä ominaisuuksista on sen elinkaarikoukut, joiden avulla voit hallita komponentin elinkaaren eri vaiheita.

Mitä ovat elinkaarikoukut?

Elinkaarikoukut ovat menetelmiä, jotka laukeavat tietyissä kohdissa komponentin elinkaaren aikana. Niiden avulla voit suorittaa tiettyjä toimintoja näissä kohdissa, kuten alustaa komponentin, vastata muutoksiin tai puhdistaa resursseja.

Eri kehyksillä on erilaiset elinkaaren koukut, mutta niillä kaikilla on joitain yhteisiä piirteitä. Svelte tarjoaa neljä suurta elinkaarikoukkua: onMountissa, onDestroy, ennen päivitystä, ja päivityksen jälkeen.

Svelte-projektin perustaminen

Ymmärtääksesi kuinka voit käyttää Svelten elinkaarikoukkuja, aloita luomalla Svelte-projekti. Voit tehdä tämän monin eri tavoin, esim kuten käyttämällä Viteä (etupään rakennustyökalu) tai degit. Degit on komentorivityökalu git-tietovarastojen lataamiseen ja kloonaamiseen lataamatta koko git-historiaa.

Viten käyttö

Luodaksesi Svelte-projektin Viten avulla, suorita seuraava komento päätteessäsi:

npm init vite

Kun suoritat komennon, vastaat joihinkin kehotteisiin ja annat projektisi nimen, kehyksen, jota haluat käyttää, ja kyseisen kehyksen tietyn muunnelman.

Siirry nyt projektin hakemistoon ja asenna tarvittavat riippuvuudet.

Suorita seuraavat komennot tehdäksesi tämän:

cd svelte-app
npm install

Käyttämällä degit

Asettaaksesi Svelte-projektisi degitin avulla, suorita tämä komento päätteessäsi:

npx degit sveltejs/template svelte-app

Siirry sitten projektin hakemistoon ja asenna tarvittavat riippuvuudet:

cd svelte-app
npm install

Työskentely onMount-koukun kanssa

The onMountissa koukku on elintärkeä Svelten elinkaaren koukku. Svelte kutsuu onMount-koukun, kun komponentti hahmonnetaan ja lisätään DOM: iin. Se on samanlainen kuin komponenttiDidMount elinkaarimenetelmä React-luokan komponenteissa tai useEffectkoukku Reactin toiminnallisiin komponentteihin tyhjällä riippuvuustaulukolla.

Käytät ensisijaisesti onMount-koukkua alustustehtävien suorittamiseen, kuten tietojen hakeminen API: sta tai tapahtumakuuntelijoiden asettaminen. OnMount-koukku on funktio, joka ottaa yhden argumentin. Tämä argumentti on funktio, jota sovellus kutsuu, kun se hahmontaa komponentin ensimmäisen kerran.

Tässä on esimerkki siitä, kuinka voit käyttää onMount-koukkua:

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

Sinun hoikka-sovellus projekti, luo a src/Test.svelte tiedosto ja lisää siihen yllä oleva koodi. Tämä koodi tuo onMount-koukun Sveltestä ja kutsuu sitä suorittamaan yksinkertaisen toiminnon, joka kirjaa tekstiä konsoliin. Testaa onMount-koukku renderöimällä Testata komponenttisi src/App.svelte tiedosto:

Esimerkiksi:

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

Suorita sitten sovellus:

npm run dev

Tämän komennon suorittaminen antaa sinulle paikallisen URL-osoitteen, kuten http://localhost: 8080. Avaa hakemus verkkoselaimessa olevasta linkistä. Sovellus kirjaa selaimesi konsoliin tekstin "Komponentti on lisätty DOM: iin".

Työskentely onDestroy Hookin kanssa

Vastakohtana onMountissa koukku, Svelte kutsuu onDestroy koukku, kun se aikoo poistaa komponentin DOM: sta. OnDestroy-koukku on hyödyllinen kaikkien komponentin elinkaaren aikana määrittämiesi resurssien tai tapahtumakuuntelijoiden puhdistamiseen.

Tämä koukku on samanlainen kuin Reactin koukku ComponentWillUnmount elinkaarimenetelmä ja sen useEffect koukku puhdistustoiminnolla.

Tässä on esimerkki onDestroy-koukun käytöstä:

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

Tämä koodi käynnistää ajastimen, joka kirjaa tekstin "intervalli" selaimesi konsoliin joka sekunti. Se käyttää onDestroy-koukkua tyhjentämään aikavälin, kun komponentti poistuu DOM: sta. Tämä estää intervallin jatkamisen, kun komponenttia ei enää tarvita.

Työskentely beforeUpdate- ja afterUpdate-koukkujen kanssa

The ennen päivitystä ja päivityksen jälkeen koukut ovat elinkaaren toimintoja, jotka suoritetaan ennen ja jälkeen DOM: n päivityksen. Nämä koukut ovat hyödyllisiä tilan muutoksiin perustuvien toimien suorittamiseen, kuten käyttöliittymän päivittämiseen tai sivuvaikutusten laukaisemiseen.

BeforeUpdate-koukku suoritetaan ennen DOM-päivitystä ja aina kun komponentin tila muuttuu. Se on samanlainen kuin getSnapshotBeforeUpdate React-luokan komponenteissa. Käytät pääasiassa beforeUpdate-koukkua, kun vertaat sovelluksen uutta tilaa sen vanhaan tilaan.

Alla on esimerkki beforeUpdate-koukun käytöstä:

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

Vaihda koodi omaan Testata komponentti yllä olevan koodilohkon kanssa. Tämä koodi käyttää beforeUpdate-koukkua arvon kirjaamiseen Kreivi tila ennen DOM-päivityksiä. Joka kerta kun napsautat painiketta, lisäystoiminto suoritetaan ja lisää laskentatilan arvoa yhdellä. Tämä saa beforeUpdate-funktion suorittamaan ja kirjaamaan laskentatilan arvon.

AfterUpdate-koukku toimii DOM-päivitysten jälkeen. Sitä käytetään yleensä suorittamaan koodia, jonka on tapahduttava DOM-päivitysten jälkeen. Tämä koukku on samanlainen kuin componentDidUpdate Reactissa. AfterUpdate-koukku toimii kuten beforeUpdate-koukku.

Esimerkiksi:

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

Yllä oleva koodilohko on samanlainen kuin edellinen, mutta tämä käyttää afterUpdate-koukkua kirjaamaan sen sijaan laskentatilan arvon. Tämä tarkoittaa, että se kirjaa laskentatilan DOM-päivitysten jälkeen.

Rakenna kestäviä sovelluksia Svelten elinkaarikoukkujen avulla

Svelten elinkaarikoukut ovat tärkeitä työkaluja dynaamisten ja reagoivien sovellusten luomiseen. Elinkaarikoukkujen ymmärtäminen on arvokas osa Svelten ohjelmointia. Näiden koukkujen avulla voit hallita komponenttien alustusta, päivitystä ja tuhoamista sekä käsitellä niiden tilan muutoksia.