ทำไมเราไม่ควรใช้ใน React JS

ทำไมเราไม่ควรใช้ใน React JS

ประทับเวลา: 27 มีนาคม 2023 11:50 น
โหนดต้นทาง: 2035537

ดังที่เราทราบ โดยทั่วไปเราใช้ DIV เพื่อสร้างคอนเทนเนอร์หรือรวมองค์ประกอบหลายรายการไว้ในองค์ประกอบเดียว จากนั้นจึงใช้สไตล์กับองค์ประกอบเหล่านั้นพร้อมกันได้

ใน React JSx เรามักจะใช้ div เพื่อใส่ส่วนประกอบหลาย ๆ อันไว้ในนั้นเพื่อส่งกลับเป็นส่วนประกอบเดียว
ดังที่คุณเห็นด้านล่าง:

return (
<div> <Home /> <Main /> <Blogs /> <footer />
</div>
)

แม้ว่าเราจะสามารถกำจัด DIV และเพิ่มพื้นที่ว่างใน DOM ได้
ต่อไปนี้คือทางเลือกบางส่วนที่เราสามารถใช้แทน DIV รอบๆ ส่วนประกอบได้

React Js เวอร์ชัน 16.2 แนะนำคุณสมบัติใหม่ fragmentation แนวคิด. มาดูกันให้ลึกยิ่งขึ้น

ตอนนี้ React Fragment ทำงานเหมือนกับ DIV ตรงที่ห่อหุ้มส่วนประกอบต่างๆ
ดูตัวอย่างนี้:

return (
<React.Fragment> <Home /> <Main /> <Blogs /> <footer />
<React.Fragment />
)

หรือเราสามารถใช้ตัวอย่างแท็ก shothand ของ Fragment (< > < />) แทน

นี่มันเหมือนกับ

return (
<> <Home /> <Main /> <Blogs /> <footer />
< />
)

ประโยชน์ของการใช้แฟรกเมนต์:

1. รวดเร็ว
ดังที่เราทราบแท็ก DIV สร้างโหนดใน DOM และใช้พื้นที่บางส่วนใน DOM แต่ React แฟรกเมนต์ไม่ได้สร้างโหนดใน DOM ดังนั้นจึงไม่ใช้พื้นที่ใน DOM
ซึ่งทำให้แอปพลิเคชันบิตเร็วกว่าปกติ

2. DOM ที่ยุ่งเหยิงน้อยลง
การมีโหนดที่ไม่เกี่ยวข้องจำนวนมากทำให้โค้ดยุ่งเหยิงและอ่านยากเมื่อแอปพลิเคชันเติบโตขึ้น เนื่องจากเราอาจมีองค์ประกอบหลักหลายองค์ประกอบที่มีองค์ประกอบย่อยที่ซ้อนกัน ซึ่งทำให้โค้ดของเรายุ่งเหยิงมากขึ้นและกลายเป็นอุปสรรคในการดีบักโค้ดด้วยวิธีที่เหมาะสม แต่ด้วย Fragment โค้ดจะดูชัดเจนและง่ายต่อการเข้าใจและดีบัก

สรุป:
การใช้ Fragment ใน React เวอร์ชันล่าสุดจะถือเป็นแนวทางปฏิบัติที่ดี นักพัฒนาส่วนใหญ่ไม่ใส่ใจกับสิ่งเล็กๆ น้อยๆ เช่นนี้ ซึ่งอาจทำให้สถาปัตยกรรมแอปพลิเคชันถูกทำลายเมื่อเติบโตขึ้นในอนาคต

ยกเว้นไม่มีเกณฑ์พิเศษที่เราต้องใช้ DIV เพื่อเพิ่มคลาสและเพิ่มสไตล์ให้กับมัน

ขอบคุณมากสำหรับการสนับสนุนของคุณ. ติดตามและแบ่งปันกับเพื่อนร่วมงานของคุณ
คอยติดตามบทความที่จะมาถึงเช่นนี้

อยู่อย่างปลอดภัย! มีความสุข!

ประทับเวลา:

เพิ่มเติมจาก Codementor React ข้อเท็จจริง