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

React เป็นการผูกข้อมูลแบบทางเดียว!

มาทำความเข้าใจกันก่อนว่าการผูกข้อมูลคืออะไร
การผูกข้อมูลเป็นกระบวนการสร้างการเชื่อมต่อระหว่าง UI และข้อมูล เมื่อใดก็ตามที่ข้อมูลนี้มีการเปลี่ยนแปลง องค์ประกอบ UI จะได้รับการอัปเดต

การผูกข้อมูลทางเดียวคืออะไร
One-way Data Binding หมายถึง ข้อมูลจะไหลไปในทิศทางเดียวเท่านั้น กล่าวคือ ไฟล์ JavaScript ไฟล์เดียวเท่านั้นที่จะส่งข้อมูลไปยังไฟล์ HTML ดังนั้นข้อมูลจะไหลไปในทางเดียวเท่านั้น

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

สถานะจะถูกส่งผ่านจากพาเรนต์ไปยังลูกและมุมมอง เหตุการณ์ที่ทริกเกอร์จากมุมมองนั้นสามารถอัปเดตสถานะได้

บริบทการตอบสนองคืออะไร

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

รัฐซึ่งประกาศที่ระดับบนสุด (สีน้ำเงิน) จะต้องเดินทางผ่านส่วนประกอบตัวกลาง (สีดำ) เพื่อไปยังส่วนประกอบระดับล่างสุด (สีแดง)

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

บริบทจะใช้ข้อมูลจากพาเรนต์และจัดเตรียมให้กับลูกโดยไม่ต้องผ่านองค์ประกอบตรงกลาง

บริบทสามารถมีข้อมูลเช่น:

• รัฐทั่วโลก
• ธีม
• การกำหนดค่าแอปพลิเคชัน
• ชื่อผู้ใช้ที่รับรองความถูกต้อง
• การตั้งค่าผู้ใช้
• ภาษาที่ต้องการ
• รวบรวมบริการต่างๆ

การใช้บริบทในแอปพลิเคชัน

สำหรับการสร้างบริบทของข้อมูล เราทำตามขั้นตอนสามขั้นตอนเหล่านี้:

• การสร้างบริบท
• ให้บริบท
• ใช้บริบท

สำหรับการสร้างบริบทใน React เราใช้createContextซึ่งเป็นฟังก์ชันในตัวสำหรับสร้างบริบท ตัวอย่างเช่น ลองดูที่ฟังก์ชันการสลับธีมสำหรับแอปพลิเคชันของเรา

export const ThemeContext = createContext(null);

ให้บริบท

ในการอนุญาตให้เข้าถึงข้อมูลบริบทโดยส่วนประกอบย่อย จะต้องระบุส่วนประกอบที่เกี่ยวข้องในแผนผัง

export default function App() {
  const [style, setStyle] = useState("light");

  function toggleStyle() {
    setStyle((style) => (style === "light" ? "dark" : "light"));
  }

  return (
    <ThemeContext.Provider
      value={{ style, toggleStyle}}
    >
      <Content /> //The child component
    </ThemeContext.Provider>
  );
}

การใช้บริบท

สำหรับการใช้บริบทเราสามารถใช้useContexthook หรือThemeContext.Consumerwhich เป็นอินสแตนซ์ของบริบทก็ได้ ในตัวอย่างของเรา เรากำลังใช้useContextตะขอ

import { useContext } from "react";
import { ThemeContext } from "./App";

function Theme() {
  const { style, toggleStyle } = useContext(
    ThemeContext
  );

  return (
    <div>
      <p>
        The theme is {style}.
      </p>
      <button onClick={toggleStyle}>Change Theme</button>
    </div>
  );
}

export default Theme;

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

ขอบคุณที่อ่านบล็อก ติดตามเพิ่มเติม

ลิงค์อิน —https://linkedin.com/in/joshiomkar04
ทวิตเตอร์ —https://twitter.com/ye_joshya