การทำความเข้าใจบริบท API

ในโครงการ React.js เราสร้างส่วนประกอบแล้วส่งต่ออุปกรณ์ประกอบฉากไปยังส่วนประกอบเหล่านั้น เราสามารถส่งต่ออุปกรณ์ประกอบฉากเหล่านั้นไปยังส่วนประกอบที่ซ้อนกันในระดับที่ไม่มีที่สิ้นสุด แต่ถ้ามีส่วนประกอบจำนวนมากและทั้งหมดต้องการอุปกรณ์ที่ใช้ร่วมกันต่างกัน โครงการจะไม่สามารถจัดการได้ นั่นคือที่มาของ Context API ช่วยให้เราใช้อุปกรณ์ประกอบฉากในระดับที่ซ้อนกันโดยไม่ต้องเจาะเสา

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

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

ที่นี่ ส่วนประกอบ Player และ Match จะใช้ค่าจาก FootballProvider และ OtherProvider เช่นกัน

ในการใช้ค่าจากผู้ให้บริการเราจำเป็นต้องใช้ useContext hook

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