แนวทางการปรับโครงสร้างโค้ด
ปรับโครงสร้างโค้ดทีละขั้นเล็ก ๆ: แยกคอมโพเนนต์/ฮุก ลดพร็อพ นำโค้ดที่ไม่ใช้แล้วออก และทำให้การทดสอบผ่านในทุกจุดตรวจสอบ
แนวทางการปรับโครงสร้างโค้ด เป็นบทเรียน React Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 3 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน React Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส React Academy มีบทเรียนทั้งหมด 3 บทเรียน
ความหมายของรีแฟกทอริง
เป้าหมาย: เปลี่ยนโครงสร้าง ไม่ใช่พฤติกรรม
- ทำงานเป็นขั้นตอนเล็ก ๆ
- แยกคอมโพเนนต์หรือฮุก
- ทำพร็อพให้กระชับเพื่อลดความยุ่งเหยิง
- ลบโค้ดที่ไม่มีการใช้งาน
แนวปฏิบัติที่ปลอดภัย
- รักษาผลลัพธ์ให้เหมือนเดิมหลังทำแต่ละขั้นตอน
- เลือกการแยกแทนการเขียนใหม่ครั้งใหญ่
- เปลี่ยนชื่อหรือย้ายโดยใช้เครื่องมือช่วยจากสภาพแวดล้อมการพัฒนาแบบรวม
- เรียกใช้การทดสอบ (หรือตรวจสอบด้วยตนเอง) บ่อย ๆ
แยกคอมโพเนนต์
ก่อน: มาร์กอัปซ้ำกัน หลัง: การแยก ProductRow ช่วยลดการทำซ้ำ
<div id="root"></div>แยกฮุก
ย้ายตรรกะไปไว้ใน useCart; ส่วนติดต่อผู้ใช้จะเรียบง่ายขึ้นและนำกลับมาใช้ซ้ำได้
<div id="root"></div>ทำพร็อพให้กระชับด้วยการกำหนดค่า
ทำพร็อพให้กระชับ: ส่งออบเจ็กต์ การกำหนดค่า เดียวแทนพร็อพแยกกันหลายรายการ
<div id="root"></div>เคล็ดลับและรายการตรวจสอบ
- รีแฟกทอริงเป็นขั้นตอนเล็ก ๆ; ตรวจสอบส่วนติดต่อผู้ใช้หลังแต่ละขั้นตอน
- แยกคอมโพเนนต์หรือฮุกเพื่อลดการทำซ้ำ
- ทำพร็อพให้กระชับด้วยการจัดกลุ่มการกำหนดค่า
- ลบโค้ดที่ไม่มีการใช้งานหลังยืนยันว่าไม่มีการอ้างอิงแล้ว
การตรวจสอบพื้นฐานเรื่องรีแฟกทอริง
สรุป
สรุป: รักษาพฤติกรรมให้เหมือนเดิมพร้อมปรับปรุงโครงสร้าง แยกส่วนย่อยขนาดเล็ก ทำพร็อพให้กระชับ ลบโค้ดที่ไม่มีการใช้งาน และตรวจสอบในแต่ละขั้นตอน
คำถามที่พบบ่อย
บทเรียน “แนวทางการปรับโครงสร้างโค้ด” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “แนวทางการปรับโครงสร้างโค้ด” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส React Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส React Academy มีบทเรียนทั้งหมด 3 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “แนวทางการปรับโครงสร้างโค้ด”
ปรับโครงสร้างโค้ดทีละขั้นเล็ก ๆ: แยกคอมโพเนนต์/ฮุก ลดพร็อพ นำโค้ดที่ไม่ใช้แล้วออก และทำให้การทดสอบผ่านในทุกจุดตรวจสอบ คุณปฏิบัติ React Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน React Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน React Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 3 บทเรียน
บทเรียน “แนวทางการปรับโครงสร้างโค้ด” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน React Academy นี้ได้ไหม
ได้ บทเรียน React Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- โฟลเดอร์ฟีเจอร์และคอมโพเนนต์ UI กับคอมโพเนนต์ประกอบ
- ข้อตกลงโฟลเดอร์ฮุกและการวางการทดสอบไว้ใกล้กัน
- แนวทางการปรับโครงสร้างโค้ด