การเรียนรู้ useContext: เจาะลึกเข้าไปใน Context API ของ React

วันนี้เราจะพูดถึงการใช้ useContext hook ใน React ซึ่งช่วยให้สามารถแบ่งปันข้อมูลระหว่างส่วนประกอบได้อย่างมีประสิทธิภาพและทำให้การสื่อสารส่วนประกอบง่ายขึ้น

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

นี่คือตัวอย่างวิธีใช้useContexthook ในส่วนประกอบ React:

import React, { useContext } from 'react';

// Create the context
const MyContext = React.createContext();

// Provide a context value
function MyProvider({ children }) {
  const [value, setValue] = React.useState("Hello, World!");
  const providerValue = { value, setValue };
  return <MyContext.Provider value={providerValue}>{children}</MyContext.Provider>;
}

function MyComponent() {
  // Use the context
  const { value, setValue } = useContext(MyContext);

  return (
    <div>
        <p>{value}</p>
        <button onClick={() => setValue('Hello, React!')}>Change Value</button>
    </div>
  );
}

function App() {
  return (
    <MyProvider>
      <MyComponent />
    </MyProvider>
  );
}

คอมโพเนนต์MyProviderคือคอมโพเนนต์ที่ให้ค่ากับบริบท มันใช้useStateเบ็ดเพื่อตั้งค่าเริ่มต้นสำหรับบริบท จากMyProviderนั้นคอมโพเนนต์จะMyContext.Providerเรนเดอร์องค์ประกอบ ซึ่งล้อมองค์ประกอบย่อยและให้ค่าแก่บริบท และvalueจะsetValueถูกส่งผ่านเป็นวัตถุเดียวไปยังผู้ให้บริการ

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

จากMyComponentนั้นคอมโพเนนต์จะแสดงองค์ประกอบ div ด้วยองค์ประกอบย่อหน้าที่แสดงค่าจากบริบทและองค์ประกอบปุ่ม เมื่อคลิกปุ่ม จะเรียกใช้ฟังก์ชัน setValue ซึ่งจะเปลี่ยนค่าของบริบทและแสดงผลองค์ประกอบอีกครั้งเป็น แสดงค่าที่อัพเดท

สุดท้ายAppส่วนประกอบคือส่วนประกอบระดับบนสุดที่แสดงMyProviderส่วนประกอบและMyComponentส่วนประกอบ ส่วนประกอบนี้มีหน้าที่รับผิดชอบในการจัดหาค่าบริบทให้กับMyProviderส่วนประกอบและแสดงผลMyComponentส่วนประกอบ

เมื่อคอมโพเนนต์ App ถูกเรนเดอร์ มันเรนเดอร์คอมโพเนนต์ MyProvider ซึ่งจะตั้งค่าสำหรับบริบท และคอมโพเนนต์ MyComponent ซึ่งจะดึงค่าจากบริบทโดยใช้useContexthook

จากตัวอย่างนี้ คุณจะเห็นวิธีที่useContexthook ช่วยให้คุณแบ่งปันค่าระหว่างส่วนประกอบต่างๆ ได้อย่างง่ายดาย โดยไม่ต้องส่งค่าผ่านหลายระดับของแผนผังส่วนประกอบ

หวังว่าคุณจะชอบมัน

มีความสุขในการเข้ารหัส!

ต้องการให้คำแนะนำ:-

พบฉันบนLinkedIn Twitter

ส่งอีเมลถึงฉันที่[email protected]