- 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
ยังไม่มีความคิดเห็น