ในโลกของการพัฒนาแอปพลิเคชัน Single Page Application (SPA) ที่มีความซับซ้อนและมีขนาดใหญ่ขึ้นเรื่อย ๆ ปัญหาด้านประสิทธิภาพในการจัดการ State และการ Re-render Component ได้กลายเป็นคอขวดที่สำคัญ นักพัฒนามักต้องเผชิญกับสถานการณ์ที่แม้จะมีการเปลี่ยนแปลงข้อมูลเพียงเล็กน้อย แต่ระบบก็ยังถูกบังคับให้ทำการตรวจสอบ (Reconciliation) หรือวาดหน้าจอใหม่ในวงกว้างเกินความจำเป็น ทำให้เกิด Overhead และส่งผลกระทบต่อประสบการณ์ผู้ใช้งานโดยรวม
เจาะลึกรายละเอียดและประเด็นสำคัญ
หัวใจหลักของแนวคิดใหม่นี้คือการเปลี่ยนกระบวนทัศน์จากการ “Re-render Component” ไปสู่การ “Update Dependency โดยตรง” (Fine-grained Reactivity) แทนที่จะพึ่งพา Virtual DOM และการเปรียบเทียบโครงสร้างทั้งหมด ระบบจะทำงานคล้ายกับการติดตามสัญญาณไฟฟ้า: เมื่อค่าใดค่าหนึ่งเปลี่ยนแปลง จะมีเพียงส่วนประกอบที่ *เชื่อมต่อ* กับค่านั้นเท่านั้นที่จะถูกอัปเดตอย่างแม่นยำและทันท่วงที
Signals คือกลไกพื้นฐาน (Primitive) ที่ทำหน้าที่เป็นตัวแปรที่มีความสามารถในการแจ้งเตือน (Notification) เมื่อค่าของมันเปลี่ยนแปลง การใช้ Signals ทำให้เราสามารถสร้างระบบที่รู้ว่าส่วนใดของ UI หรือ Logic ธุรกิจต้องตอบสนองต่อการเปลี่ยนแปลงของ State นั้น ๆ โดยไม่จำเป็นต้องให้ Component แม่ทั้งหมดรับทราบถึงการเปลี่ยนแปลงนั้น นี่คือกุญแจสำคัญที่ทำให้ประสิทธิภาพในการจัดการ State มีความแม่นยำสูงกว่าเดิมมาก
// 1. การสร้าง Signal (State)
const count = signal(0);
// 2. การอ่านค่าใน Computed (Dependency Tracking)
const doubledCount = computed(() => count() * 2);
// 3. การอัปเดต State (Triggering Updates)
function increment() {
count.set(count() + 1); // เมื่อเรียก .set() จะมีการแจ้งเตือนไปยังส่วนที่ใช้ count() และ doubledCount
}
// ใน Component: UI จะผูกกับ count() หรือ doubledCount โดยตรง ทำให้เมื่อค่าเปลี่ยน มีเพียง Text Element ที่แสดงผลเท่านั้นที่จะอัปเดต