พร็อพส์และการประกอบ

เป้าหมาย: ส่งข้อมูลด้วยพร็อพส์ กำหนดค่าเริ่มต้น และสร้างส่วนติดต่อผู้ใช้ด้วยการประกอบคอมโพเนนต์ขนาดเล็ก

• พร็อพส์นำข้อมูลเข้าสู่คอมโพเนนต์
• กำหนดค่าเริ่มต้นด้วยการแยกโครงสร้างอย่างง่าย
• การประกอบและช่องสำหรับเนื้อหาภายใน

พร็อพส์ คือข้อมูลนำเข้าแบบอ่านอย่างเดียว คอมโพเนนต์แม่เรนเดอร์คอมโพเนนต์ลูกและส่งค่าให้ ส่วนคอมโพเนนต์ลูกจะอ่านค่าจากพารามิเตอร์ของตน

• อย่าเปลี่ยนแปลงพร็อพส์
• จะเกิดการเรนเดอร์ใหม่เมื่อคอมโพเนนต์แม่เปลี่ยนสถานะหรือพร็อพส์

กำหนดค่าเริ่มต้นให้พร็อพส์ด้วยการแยกโครงสร้างในรายการพารามิเตอร์: function Card({ title = "Untitled" })

• ช่วยให้คอมโพเนนต์ทำงานได้อย่างทนทาน
• ไม่ต้องตรวจสอบค่าไม่กำหนดในมาร์กอัป

การประกอบ หมายถึงการสร้างส่วนติดต่อผู้ใช้ที่ใหญ่ขึ้นจากชิ้นส่วนที่เล็กกว่า (เนื้อหาลูกหรือสล็อต) ควรเลือกใช้แนวทางนี้แทนการสืบทอดเพื่อความยืดหยุ่นและการไหลของข้อมูลที่ชัดเจน

ตัวอย่าง: ส่งพร็อพส์ กำหนดค่าเริ่มต้น และประกอบเนื้อหาลูกภายในโครงร่างการ์ดอย่างง่าย

คอมโพเนนต์เพื่อการนำเสนอมุ่งเน้นโครงร่างและภาพ ควรให้คอมโพเนนต์เหล่านี้ขับเคลื่อนด้วยพร็อพส์และไม่มีสถานะเมื่อทำได้ เพื่อให้นำกลับมาใช้ซ้ำได้ง่าย

• ส่วนติดต่อขนาดเล็ก (ใช้เฉพาะพร็อพส์)
• กำหนดสไตล์ด้วยคลาส หลีกเลี่ยงผลข้างเคียงที่ซ่อนอยู่

สรุป: ส่งข้อมูลด้วยพร็อพส์ กำหนดค่าเริ่มต้นที่ปลอดภัย และประกอบเนื้อหาลูกเพื่อสร้างส่วนติดต่อผู้ใช้ที่ยืดหยุ่นและนำกลับมาใช้ซ้ำได้ หลีกเลี่ยงลำดับชั้นที่อาศัยการสืบทอด