วิธีใช้ Context API ใน React.Js

Context คือ React API ที่สามารถส่งข้อมูลข้าม Component ได้โดยไม่ต้องส่งผ่าน Props เป็นทอด ๆ เหมาะกับโปรเจคขนาดใหญ่ ที่ต้องการลดความยุ่งยากในการจัดการข้อมูล

การส่งข้อมูลผ่าน 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 ดึงข้อมูลออกมานั่นเอง