React Academy · บทเรียน

กรณีที่ไม่ควรใช้ Context

ทำความเข้าใจกรณีที่การส่งค่า prop การประกอบคอมโพเนนต์ หรือเครื่องมือจัดการสถานะเหมาะสมกว่า

บทเรียน 4 จาก 413 ขั้นตอน

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

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

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

คอนเท็กซ์ไม่ใช่คำตอบสำหรับทุกปัญหา

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

เมื่อพร็อพเป็นตัวเลือกที่ดีกว่า

หากค่าหนึ่งถูกใช้โดยคอมโพเนนต์ที่ซ้อนกันใกล้ ๆ กัน 1–3 คอมโพเนนต์ การส่งพร็อพจะเรียบง่าย ชัดเจนกว่า และติดตามได้ง่ายกว่า คอนเท็กซ์เพิ่มโค้ดพื้นฐานของตัวให้บริการและซ่อนการไหลของข้อมูล

// Don't need Context for this
function Page() {
  const [color, setColor] = useState('blue');
  return <Header color={color} />; // simple, clear
}

เมื่อการประกอบคอมโพเนนต์เป็นตัวเลือกที่ดีกว่า

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

คอนเท็กซ์ทำให้เกิดการเชื่อมโยงที่ซ่อนอยู่

คอมโพเนนต์ที่เรียกใช้ useContext(UserCtx) จะนำกลับมาใช้ใหม่ไม่ได้หากไม่ได้ห่อด้วย UserProvider พร็อพทำให้การพึ่งพาชัดเจน คุณจึงเห็นได้ทันทีว่าคอมโพเนนต์ต้องการอะไรจากรูปแบบการประกาศของมัน

การอัปเดตที่เกิดขึ้นถี่มาก

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

คอนเท็กซ์ไม่ใช่ตัวจัดการสถานะ

คอนเท็กซ์ทำหน้าที่กระจายค่าเท่านั้น ไม่มีการแคช เครื่องมือสำหรับนักพัฒนา หรือมิดเดิลแวร์ในตัว สำหรับสถานะที่ใช้ร่วมกันซึ่งซับซ้อนและมีการอัปเดตบ่อย ให้ใช้ Zustand, Redux หรือ Jotai ซึ่งสร้างมาเพื่อจุดประสงค์นี้

สถานะจากเซิร์ฟเวอร์ไม่ควรอยู่ในคอนเท็กซ์

ข้อมูลที่ดึงมาจากเซิร์ฟเวอร์ เช่น รายชื่อผู้ใช้หรือโพสต์ ไม่ควรอยู่ในคอนเท็กซ์ React Query, SWR หรือ RTK Query จัดการสถานะจากเซิร์ฟเวอร์ด้วยการแคช การดึงข้อมูลใหม่เบื้องหลัง และสถานะข้อผิดพลาดได้ แต่คอนเท็กซ์ไม่มีความสามารถเหล่านี้

สถานะของแบบฟอร์มไม่ควรอยู่ในคอนเท็กซ์

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

เมื่อคอนเท็กซ์ IS เป็นเครื่องมือที่เหมาะสม

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

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

ข้อมูลประเภทใดเหมาะสมน้อยที่สุด (LEAST) สำหรับการจัดเก็บใน React Context

ตอบคำถามในบทเรียนแบบโต้ตอบ

สรุป

ใช้คอนเท็กซ์กับค่าที่คงที่และใช้ร่วมกันข้ามส่วนต่าง ๆ เช่น การยืนยันตัวตน ธีม และภาษา เลือกใช้พร็อพสำหรับการส่งผ่าน 1–3 ระดับ เลือกใช้การประกอบคอมโพเนนต์เพื่อหลีกเลี่ยงการส่งพร็อพผ่านหลายชั้น ใช้ React Query สำหรับสถานะจากเซิร์ฟเวอร์ และใช้ Zustand/Redux สำหรับสถานะที่ใช้ร่วมกันซึ่งซับซ้อน

จบหลักสูตร

ขอแสดงความยินดีด้วยค่ะ คุณเรียน **รูปแบบและประสิทธิภาพของ React Context** จบแล้ว ตอนนี้คุณทราบวิธีแยกคอนเท็กซ์ การทำค่าให้จำได้ด้วยเมโม การใช้ตัวเลือก และที่สำคัญไม่แพ้กันคือทราบแล้วว่าเมื่อใดไม่ควรใช้คอนเท็กซ์เลย

เริ่มต้นได้ฟรี

เรียนรู้ React ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 88
บทเรียน: 324

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

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

บทเรียน “กรณีที่ไม่ควรใช้ Context” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “กรณีที่ไม่ควรใช้ Context”

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

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

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

บทเรียน “กรณีที่ไม่ควรใช้ Context” ใช้เวลานานแค่ไหน

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

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

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

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

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