💢 آموزش Lifecycle Hooks در Livewire

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

✨ بررسی Lifecycle Hooks

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

🔖 انواع Lifecycle Hooks

در Livewire، Lifecycle Hooks به چند دسته تقسیم می‌شوند:

1. Mounting:
- mount()
- boot()
- booted()

2. Updating:
- updating($name, $value)
- updated($name, $value)

3. Rendering:
- render()

4. Destroyed:
- destroy()

📌 مثال:

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

قدم 1: ایجاد کامپوننت Livewire

ابتدا یک کامپوننت Livewire با نام Counter ایجاد می‌کنیم:

php artisan make:livewire Counter

قدم 2: تعریف کامپوننت با استفاده از Lifecycle Hooks

در فایل Counter.php، متغیرها و Lifecycle Hooks مورد نیاز را تعریف می‌کنیم:

use Livewire\Component;

class Counter extends Component
{
    public $count = 0;

    public function mount()
    {
        // این متد در زمان ایجاد کامپوننت فراخوانی می‌شود
        $this->count = 10; // مقدار اولیه شمارنده را تنظیم می‌کنیم
    }

    public function updating($name, $value)
    {
        // این متد قبل از به‌روزرسانی هر ویژگی کامپوننت فراخوانی می‌شود
        \Log::info("Updating $name to $value");
    }

    public function updated($name, $value)
    {
        // این متد بعد از به‌روزرسانی هر ویژگی کامپوننت فراخوانی می‌شود
        \Log::info("Updated $name to $value");
    }

    public function increment()
    {
        $this->count++;
    }

    public function render()
    {
        // این متد در هر بار رندر شدن کامپوننت فراخوانی می‌شود
        return view('livewire.counter');
    }
}

قدم 3: ایجاد ویو برای کامپوننت
در فایل counter.blade.php، ساختار HTML مورد نیاز را تعریف می‌کنیم:

<div>
    <h1>Count: {{ $count }}</h1>
    <button wire:click="increment">Increment</button>
</div>

📌 توضیحات
- mount():
در زمان ایجاد کامپوننت فراخوانی می‌شود و برای تنظیم مقادیر اولیه مناسب است.

- updating($name, $value):
قبل از به‌روزرسانی هر ویژگی فراخوانی می‌شود و می‌توان از آن برای لاگ کردن یا اعتبارسنجی استفاده کرد.

- updated($name, $value):
بعد از به‌روزرسانی هر ویژگی فراخوانی می‌شود و می‌توان از آن برای انجام عملیات بعد از به‌روزرسانی استفاده کرد

- render():

در هر بار رندر شدن کامپوننت فراخوانی می‌شود

🔖 #Laravel, #PHP, #لاراول

👤 Maryam

💎 Channel: @DevelopixLaravel