ตอนแรกคิดว่า เปลี่ยน Framework มันน่าจะเหมือน ๆ กัน แต่ความน่าปวดหัวของ Web Developer คือการที่แต่ละ Framework มี “จังหวะชีวิต” ( Lifecycle ) ของตัวเอง ทำให้การนำ Class ก้อนเดียวกันไปแปะ ต้องวางให้ถูกที่ถูกเวลา
เพื่อให้เห็นภาพชัดเจน ผมทำสรุปการเปรียบเทียบ “จุดที่วาง” และ “วิธีการจัดการ” Instance ของ TabulatorPlus ในแต่ละโลกมาให้ดูครับ
🖼️ แผนผังการจัดการ TabulatorPlus ในแต่ละ Framework
| ขั้นตอน ( Step ) | React ( Functional ) | Vue 3 ( Composition ) | Angular ( TypeScript ) | jQuery ( Vanilla ) |
| ที่เก็บ Instance | useRef(null) | shallowRef(null) | private instance: any | let instance = null |
| จุดเริ่มสร้าง (Init) | useEffect(() => {...}, []) | onMounted(() => ...) | ngAfterViewInit() | $(document).ready() |
| การ Refresh | useEffect(..., [data]) | watch(data, ...) | ngOnChanges() | เรียกฟังก์ชัน manual |
| การลบ ( Unmount ) | return () => destroy() | onBeforeUnmount() | ngOnDestroy() | เรียก .destroy() เอง |
🔍 เจาะลึกความต่าง: ทำไม “คิดว่าเหมือน” แต่ “เขียนไม่เหมือน”?
- React: “ความจำสั้น”
React จะรันฟังก์ชัน Component ใหม่เกือบทุกครั้งที่มีการเปลี่ยนแปลง ถ้าคุณไม่ใช้useRefเก็บ Instance ไว้ พอ React re-render ตัวแปรจะหายไปทันที หรือถ้าไม่ระวัง มันจะสร้างตารางใหม่ซ้อนกันเรื่อยๆ จนค้าง - Vue: “ช่างสังเกต”
Vue จะคอยมอง ( Watch ) ข้อมูลอยู่ตลอดเวลา เราแค่บอกมันว่า “ถ้าข้อมูลdataเปลี่ยน ให้สั่งinstance.setData()นะ” มันจะจัดการให้เองอย่างนุ่มนวล - Angular: “เจ้าระเบียบ”
Angular แบ่งสัดส่วนชัดเจนมาก คุณต้องรอให้ View โหลดเสร็จก่อน (AfterViewInit) ถึงจะจับตัว DOM มาทำตารางได้ และต้องประกาศล้างทิ้งในOnDestroyไม่งั้นตัว Instance จะค้างอยู่ในหน่วยความจำ browser ไปตลอด - jQuery: “อิสระ ( ที่ต้องรับผิดชอบเอง )”
ไม่มีใครคอยสั่งให้คุณล้างข้อมูล หรืออัปเดตข้อมูลอัตโนมัติ คุณต้องเขียนคำสั่งเรียกrefresh()หรือdestroy()เองเมื่อมีการเปลี่ยนหน้าหรือปิด Modal
อ่านเพิ่มเติม