React Academy · บทเรียน

HOC กับ Render Props และ Custom Hooks

เปรียบเทียบกลยุทธ์การแบ่งปันโค้ดทั้งสามแบบในด้านความอ่านง่าย การทดสอบ และการประกอบ

HOC กับ Render Props และ Custom Hooks เป็นบทเรียน React Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน React Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส React Academy มีบทเรียนทั้งหมด 4 บทเรียน

ยินดีต้อนรับ

ในบทเรียนนี้ คุณจะเปรียบเทียบ HOC พร็อพสำหรับการเรนเดอร์ และฮุกแบบกำหนดเองในด้านความอ่านง่าย ความสามารถในการทดสอบ ความสามารถในการประกอบ และสถานการณ์ที่ควรเลือกใช้แต่ละแบบ

ปัญหาที่ทั้งสามรูปแบบแก้ได้

รูปแบบทั้งสามมีไว้เพื่อแบ่งปันตรรกะที่มีสถานะหรือพฤติกรรมระหว่างคอมโพเนนต์หลายรายการ โดยไม่ต้องคัดลอกและวางโค้ด

ข้อดีของ HOC

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

ข้อเสียของ HOC

HOC สร้างนรกของตัวห่อหุ้มใน DevTools อาจทำให้พร็อพชนกันหาก HOC สองรายการแทรกพร็อพที่มีชื่อเดียวกัน และกำหนดชนิดข้อมูลอย่างถูกต้องใน TypeScript ได้ยากกว่า นอกจากนี้ต้องส่งต่อรีฟอย่างชัดเจน

ข้อดีของพร็อพสำหรับการเรนเดอร์

พร็อพสำหรับการเรนเดอร์ทำให้เห็นการไหลของข้อมูลอย่างชัดเจน คุณจะเห็นได้ทันทีว่าผู้จัดเตรียมพฤติกรรมเปิดเผยค่าใดบ้าง รูปแบบนี้ใช้ได้กับทั้งคอมโพเนนต์แบบคลาสและฟังก์ชัน และเหมาะอย่างยิ่งกับ API ของคอมโพเนนต์ที่แยกตรรกะออกจากส่วนติดต่อผู้ใช้

ข้อเสียของพร็อพสำหรับการเรนเดอร์

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

ข้อดีของฮุกแบบกำหนดเอง

ฮุกแบบกำหนดเองประกอบใช้งานได้ดีที่สุด คุณสามารถเรียกใช้ฮุกหลายรายการ นำมารวมกัน และยังคงทำให้ JSX ของคอมโพเนนต์อ่านง่าย นอกจากนี้ยังทดสอบแยกส่วนได้ง่าย และชนิดข้อมูลใน TypeScript ก็ตรงไปตรงมา

const { on, toggle } = useToggle();
const { x, y } = useMouse();
// No wrapper components, no callback nesting

ข้อเสียของฮุกแบบกำหนดเอง

ฮุกแบบกำหนดเองใช้ได้เฉพาะกับคอมโพเนนต์ฟังก์ชันเท่านั้น ไม่ใช่คอมโพเนนต์แบบคลาส ฮุกไม่สามารถแทรก JSX ได้ แต่ส่งคืนข้อมูลหรือฟังก์ชันเท่านั้น กรณีใช้งานบางอย่าง เช่น ตัวป้องกันการยืนยันตัวตนที่เปลี่ยนเส้นทาง อาจต้องใช้ HOC หรือคอมโพเนนต์ตัวห่อหุ้ม

แนวทางการตัดสินใจ

ต้องการเปลี่ยนเส้นทางหรือป้องกันเส้นทางใช่หรือไม่ ให้ใช้ HOC หรือคอมโพเนนต์ตัวห่อหุ้ม กำลังสร้างไลบรารีส่วนติดต่อผู้ใช้ที่แยกตรรกะออกจากส่วนแสดงผลใช่หรือไม่ ให้ใช้พร็อพสำหรับการเรนเดอร์หรือฮุก ต้องการแบ่งปันตรรกะที่มีสถานะในคอมโพเนนต์ฟังก์ชันใช่หรือไม่ ให้ใช้ฮุกแบบกำหนดเอง ต้องการห่อหุ้มคอมโพเนนต์แบบคลาสหรือคอมโพเนนต์จากไลบรารีภายนอกใช่หรือไม่ ให้ใช้ HOC

ค่าเริ่มต้นสมัยใหม่: เริ่มจากฮุก

ในโค้ดเบส React สมัยใหม่ที่ใช้คอมโพเนนต์ฟังก์ชันทั้งหมด ฮุกแบบกำหนดเองคือตัวเลือกเริ่มต้น ให้เลือกใช้ HOC หรือพร็อพสำหรับการเรนเดอร์เฉพาะเมื่อฮุกไม่สามารถแก้ปัญหาได้

ตรวจสอบความเข้าใจ

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

สรุปทบทวน

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

บทถัดไป

บทเรียนถัดไป: **ปรับโครงสร้าง HOC เป็นฮุกแบบกำหนดเอง** — คุณจะเปลี่ยน HOC withAuth เป็นฮุก useAuth ทีละขั้นตอน

คำถามที่พบบ่อย

บทเรียน “HOC กับ Render Props และ Custom Hooks” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “HOC กับ Render Props และ Custom Hooks” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส React Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส React Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “HOC กับ Render Props และ Custom Hooks”

เปรียบเทียบกลยุทธ์การแบ่งปันโค้ดทั้งสามแบบในด้านความอ่านง่าย การทดสอบ และการประกอบ คุณปฏิบัติ React Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน React Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน React Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “HOC กับ Render Props และ Custom Hooks” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน React Academy นี้ได้ไหม

ได้ บทเรียน React Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ React Academy