คุณอาจอ่านข้อความนี้เพราะคุณตระหนักว่าแอป React ของคุณต้องมีการเจาะเสา แต่คุณต้องการหาวิธีที่ดีกว่าในการดำเนินการ การเจาะ Prop กลายเป็นเรื่องน่าหงุดหงิดและวุ่นวายกับแอปขนาดใหญ่ และไม่แนะนำเช่นกัน นี่คือที่มาของ React Context
React Context เป็นคุณสมบัติอันทรงพลังที่ช่วยให้คุณส่งข้อมูลไปตามโครงสร้างส่วนประกอบโดยไม่ต้องส่งอุปกรณ์ประกอบฉากผ่านแต่ละระดับ ในบทความนี้ เราจะพูดถึงวิธีใช้ React Context และเมื่อใดจึงเหมาะสมที่จะใช้
บริบทการตอบสนองคืออะไร?
React Context เป็นวิธีการแบ่งปันข้อมูลระหว่างส่วนประกอบในแอปพลิเคชัน React โดยไม่ต้องส่งอุปกรณ์ประกอบฉากผ่านแผนผังส่วนประกอบทุกระดับ แต่คุณสามารถสร้างวัตถุบริบทและส่งต่อไปยังส่วนประกอบใดๆ ที่ต้องการได้
นี่คือตัวอย่างวิธีสร้างวัตถุบริบท:
const MyContext = React.createContext(defaultValue);
พารามิเตอร์ defaultValue
เป็นทางเลือกและสามารถใช้เพื่อตั้งค่าเริ่มต้นสำหรับบริบทได้ หากไม่ได้ระบุไว้ในองค์ประกอบหลัก
วิธีใช้บริบทโต้ตอบ
หากต้องการใช้วัตถุบริบท คุณต้องใช้สององค์ประกอบ: ผู้ให้บริการและผู้บริโภค
ส่วนประกอบของผู้ให้บริการใช้เพื่อตัดส่วนประกอบใด ๆ ที่ต้องการเข้าถึงบริบท นี่คือตัวอย่าง:
<MyContext.Provider value={/* some value */}> <MyComponent /> </MyContext.Provider>
ในตัวอย่างนี้ MyContext.Provider
คือคอมโพเนนต์ของผู้ให้บริการ และ MyComponent
เป็นคอมโพเนนต์ย่อยที่ต้องการเข้าถึงบริบท
หากต้องการเข้าถึงบริบทใน MyComponent
คุณต้องใช้องค์ประกอบผู้บริโภค นี่คือตัวอย่าง:
<MyContext.Consumer> {value => /* render something with value */} </MyContext.Consumer>
ในตัวอย่างนี้ MyContext.Consumer
คือส่วนประกอบของผู้บริโภค และพารามิเตอร์ value
คือค่าที่ส่งผ่านโดยส่วนประกอบของผู้ให้บริการ
ตัวอย่างที่สมบูรณ์
องค์ประกอบบริบทของหน้ารายการโปรด:
import { createContext, useState } from “react”; const FavoritesContext = createContext({ favorites: [], totalFavorites: 0, }); function itemIsFavoriteHandler(meetupId){ return userFavorites.some(meeetup=> meetup.id===meetupId) } const context = { favorites: userFavorites, totalFavorites: userFavorites.length, itemIsFavorite: itemIsFavoriteHandler } return <FavoritesContext.Provider value={context}> {props.children} </FavoritesContext.Provider> } export default FavoritesContext;
ในตัวอย่างนี้ เราจะสร้างบริบทที่เรียกว่า 'FavoritesContext' ซึ่งมีอาร์เรย์ของ 'รายการโปรด' และการนับของ 'totalFavorites' จากนั้นเราสร้างวัตถุ 'context' เพื่อใช้สำหรับเสาค่าภายใน ‹FavoritesContext.Provider› จากนั้นเราใช้ '{props.children}' เพื่อส่งองค์ประกอบย่อยทั้งหมดลงไปตามแผนผัง ด้วยวิธีนี้คอมโพเนนต์ย่อยทั้งหมดจะสามารถ 'useContext(FavoritesContext)' และเข้าถึงออบเจ็กต์ 'รายการโปรด' และค่า 'totalFavorites'
เมื่อใดควรใช้บริบทโต้ตอบ
React Context เป็นเครื่องมือที่ทรงพลัง แต่ก็ไม่จำเป็นเสมอไปที่จะใช้งาน ต่อไปนี้เป็นบางสถานการณ์ที่การใช้ React Context อาจเหมาะสม:
- เมื่อคุณมีข้อมูลที่จำเป็นต้องแบ่งปันโดยองค์ประกอบหลายอย่างที่ไม่เกี่ยวข้องกันโดยตรง
- เมื่อคุณมีข้อมูลที่จำเป็นต้องเข้าถึงโดยส่วนประกอบที่ซ้อนกันแบบลึก
- เมื่อคุณมีข้อมูลที่จำเป็นต้องเข้าถึงโดยส่วนประกอบจำนวนมาก
โดยทั่วไป คุณควรหลีกเลี่ยงการใช้ React Context สำหรับข้อมูลที่ต้องการเข้าถึงโดยองค์ประกอบที่เกี่ยวข้องกันเพียงไม่กี่อย่างเท่านั้น ในสถานการณ์เหล่านั้น การส่งอุปกรณ์ประกอบฉากลงไปตามแผนผังส่วนประกอบมักจะเพียงพอแล้ว
บทสรุป
React Context เป็นฟีเจอร์อันทรงพลังที่ช่วยให้แชร์ข้อมูลระหว่างส่วนประกอบต่างๆ ในแอปพลิเคชัน React ได้ง่ายขึ้น ด้วยการใช้วัตถุบริบท คุณสามารถหลีกเลี่ยงการส่งอุปกรณ์ประกอบฉากผ่านทุกระดับของแผนผังส่วนประกอบ และทำให้โค้ดของคุณสามารถอ่านและบำรุงรักษาได้มากขึ้น
อย่างไรก็ตาม สิ่งสำคัญคือต้องใช้ React Context อย่างรอบคอบและเมื่อเหมาะสมเท่านั้น เมื่อพิจารณาอย่างรอบคอบว่าเมื่อใดควรใช้ React Context และเมื่อใดควรใช้เทคนิคอื่นๆ เช่น การส่งผ่านอุปกรณ์ประกอบฉาก คุณสามารถเขียนโค้ดที่สะอาดตา บำรุงรักษาได้มากขึ้น และทำให้แอปพลิเคชัน React ของคุณมีประสิทธิภาพและเข้าใจง่ายขึ้น