Hook ของ React useContextเป็นเครื่องมือที่ทรงพลังสำหรับการแชร์สถานะระหว่างส่วนประกอบต่างๆ โดยไม่ต้องส่งข้อมูลผ่านอุปกรณ์ประกอบฉากที่ยาวเหยียด ด้วยuseContextคุณสามารถแบ่งปันสถานะในแผนผังองค์ประกอบทั้งหมดได้อย่างง่ายดาย ทำให้เป็นเครื่องมือที่มีประโยชน์สำหรับการจัดการสถานะส่วนกลาง

ในบทความนี้ เราจะสำรวจพื้นฐานของuseContexthook และดูว่าเราจะใช้มันเพื่อจัดการสถานะในแอปพลิเคชัน React ของเราได้อย่างไร

คืออะไรuseContext?

useContextเป็น React hook ในตัวที่ให้คุณใช้ข้อมูลจากบริบทที่สร้างโดยองค์ประกอบหลัก บริบทคือวัตถุที่เก็บข้อมูลสถานะที่ใช้ร่วมกันซึ่งสามารถเข้าถึงได้โดยส่วนประกอบใดๆ ที่เป็นลูกหลานของส่วนประกอบที่สร้างบริบท

hook useContextใช้วัตถุบริบทเป็นอาร์กิวเมนต์และส่งกลับค่าปัจจุบันของบริบทนั้น ซึ่งหมายความว่าการอัปเดตบริบทใด ๆ จะทริกเกอร์การแสดงผลซ้ำของส่วนประกอบทั้งหมดที่ใช้งานโดยอัตโนมัติ

วิธีใช้useContext?

ในการใช้งานuseContextก่อนอื่นเราต้องสร้างวัตถุบริบท เราสามารถทำได้โดยใช้createContextวิธีการจากReactห้องสมุด นี่คือตัวอย่าง:

import React from 'react';

const MyContext = React.createContext();

import React from 'react';

const MyContext = React.createContext();

function App() {
  const [count, setCount] = React.useState(0);

  return (
    <MyContext.Provider value={{ count, setCount }}>
      <div>
        <h1>Count: {count}</h1>
        <Counter />
      </div>
    </MyContext.Provider>
  );
}

function Counter() {
  const { count, setCount } = React.useContext(MyContext);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

คอมโพเนนต์Appกำลังรวมคอมโพเนนต์ลูกไว้ในMyContext.Providerคอมโพเนนต์ และส่งค่าปัจจุบันของสถานะที่ใช้ร่วมกันเป็นvalueprop ในกรณีนี้ ค่าคือวัตถุที่มีcountสถานะและsetCountฟังก์ชัน

ส่วนประกอบCounterกำลังใช้MyContextวัตถุโดยใช้useContexthook และแยกcountสถานะและsetCountฟังก์ชันออกจากวัตถุบริบท จากนั้นเรากำลังใช้incrementฟังก์ชันเพื่ออัปเดตสถานะที่ใช้ร่วมกันเมื่อคลิกปุ่ม

ใช้เมื่อไหร่useContext?

useContextมีประโยชน์มากที่สุดสำหรับการจัดการสถานะส่วนกลางที่ต้องเข้าถึงโดยส่วนประกอบต่างๆ ตลอดทั้งแอปพลิเคชัน เป็นทางเลือกที่ดีสำหรับกรณีที่การเจาะเสาเป็นเรื่องยุ่งยากหรือกรณีที่คุณต้องการหลีกเลี่ยงการผ่านสถานะผ่านส่วนประกอบหลายชั้น

useContextยังเป็นทางเลือกที่ดีสำหรับกรณีที่คุณต้องการส่งฟังก์ชันผ่านแผนผังส่วนประกอบ ด้วยการส่งฟังก์ชันผ่านวัตถุบริบท คุณสามารถหลีกเลี่ยงการส่งผ่านองค์ประกอบหลายชั้น

บทสรุป

hook useContextเป็นเครื่องมือที่ทรงพลังสำหรับการจัดการสถานะส่วนกลาง

ฉันหวังว่าจะอธิบายคุณได้ทั้งหมด