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