ทำไมต้องใช้ Context-API

• จะเข้าใจว่าทำไมใช้บริบท API ครั้งแรกที่เราจะ SE คืออะไรProps เจาะ

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

• ใน Context-API พื้นที่จัดเก็บแยกต่างหากจะถูกสร้างขึ้นนอกแผนผังส่วนประกอบที่เราต้องจัดเก็บข้อมูล
• ตอนนี้ถ้าเราต้องการข้อมูลนั้นภายในส่วนประกอบใด ๆ เราก็สามารถเข้าถึงข้อมูลได้โดยตรงจาก Context-API
• ตอนนี้เรามาดูกันว่ามันทำงานอย่างไรกับตัวอย่าง

• เพื่อ CreateContext เราสามารถใช้createContext()ของReact
• เมื่อสร้าง UserContext แล้วเราต้องส่งออก
• ในการเพิ่มข้อมูลภายในบริบท เราต้องห่อองค์ประกอบหลักด้วย<UserContext.Provider>หรือ<UserProvider>
• เมื่อเราห่อด้วย Wrapper แล้ว เราต้องส่งข้อมูลไปยังแอตทริบิวต์ค่า

1) ในองค์ประกอบฟังก์ชัน

2) ในวิธีการ LifeCycle ขององค์ประกอบคลาส

3) ใน Render Method ของ Class Component

1) ในองค์ประกอบฟังก์ชัน:-

• ภายใน Functional Component หรือ Hooks เราต้องใช้useContext() Hook ที่จัดเตรียมโดยแพ็คเกจ React
• ตอนนี้เราต้องนำเข้า UserContext และผ่านมันไปuseContext ()
• useContext(UserContext)จะส่งคืนข้อมูลผู้ใช้ภายใน Context ซึ่งเราสามารถใช้งานได้เพิ่มเติม

• contextTypeวิธีที่ใช้กันมากที่สุดในการเข้าถึงบริบทจากส่วนประกอบชั้นเรียนผ่านทางสถิต
• หากคุณต้องการค่าจากบริบทภายนอกrenderหรือในวิธีวงจรชีวิต คุณจะต้องใช้วิธีนี้

• วิธีดั้งเดิมในการดึงค่าบริบทคือการตัดองค์ประกอบลูกในไฟล์Consumer.
• จากตรงนั้น คุณจะสามารถเข้าถึง value prop เป็นprops.
• คุณอาจยังเห็นสิ่งนี้อยู่ แต่เป็นวิธีการเข้าถึงบริบทแบบเดิมมากกว่า