ผลต่างระหว่างรุ่นของ "01204223/react-components"
ไปยังการนำทาง
ไปยังการค้นหา
Jittat (คุย | มีส่วนร่วม) |
Jittat (คุย | มีส่วนร่วม) |
||
| แถว 1: | แถว 1: | ||
: ''หน้านี้เป็นส่วนหนึ่งของวิชา [[01204223]]'' | : ''หน้านี้เป็นส่วนหนึ่งของวิชา [[01204223]]'' | ||
| − | + | ใน React app ที่เราเขียนขึ้น เราใส่ทุกอย่างบน UI ลงใน component App เพียงอย่างเดียว ทำให้โค้ดใน App.jsx มีขนาดใหญ่และซับซ้อนมาก & nbsp; ข้อสังเกตหนึ่งของความซับซ้อนก็คือการจัดการเกี่ยวกับฟอร์ม comment ของแต่ละ TodoItem ที่เราสร้าง state ที่มีความซับซ้อน | |
| − | [[Image:223-react-app-component-todoitem.png| | + | เราจะปรับโครงสร้างของ UI ใหม่ จากที่มี component เดียวดังรูปด้านล่าง |
| + | |||
| + | [[Image:223-react-app-component.png|300px]] | ||
| + | |||
| + | ให้แยกส่วนแสดง TodoItem ออกเป็นอีก component หนึ่ง ดังรูปต่อไปนี้ | ||
| + | |||
| + | [[Image:223-react-app-component-todoitem.png|300px]] | ||
| + | |||
| + | การออกแบบระบบดังกล่าวทำให้แต่ละ component เล็กลง แต่ก็แลกมากับการที่ต้องพิจารณาเรื่องการเก็บ state ของ UI และการเก็บ state ของข้อมูลของแอพทั้งหมด | ||
| + | |||
| + | == แยก Component ในการแสดงผล == | ||
| + | |||
| + | == ส่ง callback == | ||
| + | |||
| + | == ทางเลือกอื่น ๆ == | ||
รุ่นแก้ไขเมื่อ 18:14, 11 กุมภาพันธ์ 2569
- หน้านี้เป็นส่วนหนึ่งของวิชา 01204223
ใน React app ที่เราเขียนขึ้น เราใส่ทุกอย่างบน UI ลงใน component App เพียงอย่างเดียว ทำให้โค้ดใน App.jsx มีขนาดใหญ่และซับซ้อนมาก & nbsp; ข้อสังเกตหนึ่งของความซับซ้อนก็คือการจัดการเกี่ยวกับฟอร์ม comment ของแต่ละ TodoItem ที่เราสร้าง state ที่มีความซับซ้อน
เราจะปรับโครงสร้างของ UI ใหม่ จากที่มี component เดียวดังรูปด้านล่าง
ให้แยกส่วนแสดง TodoItem ออกเป็นอีก component หนึ่ง ดังรูปต่อไปนี้
การออกแบบระบบดังกล่าวทำให้แต่ละ component เล็กลง แต่ก็แลกมากับการที่ต้องพิจารณาเรื่องการเก็บ state ของ UI และการเก็บ state ของข้อมูลของแอพทั้งหมด
