React Fragments คืออะไร และเหตุใดจึงควรใช้มัน

Question

Accepted Answer

คอมโพเนนต์ต้องคืนค่า **องค์ประกอบรูทเดียว** แต่คุณมักไม่ต้องการเพิ่ม `

` ที่ห่อหุ้มพิเศษเพียงเพื่อให้เป็นไปตามกฎนี้ (มันอาจทำลาย CSS layouts เช่น flexbox/grid หรือโครงสร้าง HTML เช่น tables) **Fragment** จัดกลุ่มลูก **โดยไม่** เพิ่มโหนด DOM ใด ๆ ```jsx function TableRow() { return ( <> {/* Fragment — produces NO extra element in the DOM */} Name Email ); } ``` หากคุณใช้ `

` ที่นี่แทนก็จะได้ HTML ที่ไม่ถูกต้อง (`

…`) และตารางจะแตกลาย Fragment จะแสดงเพียง `` สองตัวเท่านั้น ## ไวยากรณ์สั้น vs ไวยากรณ์เต็ม ```jsx <>... // short syntax (most common) // full syntax — needed when you must pass a key ... ``` ใช้รูปแบบเต็มเมื่อแสดง **รายการ fragments** เนื่องจากรูปแบบสั้น `<>` ไม่สามารถรับ `key`: ```jsx {items.map(item => (

{item.term}

{item.def}

))} ``` ## เหตุใดจึงมีความสำคัญ Fragments ให้ DOM สะอาด (ไม่มี "wrapper div soup") หลีกเลี่ยงการทำลายโครงสร้าง semantic/layout-sensitive และลดจำนวนโหนดเล็กน้อย — ทั้งหมดด้วยต้นทุน runtime เป็นศูนย์