قلاب های چرخه حیات Svelte: آنها چیست و چگونه کار می کنند؟

نحوه اجرای کد در نقاط مختلف چرخه عمر اجزای خود را کشف کنید.

نکات کلیدی

• قلاب‌های چرخه حیات Svelte به شما این امکان را می‌دهند که مراحل مختلف چرخه حیات یک جزء مانند مقداردهی اولیه، به‌روزرسانی و تخریب را کنترل کنید.
• چهار قلاب اصلی چرخه حیات در Svelte عبارتند از: onMount، onDestroy، beforeUpdate و afterUpdate.
• با استفاده از این قلاب‌های چرخه حیات، می‌توانید اقداماتی مانند واکشی داده‌ها، راه‌اندازی شنونده‌های رویداد، پاک‌سازی منابع و به‌روزرسانی رابط کاربری بر اساس تغییرات حالت انجام دهید.

Svelte یک چارچوب جاوا اسکریپت مدرن است که به شما امکان می دهد برنامه های کاربردی وب کارآمد بسازید. یکی از ویژگی های مهم Svelte قلاب های چرخه عمر آن است که کنترل مراحل مختلف چرخه عمر یک قطعه را در اختیار شما قرار می دهد.

قلاب چرخه حیات چیست؟

قلاب‌های چرخه حیات روش‌هایی هستند که در نقاط خاصی از چرخه عمر یک قطعه فعال می‌شوند. آنها به شما اجازه می دهند تا اقدامات خاصی را در این نقاط انجام دهید، مانند مقداردهی اولیه جزء، پاسخ به تغییرات، یا پاکسازی منابع.

فریم‌ورک‌های مختلف دارای قلاب‌های چرخه حیات متفاوتی هستند، اما همه آنها ویژگی‌های مشترکی دارند. Svelte چهار قلاب اصلی چرخه حیات را ارائه می دهد: onMount، onDestroy، beforeUpdate و afterUpdate.

راه اندازی یک پروژه Svelte

برای درک اینکه چگونه می توانید از قلاب های چرخه حیات Svelte استفاده کنید، با ایجاد یک پروژه Svelte شروع کنید. شما می توانید این کار را به روش های مختلفی انجام دهید، مانند استفاده از Vite (ابزار ساخت جلویی) یا degit. 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 یک قلاب حیاتی چرخه حیات در Svelte است. Svelte زمانی که کامپوننتی برای اولین بار رندر شده و در DOM قرار می گیرد، قلاب onMount را فراخوانی می کند. این شبیه به متد چرخه حیات 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 component</p>
</div>

در پروژه svelte-app خود، یک فایل src/Test.svelte ایجاد کنید و کد بالا را به آن اضافه کنید. این کد قلاب onMount را از Svelte وارد می کند و آن را برای اجرای یک تابع ساده که متن را روی کنسول ثبت می کند فراخوانی می کند. برای آزمایش قلاب onMount، جزء Test را در فایل 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 زمانی که می خواهد یک جزء را از DOM حذف کند، قلاب onDestroy را فراخوانی می کند. قلاب onDestroy برای تمیز کردن هر منبع یا شنونده رویدادی که در طول چرخه عمر کامپوننت تنظیم کرده اید مفید است.

این قلاب شبیه به روش چرخه حیات React’s componentWillUnmount و قلاب useEffect آن با عملکرد پاکسازی است.

در اینجا مثالی از نحوه استفاده از قلاب onDestroy آورده شده است:

<script>
import { onDestroy } from "svelte";
let intervalId;

intervalId = setInterval(() => {
  console.log("interval");
}, 1000);

onDestroy(() => {
  clearInterval(intervalId);
});
</script>

این کد یک تایمر را شروع می کند که متن “فاصله” را در هر ثانیه در کنسول مرورگر شما ثبت می کند. از قلاب onDestroy برای پاک کردن فاصله زمانی که مؤلفه از DOM خارج می شود استفاده می کند. این کار مانع از ادامه کار بازه زمانی می شود که دیگر به کامپوننت نیازی نباشد.

کار با قلاب های beforeUpdate و afterUpdate

قلاب های BeforeUpdate و AfterUpdate توابع چرخه حیات هستند که قبل و بعد از به روز رسانی DOM اجرا می شوند. این قلاب‌ها برای انجام اقدامات مبتنی بر تغییرات حالت، مانند به‌روزرسانی رابط کاربری یا ایجاد عوارض جانبی مفید هستند.

قلاب BeforeUpdate قبل از به‌روزرسانی DOM و هر زمان که وضعیت مؤلفه تغییر کند اجرا می‌شود. شبیه getSnapshotBeforeUpdate در کامپوننت های کلاس React است. هنگام مقایسه وضعیت جدید برنامه با وضعیت قدیمی آن، عمدتاً از هوک BeforeUpdate استفاده می کنید.

در زیر مثالی از نحوه استفاده از hook beforeUpdate آورده شده است:

<script>
import { beforeUpdate } from "svelte";

let count = 0;

beforeUpdate(() => {
  console.log("Count before update:", count);
});

function increment() {
  count += 1;
}
</script>

<button on:click={increment}>Count: {count}</button>

کد موجود در مؤلفه تست خود را با بلوک کد بالا جایگزین کنید. این کد از hook BeforeUpdate برای ثبت مقدار وضعیت شمارش قبل از به‌روزرسانی DOM استفاده می‌کند. هر بار که روی دکمه کلیک می‌کنید، تابع افزایش اجرا می‌شود و مقدار حالت شمارش را 1 افزایش می‌دهد. این باعث می‌شود که تابع beforeUpdate اجرا شود و مقدار حالت شمارش را ثبت کند.

قلاب afterUpdate پس از به روز رسانی DOM اجرا می شود. معمولاً برای اجرای کدهایی که باید پس از به روز رسانی DOM اتفاق بیفتد استفاده می شود. این قلاب شبیه به componentDidUpdate در React است. قلاب afterUpdate مانند hook beforeUpdate عمل می کند.

مثلا:

<script>
import { afterUpdate } from "svelte";

let count = 0;

afterUpdate(() => {
  console.log("Count after update:", count);
});

function increment() {
  count += 1;
}
</script>

<button on:click={increment}>Count: {count}</button>

بلوک کد بالا مشابه بلوک قبلی است، اما این بلوک از hook afterUpdate برای ثبت مقدار حالت شمارش استفاده می کند. این بدان معناست که پس از به‌روزرسانی‌های DOM، وضعیت شمارش را ثبت می‌کند.

با استفاده از قلاب های چرخه زندگی Svelte، برنامه های قوی بسازید

قلاب‌های چرخه حیات در Svelte ابزارهای ضروری هستند که برای ایجاد برنامه‌های کاربردی پویا و پاسخگو استفاده می‌شوند. درک قلاب های چرخه حیات بخش ارزشمندی از برنامه نویسی Svelte است. با استفاده از این هوک ها می توانید مقدار دهی اولیه، به روز رسانی و نابودی اجزای خود را کنترل کنید و تغییرات حالت آنها را مدیریت کنید.

منبع مقاله