Lifecycle Hook เบื้องต้น

Livewire มี Lifecycle Hook ซึ่งเป็นฟังก์ชันพิเศษที่ช่วยให้คุณสามารถเรียกใช้โค้ดในช่วงเวลาต่าง ๆ ของการทำงานใน Component เช่น เมื่อติดตั้ง Component เรียบร้อยแล้ว (mounted) หรือเมื่อค่าใน Component มีการเปลี่ยนแปลง (updated) Lifecycle Hook จึงมีประโยชน์ในการควบคุมการทำงานและจัดการข้อมูลใน Component ได้อย่างมีประสิทธิภาพ

Lifecycle Hook ที่สำคัญและใช้บ่อยใน Livewire ได้แก่ mount, updated, และ render ซึ่งแต่ละ Hook จะมีจังหวะการทำงานที่ต่างกันออกไป

ตัวอย่างการใช้งาน Lifecycle Hook

การใช้ mount Hook mount เป็น Hook ที่จะถูกเรียกใช้เพียงครั้งเดียวเมื่อ Component ถูกสร้างขึ้น (คล้ายกับ constructor ในภาษาอื่น) สามารถใช้เพื่อกำหนดค่าตัวแปรเริ่มต้นหรือเรียกข้อมูลจากฐานข้อมูลตัวอย่างเช่น เราจะสร้าง Component ชื่อ Counter โดยมีค่าเริ่มต้นของตัวแปร $count ตั้งไว้ที่ 10:

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class Counter extends Component
{
    public $count;

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

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

    public function render()
    {
        return view('livewire.counter');
    }
}

การใช้ updated Hook updated เป็น Hook ที่จะถูกเรียกใช้ทุกครั้งเมื่อมีการอัปเดตค่าของ Property ใน Component สามารถใช้เพื่อทำการตรวจสอบหรือประมวลผลเพิ่มเติมเมื่อค่าถูกเปลี่ยนแปลง

ในตัวอย่างนี้ เราจะใช้ updated เพื่อตรวจสอบว่าถ้าค่า $count มากกว่า 20 จะแสดงข้อความ "Count has exceeded 20!"

public function updated($propertyName)
{
    if ($propertyName === 'count' && $this->count > 20) {
        session()->flash('message', 'Count has exceeded 20!');
    }
}

การใช้ render Hook render เป็น Hook ที่จะถูกเรียกใช้ทุกครั้งเมื่อมีการแสดงผล Component ใหม่หรือเมื่อค่าใน Component เปลี่ยนแปลง เป็น Hook หลักที่ใช้แสดงผล View ของ Component นั่นเอง

ตัวอย่างการเรียกใช้:

public function render()
{
    return view('livewire.counter');
}

การใช้งานใน Blade View (counter.blade.php) ในไฟล์ View คุณสามารถแสดงค่าตัวแปร $count และข้อความจาก session ดังนี้:

<div>
    <h1>Counter: {{ $count }}</h1>
    <button wire:click="increment">+</button>
    @if (session()->has('message'))
        <p>{{ session('message') }}</p>
    @endif
</div>

การแสดง Component ใน Blade Template สุดท้ายให้เรียกใช้ Component นี้ใน Blade Template เช่นใน home.blade.php:

@livewire('counter')

เมื่อผู้ใช้กดปุ่ม + ค่าของ $count จะเพิ่มขึ้นทุกครั้ง และเมื่อค่ามากกว่า 20 จะมีข้อความแสดงว่า "Count has exceeded 20!"

การนำไปใช้งาน

การใช้งาน Lifecycle Hook ทำให้คุณสามารถควบคุมการทำงานในจังหวะที่เหมาะสมได้ เช่น:

• ใช้ mount เพื่อเตรียมข้อมูลเริ่มต้นหรือโหลดข้อมูลจากฐานข้อมูล
• ใช้ updated เพื่อตรวจสอบและประมวลผลเมื่อมีการเปลี่ยนแปลงค่าใน Component
• ใช้ render เพื่อสร้างผลลัพธ์การแสดงผลที่ปรับเปลี่ยนตามข้อมูลใน Component

การใช้ Hook เหล่านี้ช่วยให้โค้ดสะอาดและง่ายต่อการจัดการการทำงานใน Component โดยไม่ต้องเขียนโค้ดซ้ำ