ยูทูบ :

โค้ดแซนด์บ็อกซ์ :

แรงจูงใจ

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

ข้อกำหนดเบื้องต้น

เราจะทำการ refactoring <App>— ซึ่งใช้ local state— เพื่อใช้ Context:

อย่างที่คุณเห็น มีตัวนับที่มี 2 ปุ่มที่เพิ่มหรือลดจำนวนการนับ

ผู้ให้บริการ

สร้าง<Provider>และตั้งค่า prop valueเป็น 0:

แสดง<Provider>ผลเป็นองค์ประกอบระดับบนสุดในindex.js:

รับผู้ให้บริการvalueด้วยuseContextใน<App>:

ใช้ลด

สร้างฟังก์ชั่นลด:

ผ่านสถานะและส่งจากuseReducerไปยังผู้ให้บริการ prop value:

อัปเดต<App>ด้วยค่าบริบทใหม่:

ผู้บริโภค

อีกทางเลือกหนึ่งคือuseContextผู้บริโภค

ขั้นแรก ส่งออกConsumerจากบริบท:

จากนั้นแทนที่useContextด้วย<Consumer>:

<Consumer>ต้องการฟังก์ชันโทรกลับสำหรับchildrenprop อาร์กิวเมนต์ที่ 1 คือvalueProvider

ระดับ

สำหรับส่วนประกอบของคลาส ค่า Provider สามารถเข้าถึงได้บนthis.context:

ทำ

แนวคิดสำหรับการปรับปรุง:

• สร้างhook แบบกำหนดเองสำหรับuseContext(Context).
• Refactor action types เป็นค่าคงที่
• สร้างผู้สร้างการกระทำ
• ตั้งค่าdisplayNameตามบริบทเพื่อปรับปรุงการมองเห็นใน React DevTools

• วิดีโอ YouTube
• การสาธิต CodeSandbox
• บริบท
• ใช้ลด