ווי מחזור החיים של Svelte: מה הם ואיך הם עובדים?

טייק אווי מפתח

• ווי מחזור החיים של Svelte מאפשרים לך לשלוט בשלבים השונים של מחזור החיים של רכיב, כגון אתחול, עדכון והרס.
• ארבעת הווים העיקריים של מחזור החיים ב-Svelte הם onMount, onDestroy, beforeUpdate ואחרי עדכון.
• על ידי שימוש ב-hooks מחזור חיים אלה, אתה יכול לבצע פעולות כמו שליפת נתונים, הגדרת מאזינים לאירועים, ניקוי משאבים ועדכון ממשק המשתמש בהתבסס על שינויי מצב.

Svelte היא מסגרת JavaScript מודרנית המאפשרת לך לבנות יישומי אינטרנט יעילים. אחד המאפיינים הקריטיים של Svelte הוא ווי מחזור החיים שלו המספקים לך שליטה על השלבים השונים של מחזור החיים של רכיב.

מה הם ווי מחזור חיים?

ווי מחזור חיים הם שיטות המופעלות בנקודות ספציפיות במחזור החיים של רכיב. הם מאפשרים לך לבצע פעולות מסוימות בנקודות אלה, כגון אתחול הרכיב, תגובה לשינויים או ניקוי משאבים.

למסגרות שונות יש ווים שונים של מחזור חיים, אבל לכולן יש כמה תכונות משותפות. Svelte מציעה ארבעה ווי מחזור חיים עיקריים: onMount, על להשמיד, לפני עדכון, ו לאחר עדכון.

הקמת פרויקט Svelte

כדי להבין כיצד אתה יכול להשתמש בווי מחזור החיים של Svelte, התחל ביצירת פרויקט Svelte. אתה יכול לעשות זאת בדרכים שונות, כגון

כמו שימוש ב-Vite (כלי בנייה קדמי) או יוםיט. Degit הוא כלי שורת פקודה להורדה ושיבוט של מאגרי git מבלי להוריד את כל היסטוריית ה-git.

שימוש ב-Vite

כדי ליצור פרויקט Svelte באמצעות Vite, הפעל את הפקודה הבאה בטרמינל שלך:

npm init vite

לאחר שתפעיל את הפקודה, תענה על כמה בקשות לספק את שם הפרויקט שלך, המסגרת שבה אתה רוצה להשתמש והגרסה הספציפית של אותה מסגרת.

כעת, נווט אל ספריית הפרויקט והתקן את התלות הנדרשת.

הפעל את הפקודות הבאות כדי לעשות זאת:

cd svelte-app
npm install

משתמש ב-dagit

כדי להגדיר את פרויקט Svelte שלך ​​באמצעות degit, הפעל את הפקודה הזו בטרמינל שלך:

npx degit sveltejs/template svelte-app

לאחר מכן, נווט אל ספריית הפרויקט והתקן את התלות הנדרשת:

cd svelte-app
npm install

עבודה עם ה-onMount Hook

ה onMount הוק הוא וו חיוני למחזור החיים בסוולטה. Svelte קורא ל-onMount Hook כאשר רכיב מוצג לראשונה ומוכנס ל-DOM. זה דומה ל componentDidMount שיטת מחזור החיים ברכיבי מחלקה React או ב- useEffectחבר לרכיבים פונקציונליים של React עם מערך תלות ריק.

אתה תשתמש בעיקר ב-onMount Hook כדי לבצע משימות אתחול, כגון שליפת נתונים מ-API או הגדרת מאזינים לאירועים. ה-onMount hook הוא פונקציה שלוקחת ארגומנט בודד. ארגומנט זה הוא הפונקציה שהאפליקציה תקרא כשהיא מעבדת לראשונה את הרכיב.

הנה דוגמה לאופן שבו אתה יכול להשתמש בהוק 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>

אצלך svelte-app פרויקט, ליצור א src/Test.svelte קובץ והוסף אליו את הקוד שלמעלה. קוד זה מייבא את ה-onMount Hook מ-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 הוק, סוולטה מכנה את על להשמיד hook כאשר הוא עומד להסיר רכיב מה-DOM. ה-onDestroy הוק שימושי לניקוי כל משאבים או מאזינים לאירועים שתגדיר במהלך מחזור החיים של הרכיב.

הוו הזה דומה לזה של React componentWillUnmount שיטת מחזור החיים שלה useEffect וו עם פונקציית ניקוי.

הנה דוגמה לשימוש ב-onDestroy hook:

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

קוד זה מתחיל טיימר שמתעד את הטקסט "מרווח" לקונסולת הדפדפן שלך בכל שנייה. הוא משתמש ב-onDestroy hook כדי לנקות את המרווח כאשר הרכיב עוזב את ה-DOM. זה מונע מהאינטרוול להמשיך לפעול כאשר הרכיב אינו נחוץ עוד.

עבודה עם ה- beforeUpdate ואחרי העדכון

ה לפני עדכון ו לאחר עדכון הוקס הם פונקציות של מחזור חיים הפועלות לפני ואחרי שה-DOM עובר עדכון. ווים אלה שימושיים לביצוע פעולות המבוססות על שינויי מצב, כגון עדכון ממשק המשתמש או הפעלת תופעות לוואי.

ה- beforeUpdate hook פועל לפני עדכון ה-DOM ובכל פעם שמצב הרכיב משתנה. זה דומה ל getSnapshotBeforeUpdate ברכיבי כיתה React. אתה משתמש בעיקר ב- beforeUpdate Hook כאשר משווים את המצב החדש של היישום למצב הישן שלו.

להלן דוגמה כיצד להשתמש ב- beforeUpdate 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 hook כדי לרשום את הערך של לספור מצב לפני עדכוני ה-DOM. בכל פעם שאתה לוחץ על הלחצן, פונקציית ההגדלה פועלת ומגדילה את הערך של מצב הספירה ב-1. זה גורם לפונקציה beforeUpdate לפעול ולתיעוד את הערך של מצב הספירה.

ה- afterUpdate רץ לאחר עדכוני ה-DOM. הוא משמש בדרך כלל להפעלת קוד שצריך לקרות לאחר עדכוני ה-DOM. וו זה דומה ל componentDidUpdate ב-React. ה- afterUpdate פועל כמו ה- beforeUpdate.

לדוגמה:

<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 hook כדי לרשום את הערך של מצב הספירה במקום זאת. זה אומר שהוא ירשום את מצב הספירה לאחר עדכוני ה-DOM.

בנה אפליקציות איתנות באמצעות וויסי מחזור החיים של Svelte

ווי מחזור החיים ב-Svelte הם כלים חיוניים המשמשים ליצירת יישומים דינמיים ומגיבים. הבנת הווים של מחזור החיים היא חלק חשוב בתכנות Svelte. באמצעות ווים אלה, אתה יכול לשלוט באתחול, העדכון וההרס של הרכיבים שלך, ולטפל בשינויי המצב שלהם.