Context ใน React
ก่อนที่จะศึกษาฮุคต่อไป เราจำเป็นต้องพิจารณา แนวคิดของContext ใน React ก่อน
ปกติเราจะส่งข้อมูลจากคอมโพเนนต์ผู้ปกครอง
ไปยังคอมโพเนนต์ลูกโดยใช้
พร็อพ
วิธีนี้ดีถ้าคุณมีคอมโพเนนต์ไม่มากและไม่จำเป็นต้องส่งต่อ
พร็อพจากผู้ปกครองไปยังคอมโพเนนต์ที่ต้องการผ่านคอมโพเนนต์ลูกหลายชั้น
เกิน2-3ครั้ง
วิธีนี้อาจสร้างความไม่สะดวกอย่างมากและนำไปสู่ปัญหาต่างๆ หากคอมโพเนนต์กลางไม่ได้ใช้พร็อพเหล่านี้เลย (ปัญหาเช่นนี้ เรียกว่าprop drilling) หรือหากคุณต้องการส่งข้อมูลเดียวกันไปยังคอมโพเนนต์จำนวนมาก
ในกรณีเหล่านี้Contextสามารถช่วยเราได้ ซึ่งทำให้ข้อมูลของคอมโพเนนต์ผู้ปกครอง สามารถเข้าถึงได้โดยคอมโพเนนต์ลูกใดๆ โดยไม่คำนึงถึงตำแหน่งของมันในต้นไม้คอมโพเนนต์ โดยไม่ต้องส่งผ่านพร็อพ ดังนั้น คอมโพเนนต์ที่รับข้อมูลจะเป็น เฉพาะคอมโพเนนต์ที่ต้องการข้อมูลนั้นเท่านั้น
เพื่อใช้งาน Context เราจำเป็นต้องสร้างมันขึ้นมาก่อน เริ่มต้นด้วยการสร้างไฟล์
MyContext.js และนำเข้าฟังก์ชัน
createContext:
import { createContext } from 'react';
ตอนนี้เราจะสร้างออบเจ็กต์ Context
เก็บไว้ในตัวแปรMyContext ซึ่งไม่ควรลืมส่งออก
ในกรณีของเรา เราได้กำหนดค่าเริ่มต้นในcreateContext
เป็นnull เนื่องจากค่าเริ่มต้นไม่สำคัญสำหรับเรา (สามารถเว้นว่างไว้ในวงเล็บได้)
ค่าเริ่มต้นที่กำหนดจะปรากฏเมื่ออ่าน Context หากไม่พบ
ค่าอื่นใด ค่านี้สามารถเป็นประเภทใดก็ได้:
export const MyContext = createContext(null);
ในบทเรียนถัดไป เราจะสร้างแอปพลิเคชัน จากหลายคอมโพเนนต์ที่อยู่ในไฟล์แยกต่างหาก หากคอมโพเนนต์ทั้งหมดอยู่ในไฟล์เดียว เราก็จะไม่สร้างไฟล์แยกสำหรับ Context และ ไม่จำเป็นต้องส่งออกมัน
ตอนนี้ให้นำเข้าMyContext.js
ไปยังคอมโพเนนต์Appที่ว่างเปล่า
ซึ่งเป็นคอมโพเนนต์ที่เราต้องการส่งข้อมูลจาก:
import { MyContext } from './MyContext.js';
สร้างไฟล์MyContext.js และ
นำเข้าไปยังคอมโพเนนต์Appที่ว่างเปล่า
ตามที่อธิบายในบทเรียน
