เจาะความแตกต่างระหว่าง React และ Solid

ได้ลองสำรวจความแตกต่างระหว่าง React ซึ่งเป็นต้นกำเนิดของ JSX และ Solid.js ซึ่งต่อยอดมาจาก JSX แต่ต่างจาก React ตรงที่ไม่ใช้ virtual DOM

เมื่อสมมติกรณีที่นักพัฒนา React จะเริ่มใช้งาน Solid.js ความแตกต่างพื้นฐานมีดังนี้

• ฟังก์ชัน hook ของ React ใช้ได้เฉพาะภายในฟังก์ชันคอมโพเนนต์เท่านั้น แต่ฟังก์ชันจัดการสถานะของ SolidJS ไม่มีข้อจำกัดเรื่องตำแหน่งการเรียกใช้งาน ราวกับเป็นเทคนิคจัดการสถานะที่แยกอิสระออกมา
• ฟังก์ชัน side-effect ของ React อย่าง useEffect สามารถจัดการทั้งการทำงานเมื่อเกิด side effect และการ cleanup ภายในฟังก์ชันเดียวได้ พร้อมทั้งระบุสถานะที่ได้รับผลกระทบแบบกำหนดเองได้ แต่ฟังก์ชัน side-effect ของ Solid.js อย่าง createEffect จะได้รับผลจากสถานะที่ระบุไว้ในเนื้อหาเหมือน Svelte ไม่ได้ให้ระบุสถานะที่ได้รับผลกระทบด้วยตนเอง และไม่ได้คืนฟังก์ชันกลับมาโดยตรง แต่มีสภาพแวดล้อมของวงจรจัดการสถานะหนึ่งชุด ทำให้ใช้ฟังก์ชัน cleanup ผ่าน onCleanup ได้
• ในด้านการจัดการขอบเขตของสถานะ ไม่มีความแตกต่างด้านวิธีใช้งานจาก React
• สำหรับคอมโพเนนต์แบบไดนามิก เงื่อนไข และลูป React สามารถใช้ตรรกะ JavaScript ได้อย่างสะดวก เพราะเมื่อสถานะเปลี่ยน เนื้อหาภายในจะถูกเขียนใหม่ แต่ Solid จะคงเนื้อหาเดิมไว้ จึงแก้ปัญหานี้ผ่านคอมโพเนนต์ในตัวที่มีมาให้
• Solid.js ก็มีคอมโพเนนต์ lazy และ <Suspense> แบบเดียวกับ React
• Solid ต่างจาก React ตรงที่มีฟังก์ชันยูทิลิตีจัดการสถานะที่คำนึงถึง asynchronous reactivity
• วิธีใช้ ref ของ React และ ref ของ Solid.js คล้ายกัน แต่ใน React มักมีฟังก์ชันเฉพาะอย่าง useRef สำหรับการอ้างอิง ขณะที่ใน Solid.js สามารถใช้ตัวแปร let ได้อย่างง่ายดาย
• Solid.js มีคุณสมบัติ use action สำหรับจัดการวงจรชีวิตของ vanilla JS คล้ายกับ Svelte
• สำหรับ props ของ React แม้จะแยกโครงสร้างออกมาใช้เดี่ยว ๆ เมื่อค่า props เปลี่ยน เนื้อหาก็จะถูกเขียนใหม่ จึงใช้งานได้ไม่มีปัญหา แต่ถ้าใช้วิธีนี้ใน Solid.js จะไม่เกิดการตอบสนอง ทำให้ไม่สามารถดึง props ออกมาใช้เดี่ยว ๆ ผ่านการ destructuring ได้ ต้องใช้งานในรูปอ็อบเจ็กต์เดิม หรือแยกผ่านฟังก์ชันยูทิลิตีที่รองรับการแยกหรือรวมอ็อบเจ็กต์ (splitProps เป็นต้น) เพื่อให้ยังใช้งานในลักษณะอ็อบเจ็กต์ได้

[firea32]

ความแตกต่างที่ใหญ่ที่สุดคือความต่างระหว่าง useState กับ useSignal นั่นแหละ เพราะมองไม่เห็นด้วยตาว่าข้อมูลถูก binding อย่างไร เลยจำได้ว่าตอนดีบักเหนื่อยมาก