خطافات دورة الحياة Svelte: ما هي وكيف تعمل؟

الماخذ الرئيسية

• تسمح لك خطافات دورة حياة Svelte بالتحكم في المراحل المختلفة لدورة حياة المكون، مثل التهيئة والتحديث والتدمير.
• خطافات دورة الحياة الأربعة الرئيسية في Svelte هي onMount، وonDestroy، و beforeUpdate، و afterUpdate.
• من خلال استخدام خطافات دورة الحياة هذه، يمكنك تنفيذ إجراءات مثل جلب البيانات، وإعداد مستمعي الأحداث، وتنظيف الموارد، وتحديث واجهة المستخدم بناءً على تغييرات الحالة.

Svelte هو إطار عمل JavaScript حديث يتيح لك إنشاء تطبيقات ويب فعالة. إحدى ميزات Svelte المهمة هي خطافات دورة الحياة التي توفر لك التحكم في المراحل المختلفة لدورة حياة المكون.

ما هي خطافات دورة الحياة؟

خطافات دورة الحياة هي طرق يتم تشغيلها عند نقاط محددة في دورة حياة المكون. فهي تسمح لك بتنفيذ إجراءات معينة في هذه النقاط، مثل تهيئة المكون أو الاستجابة للتغييرات أو تنظيف الموارد.

تحتوي الأطر المختلفة على خطافات مختلفة لدورة الحياة، ولكنها تشترك جميعها في بعض الميزات المشتركة. تقدم Svelte أربعة خطافات رئيسية لدورة الحياة: onMount, onDestroy, قبل التحديث، و بعد التحديث.

إعداد مشروع Svelte

لفهم كيفية استخدام خطافات دورة حياة Svelte، ابدأ بإنشاء مشروع Svelte. يمكنك القيام بذلك بطرق مختلفة، مثل مثل استخدام Vite (أداة إنشاء الواجهة الأمامية) أو رقم. Degit هي أداة سطر أوامر لتنزيل مستودعات git واستنساخها دون تنزيل سجل git بالكامل.

باستخدام فيت

لإنشاء مشروع 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 الخطاف هو خطاف حيوي لدورة الحياة في Svelte. يستدعي Svelte خطاف onMount عندما يتم عرض المكون لأول مرة وإدراجه في DOM. إنه مشابه ل componDidMount طريقة دورة الحياة في مكونات فئة React أو useEffectربط في المكونات الوظيفية للرد مع مصفوفة تبعية فارغة.

ستستخدم بشكل أساسي خطاف 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>

في الخاص بك svelte-app المشروع، إنشاء 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

على عكس ما onMount هوك، Svelte يدعو 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. وهذا يمنع الفاصل الزمني من الاستمرار في التشغيل عندما لم تعد هناك حاجة للمكون.

العمل مع الخطافات beforeUpdate وafterUpdate

ال قبل التحديث و بعد التحديث الخطافات هي وظائف دورة الحياة التي يتم تشغيلها قبل وبعد خضوع DOM للتحديث. تعتبر هذه الخطافات مفيدة لتنفيذ الإجراءات بناءً على تغييرات الحالة، مثل تحديث واجهة المستخدم أو إحداث تأثيرات جانبية.

يتم تشغيل الخطاف beforeUpdate قبل تحديثات DOM وفي أي وقت تتغير فيه حالة المكون. انه ايضا مشابه الحصول علىSnapshotBeforeUpdate في مكونات فئة رد الفعل. أنت تستخدم بشكل أساسي رابط beforeUpdate عند مقارنة الحالة الجديدة للتطبيق بحالته القديمة.

فيما يلي مثال لكيفية استخدام الرابط beforeUpdate:

<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. هذا الخطاف مشابه ل componDidUpdate في رد الفعل. يعمل الرابط 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 لتسجيل قيمة حالة العد بدلاً من ذلك. هذا يعني أنه سيتم تسجيل حالة العد بعد تحديثات DOM.

أنشئ تطبيقات قوية باستخدام خطافات دورة حياة Svelte

تعتبر خطافات دورة الحياة في Svelte أدوات أساسية تستخدم لإنشاء تطبيقات ديناميكية وسريعة الاستجابة. يعد فهم خطافات دورة الحياة جزءًا مهمًا من برمجة Svelte. باستخدام هذه الخطافات، يمكنك التحكم في تهيئة مكوناتك وتحديثها وتدميرها، والتعامل مع تغييرات حالتها.