Context คือ React API ที่สามารถส่งข้อมูลข้าม Component ได้โดยไม่ต้องส่งผ่าน Props เป็นทอด ๆ เหมาะกับโปรเจคขนาดใหญ่ ที่ต้องการลดความยุ่งยากในการจัดการข้อมูล
การส่งข้อมูลผ่าน Props แบบเดิม
// Page1.js
import React from 'react'
import Page2 from 'Page2'
class Page1 extends React.Component {
constructor(props) {
super(props)
}
render() {
return <Page2 data="สวัสดีชาวโลก!" />
}
export default Page1
การส่งข้อมูลผ่าน Props แบบเดิม
// Page2.js
import React from 'react'
import Page4 from 'Page4'
class Page2 extends React.Component {
constructor(props) {
super(props)
}
render() {
return <Page4 data={this.props.data} />
}
}
export default Page2
การส่งข้อมูลผ่าน Props แบบเดิม
// Page4.js
import React from 'react'
class Page4 extends React.Component {
constructor(props) {
super(props)
}
render() {
return (
<div>
{this.props.data}
</div>
) //ผลลัพธ์คือ <div>สวัสดีชาวโลก!</div>
}
export default Page4
การส่งข้อมูลผ่าน Props วิธีนี้ ทำให้ต้องส่งข้อมูลไปเป็นทอด ๆ จาก Page1 > Page2 > Page4 เมื่อโปรเจคขยายใหญ่ขึ้น การแก้ไข Props ในแต่ละครั้ง อาจต้องไปไล่แก้ไขทุก ๆ ไฟล์ที่เกี่ยวข้อง ทำให้เกิดความยุ่งยากและเสียเวลา เพราะฉะนั้นลองเปลี่ยนมาใช้ Context แล้วชีวิตจะง่ายขึ้น
การส่งข้อมูลผ่าน Context
วิธีนี้ใช้ได้กับ Functional Component เท่านั้น
// การส่งข้อมูลผ่าน Context
// Page1.js
import React from 'react'
import Page2 from 'Page2'
const MyContext = React.createContext()
function Page1() {
return (
<MyContext.Provider value="สวัสดีชาวโลก" />
<Page2 />
</MyContext.Provider>
)
}
export { MyContext }
export default Page1
ประกาศตัวแปร const ชื่อContext = React.createContext() เพื่อทำการสร้าง Context หากอยากส่งข้อมูลไปใน Component ไหน แค่วางไว้ระหว่าง <ชื่อContext.Provider> วางตรงนี้จ้า </ชื่อContext.Provider> แล้วระบุข้อมูลที่ต้องการส่ง ลงไปในคุณลักษณะ value=”ข้อมูลที่จะส่ง” แค่นี้ข้อมูลก็ถูกส่งไปยัง Component ที่ต้องการแล้ว
// การส่งข้อมูลผ่าน Context
// Page2.js
import React from 'react'
import Page4 from 'Page4'
functions Page2() {
return <Page4 /> // ไม่ต้องระบุ Props ลงไปใน Component
}
export default Page2
// การส่งข้อมูลผ่าน Context
// Page4.js
import React, { useContext } from 'react'
import { MyContext } from "./Page1";
const contextData = useContext(MyContext);
function Page4 () {
return (<>{ contextData }</>) //ผลลัพธ์คือ สวัสดีชาวโลก!
}
export default Page4
สังเกตุได้ว่า เราสามารถดึงข้อมูลข้ามไปใช้ในหน้า Page4.js ได้โดยไม่ต้องระบุ Props อะไรลงไปในหน้า Page2.js เลย ไม่ว่าระหว่างทางจะมีกี่ Component ก็ส่งข้อมูลลงไปใน Component ย่อย ๆ ได้ทั้งหมด จะดึงข้อมูลมาแสดงใน Component ไหน ก็แค่ใช้ useContext ดึงข้อมูลออกมานั่นเอง
