Ανακαλύψτε πώς να εκτελείτε κώδικα σε διάφορα σημεία του κύκλου ζωής των στοιχείων σας.

Βασικά Takeaways

  • Τα άγκιστρα κύκλου ζωής της Svelte σάς επιτρέπουν να ελέγχετε τα διάφορα στάδια του κύκλου ζωής ενός στοιχείου, όπως η προετοιμασία, η ενημέρωση και η καταστροφή.
  • Τα τέσσερα κύρια άγκιστρα κύκλου ζωής στο Svelte είναι τα onMount, onDestroy, beforeUpdate και afterUpdate.
  • Χρησιμοποιώντας αυτά τα άγκιστρα κύκλου ζωής, μπορείτε να εκτελέσετε ενέργειες όπως η ανάκτηση δεδομένων, η ρύθμιση προγραμμάτων ακρόασης συμβάντων, ο καθαρισμός πόρων και η ενημέρωση της διεπαφής χρήστη με βάση τις αλλαγές κατάστασης.

Το Svelte είναι ένα σύγχρονο πλαίσιο JavaScript που σας επιτρέπει να δημιουργείτε αποτελεσματικές εφαρμογές Ιστού. Ένα από τα κρίσιμα χαρακτηριστικά του Svelte είναι τα άγκιστρα του κύκλου ζωής του που σας παρέχουν έλεγχο στα διάφορα στάδια του κύκλου ζωής ενός εξαρτήματος.

Τι είναι τα άγκιστρα κύκλου ζωής;

Τα άγκιστρα κύκλου ζωής είναι μέθοδοι που ενεργοποιούνται σε συγκεκριμένα σημεία του κύκλου ζωής ενός εξαρτήματος. Σας επιτρέπουν να εκτελείτε συγκεκριμένες ενέργειες σε αυτά τα σημεία, όπως η προετοιμασία του στοιχείου, η απόκριση σε αλλαγές ή η εκκαθάριση πόρων.

instagram viewer

Διαφορετικά πλαίσια έχουν διαφορετικά άγκιστρα κύκλου ζωής, αλλά όλα μοιράζονται ορισμένα κοινά χαρακτηριστικά. Η Svelte προσφέρει τέσσερα κύρια άγκιστρα κύκλου ζωής: onMount, onDestroy, πριν από την Ενημέρωση, και μετά την ενημέρωση.

Ρύθμιση ενός Svelte Project

Για να κατανοήσετε πώς μπορείτε να χρησιμοποιήσετε τα άγκιστρα κύκλου ζωής της Svelte, ξεκινήστε δημιουργώντας ένα έργο Svelte. Μπορείτε να το κάνετε αυτό με διάφορους τρόπους, όπως όπως χρησιμοποιώντας το Vite (ένα εργαλείο δημιουργίας front-end) ή ψηφίο. Το Degit είναι ένα εργαλείο γραμμής εντολών για λήψη και κλωνοποίηση αποθετηρίων git χωρίς λήψη ολόκληρου του ιστορικού git.

Χρήση Vite

Για να δημιουργήσετε ένα έργο Svelte χρησιμοποιώντας το Vite, εκτελέστε την ακόλουθη εντολή στο τερματικό σας:

npm init vite

Μόλις εκτελέσετε την εντολή, θα απαντήσετε σε ορισμένες προτροπές για να δώσετε το όνομα του έργου σας, το πλαίσιο που θέλετε να χρησιμοποιήσετε και τη συγκεκριμένη παραλλαγή αυτού του πλαισίου.

Τώρα, μεταβείτε στον κατάλογο του έργου και εγκαταστήστε τις απαραίτητες εξαρτήσεις.

Εκτελέστε τις ακόλουθες εντολές για να το κάνετε αυτό:

cd svelte-app
npm install

Χρήση ψηφίων

Για να ρυθμίσετε το έργο Svelte χρησιμοποιώντας degit, εκτελέστε αυτήν την εντολή στο τερματικό σας:

npx degit sveltejs/template svelte-app

Στη συνέχεια, μεταβείτε στον κατάλογο του έργου και εγκαταστήστε τις απαραίτητες εξαρτήσεις:

cd svelte-app
npm install

Εργασία με το onMount Hook

ο onMount Το hook είναι ένα ζωτικό άγκιστρο κύκλου ζωής στο Svelte. Το Svelte καλεί το άγκιστρο onMount όταν ένα στοιχείο αποδίδεται για πρώτη φορά και εισάγεται στο DOM. Είναι παρόμοιο με το componentDidMount μέθοδος κύκλου ζωής σε στοιχεία κλάσης React ή το useEffectγάντζο στα λειτουργικά στοιχεία React με έναν κενό πίνακα εξάρτησης.

Θα χρησιμοποιήσετε κυρίως το άγκιστρο onMount για να εκτελέσετε εργασίες προετοιμασίας, όπως π.χ ανάκτηση δεδομένων από ένα API ή να ρυθμίσετε ακροατές συμβάντων. Το άγκιστρο onMount είναι μια συνάρτηση που παίρνει ένα μόνο όρισμα. Αυτό το όρισμα είναι η συνάρτηση που θα καλέσει η εφαρμογή όταν αποδίδει για πρώτη φορά το στοιχείο.

Ακολουθεί ένα παράδειγμα για το πώς μπορείτε να χρησιμοποιήσετε το άγκιστρο onMount:

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

Στο δικό σου σβέλτη εφαρμογή έργο, δημιουργία α src/Test.svelte αρχείο και προσθέστε τον παραπάνω κώδικα σε αυτό. Αυτός ο κώδικας εισάγει το άγκιστρο onMount από το Svelte και το καλεί για να εκτελέσει μια απλή συνάρτηση που καταγράφει κείμενο στην κονσόλα. Για να δοκιμάσετε το άγκιστρο onMount, αποδώστε το Δοκιμή συστατικό στο δικό σας src/App.svelte αρχείο:

Για παράδειγμα:

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

Στη συνέχεια, εκτελέστε την εφαρμογή:

npm run dev

Η εκτέλεση αυτής της εντολής θα σας δώσει μια τοπική διεύθυνση URL όπως http://localhost: 8080. Επισκεφτείτε τον σύνδεσμο σε ένα πρόγραμμα περιήγησης ιστού για να δείτε την αίτησή σας. Η εφαρμογή θα καταγράψει το κείμενο "Το στοιχείο προστέθηκε στο DOM" στην κονσόλα του προγράμματος περιήγησής σας.

Εργασία με το onDestroy Hook

Ως το αντίθετο του onMount αγκίστρι, καλεί ο Σβελτέ το onDestroy αγκιστρώστε όταν πρόκειται να αφαιρέσετε ένα στοιχείο από το DOM. Το άγκιστρο onDestroy είναι χρήσιμο για τον καθαρισμό τυχόν πόρων ή ακρόασης συμβάντων που έχετε ρυθμίσει κατά τη διάρκεια του κύκλου ζωής του στοιχείου.

Αυτό το άγκιστρο είναι παρόμοιο με αυτό του React componentWillUnmount μέθοδος κύκλου ζωής και της useEffect γάντζο με λειτουργία καθαρισμού.

Ακολουθεί ένα παράδειγμα για το πώς να χρησιμοποιήσετε το άγκιστρο onDestroy:

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

Αυτός ο κωδικός ξεκινά ένα χρονόμετρο που καταγράφει το κείμενο "διάστημα" στην κονσόλα του προγράμματος περιήγησής σας κάθε δευτερόλεπτο. Χρησιμοποιεί το άγκιστρο onDestroy για να καθαρίσει το διάστημα όταν το στοιχείο φεύγει από το DOM. Αυτό αποτρέπει τη συνέχιση της λειτουργίας του διαστήματος όταν το στοιχείο δεν χρειάζεται πλέον.

Εργασία με τα Hooks πριν και μετά την ενημέρωση

ο πριν από την Ενημέρωση και μετά την ενημέρωση Τα hook είναι συναρτήσεις κύκλου ζωής που εκτελούνται πριν και μετά την ενημέρωση του DOM. Αυτά τα άγκιστρα είναι χρήσιμα για την εκτέλεση ενεργειών που βασίζονται σε αλλαγές κατάστασης, όπως η ενημέρωση της διεπαφής χρήστη ή η ενεργοποίηση παρενεργειών.

Το άγκιστρο beforeUpdate εκτελείται πριν από τις ενημερώσεις DOM και οποιαδήποτε στιγμή αλλάξει η κατάσταση του στοιχείου. Είναι παρόμοιο με getSnapshotBeforeUpdate σε στοιχεία κλάσης React. Χρησιμοποιείτε κυρίως το hook πριν από την ενημέρωση όταν συγκρίνετε τη νέα κατάσταση της εφαρμογής με την παλιά της κατάσταση.

Ακολουθεί ένα παράδειγμα του τρόπου χρήσης του γάντζου πριν από την ενημέρωση:

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

Αντικαταστήστε τον κωδικό στο δικό σας Δοκιμή στοιχείο με το μπλοκ κώδικα παραπάνω. Αυτός ο κώδικας χρησιμοποιεί το άγκιστρο beforeUpdate για να καταγράψει την τιμή του μετρώ κατάσταση πριν από τις ενημερώσεις DOM. Κάθε φορά που κάνετε κλικ στο κουμπί, εκτελείται η συνάρτηση αύξησης και αυξάνει την τιμή της κατάστασης μέτρησης κατά 1. Αυτό προκαλεί την εκτέλεση της συνάρτησης beforeUpdate και την καταγραφή της τιμής της κατάστασης μέτρησης.

Το άγκιστρο afterUpdate εκτελείται μετά τις ενημερώσεις DOM. Γενικά χρησιμοποιείται για την εκτέλεση κώδικα που πρέπει να συμβεί μετά τις ενημερώσεις DOM. Αυτό το άγκιστρο είναι παρόμοιο με componentDidUpdate στο React. Το άγκιστρο afterUpdate λειτουργεί όπως το hook πριν από την ενημέρωση.

Για παράδειγμα:

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

Το μπλοκ κώδικα παραπάνω είναι παρόμοιο με το προηγούμενο, αλλά αυτό χρησιμοποιεί το άγκιστρο afterUpdate για να καταγράψει την τιμή της κατάστασης μέτρησης. Αυτό σημαίνει ότι θα καταγράψει την κατάσταση μέτρησης μετά τις ενημερώσεις DOM.

Δημιουργήστε ισχυρές εφαρμογές χρησιμοποιώντας τα άγκιστρα κύκλου ζωής της Svelte

Τα άγκιστρα κύκλου ζωής στο Svelte είναι απαραίτητα εργαλεία που χρησιμοποιούνται για τη δημιουργία δυναμικών και ανταποκρινόμενων εφαρμογών. Η κατανόηση των γάντζων κύκλου ζωής είναι πολύτιμο μέρος του προγραμματισμού Svelte. Χρησιμοποιώντας αυτά τα άγκιστρα, μπορείτε να ελέγξετε την προετοιμασία, την ενημέρωση και την καταστροφή των στοιχείων σας και να χειριστείτε τις αλλαγές κατάστασής τους.