2 การเปลี่ยนแปลงสำคัญของ React: View Transitions และ Activity

• React เปิดเผยฟีเจอร์ทดลองใหม่
  • View Transitions ช่วยให้สามารถใส่อนิเมชันการเปลี่ยนหน้าที่ ลื่นไหล ได้อย่างง่ายดาย
  • Activity ช่วยให้สามารถเพิ่มประสิทธิภาพโดย ซ่อน UI และคงสถานะไว้
• นอกจากนี้ยังมีการพัฒนาฟีเจอร์อีกหลากหลาย เช่น การจัดการ dependency อัตโนมัติ, Fragment Refs, Concurrent Stores

คุณสมบัติหลักของ View Transitions

• ใช้ Browser API startViewTransition ที่เพิ่งเพิ่มเข้ามาเพื่อสร้างอนิเมชัน
• ใช้ <ViewTransition> เพื่อระบุว่าองค์ประกอบใดจะถูกทำอนิเมชัน และสามารถใช้ startTransition, useDeferredValue, Suspense เป็นต้น เป็นตัวกระตุ้นได้
• โดยค่าเริ่มต้นจะมีอนิเมชันแบบ crossfade และสามารถปรับแต่งได้ด้วย CSS
• รองรับ shared element transitions ด้วย และสามารถย้ายระหว่างองค์ประกอบที่มีพร็อพเพอร์ตี name เดียวกันได้อย่างเป็นธรรมชาติ
• มี API addTransitionType ที่สามารถกำหนดอนิเมชันต่างกันตามสาเหตุของ transition ได้

คุณสมบัติหลักของ Activity

• ใช้ <Activity> เพื่อซ่อน UI และคงสถานะไว้ หรือพรีเรนเดอร์ล่วงหน้าเมื่อจำเป็น
• ในโหมดซ่อน คอมโพเนนต์จะถูก unmount แต่สถานะยังคงอยู่ และลำดับความสำคัญของการเรนเดอร์จะลดลง
• เมื่อเปลี่ยนหน้า สามารถกู้คืนค่าอินพุตหรือสถานะได้โดยไม่สูญหาย
• ในอนาคตมีแผนจะเพิ่มโหมดสำหรับ modal และฟังก์ชันลบสถานะเพื่อประหยัดหน่วยความจำ
• ใน server-side rendering (SSR) ก็รองรับการทำงานเพื่อเพิ่มประสิทธิภาพของ Activity เช่นกัน

ฟีเจอร์อื่น ๆ ที่กำลังพัฒนา

• React Performance Tracks

  • กำลังพัฒนาฟีเจอร์เพิ่ม custom track สำหรับ React โดยเฉพาะใน browser performance profiler
  • ขณะนี้ยังอยู่ระหว่างแก้ปัญหาด้านประสิทธิภาพและการเชื่อมต่อกับ Suspense

• การจัดการ Effect Dependencies อัตโนมัติ (Automatic Effect Dependencies)

  • มีเป้าหมายจะใช้ React Compiler แทรก dependency ของ useEffect ให้โดยอัตโนมัติ เพื่อให้โค้ดกระชับและเข้าใจง่ายขึ้น
  • ต้องการส่งเสริมแนวคิดแบบ ยึด Effect เป็นศูนย์กลาง แทนการคิดตามวงจรชีวิตของคอมโพเนนต์

• Compiler IDE Extension

  • กำลังพัฒนา ส่วนขยาย IDE ที่ทำงานบนพื้นฐานของ React Compiler
  • มีแผนจะรองรับฟีเจอร์หลากหลาย เช่น การปรับแต่งโค้ดให้เหมาะสม การตรวจจับการละเมิดกฎ และการแสดง dependency ที่ถูกแทรกอัตโนมัติ

• Fragment Refs

  • กำลังวิจัยฟีเจอร์ Fragment Ref ที่ช่วยให้จัดการ DOM หลายองค์ประกอบด้วย Ref เดียวได้
  • มีเป้าหมายเพื่อให้การเรียกใช้ DOM API ทำได้ง่ายขึ้น

• Gesture Animations

  • กำลังวิจัยเพื่อขยาย View Transition ไปสู่ อนิเมชันที่อิงกับ touch gesture
  • อยู่ระหว่างแก้ปัญหา เช่น การเคลื่อนไหวต่อเนื่อง การจัดการการกระทำที่ยังไม่เสร็จสิ้น และการจัดการการกลับด้านระหว่าง DOM ใหม่กับ DOM เดิม

• Concurrent Stores

  • มีเป้าหมายจะผสาน external store เข้ากับ React อย่างเป็นธรรมชาติในรูปแบบ concurrent
  • กำลังพัฒนา API สไตล์ use(store) แบบใหม่เพื่อก้าวข้ามข้อจำกัดของ useSyncExternalStore