Свелте куке за животни циклус: шта су и како раде?

Кључне Такеаваис

• Свелтеове куке за животни циклус вам омогућавају да контролишете различите фазе животног циклуса компоненте, као што су иницијализација, ажурирање и уништење.
• Четири главне куке животног циклуса у Свелте-у су онМоунт, онДестрои, бефореУпдате и афтерУпдате.
• Коришћењем ових кукица животног циклуса, можете да обављате радње као што су преузимање података, подешавање слушалаца догађаја, чишћење ресурса и ажурирање корисничког интерфејса на основу промена стања.

Свелте је модеран ЈаваСцрипт оквир који вам омогућава да правите ефикасне веб апликације. Једна од критичних карактеристика Свелте-а су његове куке за животни циклус које вам пружају контролу над различитим фазама животног циклуса компоненте.

Шта су куке за животни циклус?

Закачице животног циклуса су методе које се покрећу у одређеним тачкама животног циклуса компоненте. Они вам омогућавају да извршите одређене радње у овим тачкама, као што је иницијализација компоненте, реаговање на промене или чишћење ресурса.

Различити оквири имају различите куке животног циклуса, али сви деле неке заједничке карактеристике. Свелте нуди четири главне куке животног циклуса: онМоунт, онДестрои, бефореУпдате, и афтерУпдате.

Постављање Свелте пројекта

Да бисте разумели како можете да користите Свелтеове куке за животни циклус, почните креирањем Свелте пројекта. То можете учинити на различите начине, нпр као коришћење Вите-а (алат за прављење фронт-енд-а) или дегит. Дегит је алатка командне линије за преузимање и клонирање гит спремишта без преузимања целе гит историје.

Коришћење Вите-а

Да бисте креирали Свелте пројекат користећи Вите, покрените следећу команду у свом терминалу:

npm init vite

Када покренете команду, одговорићете на нека упутства да наведете име свог пројекта, оквир који желите да користите и конкретну варијанту тог оквира.

Сада идите до директоријума пројекта и инсталирајте потребне зависности.

Покрените следеће команде да бисте то урадили:

cd svelte-app
npm install

Коришћење дегит

Да бисте подесили свој Свелте пројекат користећи дегит, покрените ову команду у свом терминалу:

npx degit sveltejs/template svelte-app

Затим идите до директоријума пројекта и инсталирајте потребне зависности:

cd svelte-app
npm install

Рад са онМоунт Хоок-ом

Тхе онМоунт кука је витална кука животног циклуса у Свелтеу. Свелте позива онМоунт куку када је компонента први пут приказана и уметнута у ДОМ. Слично је са цомпонентДидМоунт метод животног циклуса у компонентама класе Реацт или усеЕффецткука у функционалним компонентама Реацт-а са празним низом зависности.

Пре свега ћете користити онМоунт куку за обављање задатака иницијализације, као што је преузимање података из АПИ-ја или постављање слушалаца догађаја. ОнМоунт кука је функција која узима један аргумент. Овај аргумент је функција коју ће апликација позвати када први пут прикаже компоненту.

Ево примера како можете да користите онМоунт куку:

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

У вашем свелте-апп пројекат, креирајте а срц/Тест.свелте датотеку и додајте јој горњи код. Овај код увози онМоунт куку из Свелте-а и позива је да покрене једноставну функцију која евидентира текст на конзоли. Да бисте тестирали онМоунт куку, рендерујте Тест компонента у вашем срц/Апп.свелте фајл:

На пример:

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

Затим покрените апликацију:

npm run dev

Покретањем ове команде добићете локални УРЛ као што је http://localhost: 8080. Посетите везу у веб прегледачу да видите своју апликацију. Апликација ће забележити текст „Компонента је додата у ДОМ“ у конзоли вашег претраживача.

Рад са онДестрои куком

Као супротност од онМоунт кука, Свелте зове онДестрои закачите када се спрема да уклони компоненту из ДОМ-а. ОнДестрои кука је корисна за чишћење свих ресурса или слушалаца догађаја које сте поставили током животног циклуса компоненте.

Ова кука је слична Реацт-овој цомпонентВиллУнмоунт метода животног циклуса и њен усеЕффецт кука са функцијом чишћења.

Ево примера како да користите онДестрои куку:

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

Овај код покреће тајмер који сваке секунде бележи текстуални „интервал“ на конзоли вашег претраживача. Користи онДестрои куку за брисање интервала када компонента напусти ДОМ. Ово спречава да интервал настави да ради када компонента више није потребна.

Рад са преУпдате и афтерУпдате кукицама

Тхе бефореУпдате и афтерУпдате закачице су функције животног циклуса које се покрећу пре и после ажурирања ДОМ-а. Ове куке су корисне за извођење радњи заснованих на променама стања, као што је ажурирање корисничког интерфејса или покретање нежељених ефеката.

Закачица бефореУпдате се покреће пре него што се ДОМ ажурира и сваки пут када се промени стање компоненте. Слично је са гетСнапсхотБефореУпдате у компонентама класе Реацт. Углавном користите закачицу бефореУпдате када упоређујете ново стање апликације са старим стањем.

Испод је пример како да користите закачицу бефореУпдате:

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

Замените код у свом Тест компонента са блоком кода изнад. Овај код користи закачицу бефореУпдате за евидентирање вредности цоунт стање пре ажурирања ДОМ-а. Сваки пут када кликнете на дугме, покреће се функција инкремента и повећава вредност стања бројања за 1. Ово узрокује покретање функције бефореУпдате и евидентирање вредности стања бројања.

Хоок афтерУпдате се покреће након ажурирања ДОМ-а. Обично се користи за покретање кода који треба да се деси након ажурирања ДОМ-а. Ова кука је слична цомпонентДидУпдате у Реацт-у. Закачива афтерУпдате ради као закачица бефореУпдате.

На пример:

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

Блок кода изнад је сличан претходном, али овај користи закачицу афтерУпдате за евидентирање вредности стања бројања уместо тога. То значи да ће евидентирати стање бројања након ажурирања ДОМ-а.

Направите робусне апликације користећи Свелтеове куке за животни циклус

Прикључци животног циклуса у Свелте-у су суштински алати који се користе за креирање динамичких и брзих апликација. Разумевање кукица животног циклуса је вредан део Свелте програмирања. Користећи ове куке, можете контролисати иницијализацију, ажурирање и уништавање ваших компоненти и управљати променама њиховог стања.