React v19 - Actions, Server Components, ปรับปรุงข้อผิดพลาด Hydration, รองรับ Document Metadata และอื่นๆ

ssssut · 2024-12-06T14:27:03+09:00

API และความสามารถใหม่ Actions: จัดการการเปลี่ยนแปลงข้อมูลและการอัปเดตสถานะโดยอัตโนมัติ จัดการสถานะรอ ข้อผิดพลาด และ optimistic update ให้อัตโนมัติ useActionState: ฮุกใหม่ที่ช่วยจัดการกรณีการใช้งานทั่วไปของ Actions ได้อย่างง่ายดาย use API: สามารถอ่าน Promise และ Context ระหว่างการเรนเดอร์ได้ useOptimistic: ทำให้สร้างการอัปเดต optimistic UI ระหว่างคำขอแบบอะซิงก์ได้ง่าย ref as a prop: สามารถใช้ prop ref ได้โดยตรงในฟังก์ชันคอมโพเนนต์ (forwardRef ไม่จำเป็น) as a Provider: สามารถใช้ <Context> ได้โดยตรงแทน <Context.Provider> การจัดการเอกสารและทรัพยากร รองรับ Metadata: สามารถใช้แท็ก <title>, <link>, <meta> ได้โดยตรงในคอมโพเนนต์ รองรับ Stylesheet: โหลดสไตล์ชีตและจัดการลำดับความสำคัญได้ภายในคอมโพเนนต์ รองรับสคริปต์แบบอะซิงก์: สามารถเรนเดอร์สคริปต์แบบอะซิงก์ได้จากตำแหน่งใดก็ได้ใน component tree Preloading ทรัพยากร: มี API prefetchDNS, preconnect, preload, preinit สำหรับการเพิ่มประสิทธิภาพ การปรับปรุง รองรับ Custom Elements: เพิ่มการรองรับ custom elements อย่างสมบูรณ์ ปรับปรุงการจัดการข้อผิดพลาด: ลบข้อผิดพลาดซ้ำซ้อนและเพิ่มตัวเลือกในการจัดการข้อผิดพลาด ความเข้ากันได้กับสคริปต์/ส่วนขยายของบุคคลที่สาม: ปรับปรุงการจัดการเนื้อหาจากภายนอกระหว่างกระบวนการ hydration ปรับปรุงข้อผิดพลาด hydration: มีข้อความแสดงข้อผิดพลาดและข้อมูลดีบักที่ชัดเจนยิ่งขึ้น Server Components Server Components ที่เสถียรแล้ว: ฟีเจอร์ Server Components ทั้งหมดจาก Canary channel ถูกรวมอยู่ใน React 19 Server Actions: รองรับการเรียกใช้ฟังก์ชันบนเซิร์ฟเวอร์จาก client components อื่นๆ ค่าเริ่มต้นของ useDeferredValue: เพิ่มตัวเลือกค่าเริ่มต้นให้ useDeferredValue ฟังก์ชัน cleanup ของ ref: สามารถคืนค่าฟังก์ชัน cleanup จาก ref callback ได้ Static API ใหม่: เพิ่ม API prerender และ prerenderToNodeStream

(react.dev)

11 คะแนน โดย ssssut 2024-12-06 | 1 ความคิดเห็น | แชร์ทาง WhatsApp

API และความสามารถใหม่

Actions: จัดการการเปลี่ยนแปลงข้อมูลและการอัปเดตสถานะโดยอัตโนมัติ จัดการสถานะรอ ข้อผิดพลาด และ optimistic update ให้อัตโนมัติ
useActionState: ฮุกใหม่ที่ช่วยจัดการกรณีการใช้งานทั่วไปของ Actions ได้อย่างง่ายดาย
use API: สามารถอ่าน Promise และ Context ระหว่างการเรนเดอร์ได้
useOptimistic: ทำให้สร้างการอัปเดต optimistic UI ระหว่างคำขอแบบอะซิงก์ได้ง่าย
ref as a prop: สามารถใช้ prop ref ได้โดยตรงในฟังก์ชันคอมโพเนนต์ (forwardRef ไม่จำเป็น)
<Context> as a Provider: สามารถใช้ <Context> ได้โดยตรงแทน <Context.Provider>

การจัดการเอกสารและทรัพยากร

รองรับ Metadata: สามารถใช้แท็ก <title>, <link>, <meta> ได้โดยตรงในคอมโพเนนต์
รองรับ Stylesheet: โหลดสไตล์ชีตและจัดการลำดับความสำคัญได้ภายในคอมโพเนนต์
รองรับสคริปต์แบบอะซิงก์: สามารถเรนเดอร์สคริปต์แบบอะซิงก์ได้จากตำแหน่งใดก็ได้ใน component tree
Preloading ทรัพยากร: มี API prefetchDNS, preconnect, preload, preinit สำหรับการเพิ่มประสิทธิภาพ

การปรับปรุง

รองรับ Custom Elements: เพิ่มการรองรับ custom elements อย่างสมบูรณ์
ปรับปรุงการจัดการข้อผิดพลาด: ลบข้อผิดพลาดซ้ำซ้อนและเพิ่มตัวเลือกในการจัดการข้อผิดพลาด
ความเข้ากันได้กับสคริปต์/ส่วนขยายของบุคคลที่สาม: ปรับปรุงการจัดการเนื้อหาจากภายนอกระหว่างกระบวนการ hydration
ปรับปรุงข้อผิดพลาด hydration: มีข้อความแสดงข้อผิดพลาดและข้อมูลดีบักที่ชัดเจนยิ่งขึ้น

Server Components

Server Components ที่เสถียรแล้ว: ฟีเจอร์ Server Components ทั้งหมดจาก Canary channel ถูกรวมอยู่ใน React 19
Server Actions: รองรับการเรียกใช้ฟังก์ชันบนเซิร์ฟเวอร์จาก client components

อื่นๆ

ค่าเริ่มต้นของ useDeferredValue: เพิ่มตัวเลือกค่าเริ่มต้นให้ useDeferredValue
ฟังก์ชัน cleanup ของ ref: สามารถคืนค่าฟังก์ชัน cleanup จาก ref callback ได้
Static API ใหม่: เพิ่ม API prerender และ prerenderToNodeStream

1 ความคิดเห็น

carnoxen 2024-12-06

ในเวอร์ชัน 19 นี้ มีการนิยามการทำงานของ <Suspense> ใหม่อีกครั้งซึ่งก่อนหน้านี้เคยเป็นประเด็นถกเถียงกันอยู่ ก่อนหน้านี้เมื่อทำให้คอมโพเนนต์หนึ่งเป็น Suspense ระบบจะเรนเดอร์ต่อไปจนถึงคอมโพเนนต์ Suspense ถัดไปแล้วค่อยสร้าง fallback แต่ตอนนี้เปลี่ยนเป็นเมื่อทำให้คอมโพเนนต์หนึ่งเป็น Suspense ระบบจะสร้าง fallback ก่อน แล้วจึงเรนเดอร์คอมโพเนนต์ Suspense ถัดไปตามลำดับ

Improvements to Suspense

พูดสั้น ๆ ก็คือช่วยลดเวลาในการเรนเดอร์ครั้งแรกลงได้ ถือว่าแก้ปัญหาได้ดี น่ายินดีครับ