คุณอาจอ่านข้อความนี้เพราะคุณตระหนักว่าแอป 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 ของคุณมีประสิทธิภาพและเข้าใจง่ายขึ้น