Lifecycle Hooks در Livewire 3

Livewire یکی از فریمورک‌های محبوب در اکوسیستم Laravel است که امکان توسعه کامپوننت‌های تعاملی را بدون نیاز به جاوااسکریپت فراهم می‌کند. یکی از مهم‌ترین قابلیت‌های Livewire، Lifecycle Hooks است که به توسعه‌دهندگان اجازه می‌دهد تا در مراحل مختلف چرخه حیات یک کامپوننت مداخله کنند و رفتارهای خاصی را پیاده‌سازی کنند.

در این مقاله، با بررسی دقیق Lifecycle Hooks در Livewire 3، نحوه عملکرد آن‌ها و کاربردهای هر یک را توضیح خواهیم داد.

Lifecycle Hooks

1. mount()

mount() اولین متدی است که هنگام ایجاد یک کامپوننت اجرا می‌شود. این متد معمولاً برای مقداردهی اولیه متغیرهای کامپوننت استفاده می‌شود. همچنین، این متد می‌تواند مقدارهایی را از طریق ورودی دریافت کرده و مقداردهی کند. این متد تنها یک‌بار در طول عمر کامپوننت اجرا می‌شود.

مثال

class Counter extends Component
{
    public $count;

    public function mount($initialCount = 0)
    {
        $this->count = $initialCount;
    }
}

✅ کاربرد: مقداردهی اولیه متغیرها، دریافت اطلاعات از دیتابیس، مقداردهی بر اساس ورودی‌ها، مدیریت تنظیمات اولیه کامپوننت

2. hydrate()

hydrate() هر بار که یک کامپوننت از سرور دریافت می‌شود اجرا می‌شود. این متد بیشتر برای بازیابی داده‌های session، بارگذاری اطلاعات موقتی و بررسی وضعیت متغیرها مفید است.

مثال

public function hydrate()
{
    // Log a message whenever the component is hydrated
    logger('Component has been hydrated!');
}

✅ کاربرد: مقداردهی مجدد داده‌های موقتی، لاگ‌گیری از وضعیت کامپوننت، بررسی صحت داده‌های موجود، بازیابی داده‌های Cache شده

3. boot()

boot() هنگام ایجاد یک نمونه از کامپوننت در سرور اجرا می‌شود اما برخلاف mount()، به داده‌های ورودی کاربر دسترسی ندارد. این متد برای مقداردهی تنظیمات اولیه کامپوننت مناسب است.

مثال

public function boot()
{
    logger('Component has been booted!');
}

✅ کاربرد: مقداردهی اولیه، ثبت لیسنرهای رویدادها، انجام تنظیمات کلی کامپوننت، ارتباط با سرویس‌های خارجی در ابتدای چرخه حیات

4. updating($property, $value)

updating() قبل از تغییر مقدار یک متغیر در کامپوننت اجرا می‌شود. این متد امکان بررسی و جلوگیری از تغییر مقدارهای نامعتبر را فراهم می‌کند.

مثال

public function updating($property, $value)
{
    if ($property === 'count' && $value < 0) {
        throw new \Exception("Count cannot be negative!");
    }
}

✅ کاربرد: جلوگیری از مقدارهای نامعتبر، اعتبارسنجی داده‌ها قبل از تغییر، لاگ‌گیری تغییرات، اعمال محدودیت روی داده‌های ورودی

5. updated($property, $value)

updated() بعد از تغییر مقدار یک متغیر اجرا می‌شود. این متد برای انجام عملیات پس از تغییر مقدار مفید است.

مثال

public function updated($property, $value)
{
    logger("Property {$property} has been updated to: {$value}");
}

✅ کاربرد: به‌روزرسانی داده‌های وابسته، ارسال رویدادها پس از تغییر، بررسی تغییرات نهایی، هماهنگ‌سازی اطلاعات بین بخش‌های مختلف برنامه

6. ()rendering

rendering() قبل از رندر شدن ویو کامپوننت اجرا می‌شود. این متد امکان تغییر داده‌ها قبل از نمایش را فراهم می‌کند.

مثال

public function rendering()
{
    $this->count = max($this->count, 0); // Ensure count is never negative before rendering
}

✅ کاربرد: تغییر داده‌های قابل نمایش قبل از رندر، پاک‌سازی یا تنظیم مقدارهای نهایی، بهینه‌سازی داده‌های ارسال‌شده به ویو

7. ()rendered

rendered() بعد از رندر شدن کامپوننت اجرا می‌شود و معمولاً برای اجرای اسکریپت‌های جاوااسکریپتی پس از نمایش کامپوننت استفاده می‌شود.

مثال

public function rendered()
{
    logger('Component has been rendered!');
}

✅ کاربرد: اجرای کدهای تکمیلی پس از نمایش داده‌ها، تعامل با جاوااسکریپت، ثبت تغییرات پس از رندر، ارسال اطلاعات رندر شده به آنالیتیکس

8. ()dehydrate

dehydrate() قبل از ارسال پاسخ به مرورگر اجرا می‌شود و می‌توان از آن برای حذف داده‌های حساس استفاده کرد.

مثال

public function dehydrate()
{
    logger('Component is being dehydrated...');
}

✅ کاربرد: حذف داده‌های حساس قبل از ارسال به فرانت‌اند، بهینه‌سازی حجم پاسخ‌های سرور، فشرده‌سازی داده‌ها برای ارسال سریع‌تر

جمع‌بندی

Lifecycle Hooks در Livewire 3 به توسعه‌دهندگان این امکان را می‌دهند تا کنترل دقیقی روی رفتار کامپوننت‌های خود داشته باشند. این هوک‌ها در مراحل مختلف چرخه حیات یک کامپوننت اجرا می‌شوند و می‌توانند برای مقداردهی اولیه، اعتبارسنجی داده‌ها، اجرای عملیات پس از تغییر، و مدیریت نمایش داده‌ها مورد استفاده قرار گیرند.

مروری بر Lifecycle Hooks و کاربردهای آن‌ها:

• mount(): مقداردهی اولیه متغیرها، دریافت داده‌ها از ورودی
• hydrate(): بازیابی داده‌های موقتی، ثبت وضعیت کامپوننت
• boot(): تنظیمات اولیه و ثبت لیسنرهای رویدادها
• updating(): اعتبارسنجی داده‌ها قبل از تغییر
• updated(): اجرای عملیات پس از تغییر مقدار
• rendering(): تغییر داده‌ها قبل از نمایش در ویو
• rendered(): اجرای اسکریپت‌های تکمیلی پس از نمایش
• dehydrate(): حذف داده‌های حساس قبل از ارسال به مرورگر

با شناخت و استفاده صحیح از این Lifecycle Hooks، می‌توانید کامپوننت‌های Livewire را بهینه‌تر مدیریت کرده و تجربه‌ای بهتر برای کاربران خود فراهم کنید.