تسلط بر استفاده React’s useContext Hook: راهنمای جامع

به یک وبلاگ هیجان انگیز خوش آمدید که در آن سفری ماجراجویانه را در دنیای شگفت انگیز قلاب useContext در React آغاز می کنیم! برای جادوی React آماده شوید!

تصور کنید در یک ساختمان چهار طبقه هستید و خود را در طبقه آخر می بینید و بسته ای را در دست دارید که باید به کسی در طبقه دوم تحویل داده شود.

به جای پایین آمدن از پله ها، عبور از هر طبقه و تحویل بسته به هر فرد در طول مسیر تا رسیدن به گیرنده مورد نظر، راه حل کارآمدتری وجود دارد.

این ساختمان می تواند یک مرکز تحویل مرکزی داشته باشد، جایی که تمام بسته ها بر اساس طبقه جمع آوری و مرتب می شوند. شما می توانید بسته را در مرکز تحویل در طبقه چهارم تحویل دهید و پرسنل تحویل از رسیدن آن به طبقه دوم اطمینان حاصل می کنند.

در این سناریو، مرکز تحویل مرکزی، زمینه React را نشان می‌دهد. به عنوان یک مکان متمرکز برای مدیریت و توزیع بسته‌ها (داده‌ها) به طبقات (کامپوننت) مربوطه عمل می‌کند.

با استفاده از قلاب useContext، اجزای طبقه دوم (و هر طبقه دیگر) می توانند مستقیماً به بسته (داده ها) از متن دسترسی داشته باشند بدون اینکه نیازی به عبور آن از هر طبقه میانی (جزء) باشد.

با استفاده از قلاب useContext نیاز به انتقال بسته از فردی به فرد دیگر که مشابه حفاری پایه است برطرف می شود. کد زمانی تمیزتر و کارآمدتر می شود که اجزاء بتوانند مستقیماً به منابع مورد نیاز از متن دسترسی داشته باشند.

حفاری پایه چیست؟

حفاری حفاری به عمل انتقال داده‌ها یا پایه‌ها از سطوح مختلف اجزای یک درخت جزء اشاره دارد، حتی زمانی که اجزای میانی به طور مستقیم به آن داده‌ها نیاز ندارند. زمانی اتفاق می‌افتد که یک کامپوننت به اجزای فرزند خود نیاز دارد که آنها را به اجزای فرزند خود منتقل کند و غیره.

این می تواند منجر به افزونگی کد و کاهش قابلیت نگهداری شود، زیرا قطعات باید از طریق مؤلفه هایی منتقل شوند که در واقع از آنها استفاده نمی کنند. علاوه بر این، می‌تواند درک جریان داده‌ها را سخت‌تر کند و هنگام برخورد با اجزای عمیق تو در تو، دشوارتر شود.

بیایید این را نشان دهیم.

// Assuming FourthFloor.js is our Parent component

//FourhFloor.js
import React from 'react';
import ThirdFloor from './ThirdFloor';

const FourthFloor = () => {
  const packageData = {
    content: 'gift items',
    recipient: '3rd floor',
  };

  return <ThirdFloor packageData={packageData} />;
};

export default FourthFloor;

// ThirdFloor.js
import React from 'react';
import SecondFloor from './SecondFloor';

const ThirdFloor = ({ packageData }) => {
  return <SecondFloor packageData={packageData} />;
};

export default ThirdFloor;

// SecondFloor.js
import React from 'react';

const SecondFloor = ({ packageData }) => {
  const packageDataContent = packageData.content;


  return <p>{`package content : ${packageDataContent}`}</p>;
};

export default SecondFloor;

در مثال بالا، بسته ها از مولفه والد منتقل می شدند، FourthFloor، پایین به ThirdFloor و سپس به SecondFloor. با این حال، از آنجایی که SecondFloor جزء در واقع به داده های بسته نیاز ندارد، این منجر به عبور غیر ضروری از اجزای میانی می شود.

useContext Hook (React Context API)

حفاری Prop را می توان با استفاده از قلاب useContext به همراه React context API کاهش داد. این رویکردها به داده‌ها اجازه می‌دهند که توسط مؤلفه‌ها مستقیماً از یک منبع متمرکز بدون نیاز به عبور از اجزای میانی به داده‌ها دسترسی داشته باشند که منجر به کد تمیزتر و کارآمدتر می‌شود.

// PackageDataContext.js
import React, { createContext } from 'react';

const PackageDataContext = createContext();

export default PackageDataContext;

// FourthFloor.js
import React from 'react';
import ThirdFloor from './ThirdFloor';
import PackageDataContext from './PackageDataContext';

const FourthFloor = () => {
    const packageData = {
        content: 'gift items',
        recipient: '2nd floor',
    };

  return (
    <PackageDataContext.Provider value={packageData}>
      <ThirdFloor/>
    </PackageDataContext.Provider>
  );
};

export default FourthFloor;

// ThirdFloor.js
import React from 'react';
import SecondFloor from './SecondFloor';

const ThirdFloor = () => {
  return <SecondFloor />;
};

export default ThirdFloor;

// SecondFloor.js
import React, { useContext } from 'react';
import PackageDataContext from './PackageDataContext';

const SecondFloor = () => {
  const packageData = useContext(PackageDataContext);
  const packageDataContent = packageData.content;

  return <p>{`package content : ${packageDataContent}`}</p>;
};

export default SecondFloor;

در تظاهرات بالا، The PackageDataContext فایل یک شی زمینه جدید ایجاد می کند که اساساً محفظه ای برای داده است که می تواند بین اجزا به اشتراک گذاشته شود. این packageData شی به مولفه packageDataContext.Provider در قسمت ارسال می شود FourthFloor جزء. این ThirdFloor و SecondFloor سپس اجزا می توانند از useContext قلاب برای دسترسی به packageData از packageDataContext. این کار نیاز به پاس کردن را برطرف می کند packageData از طریق سطوح مختلف مؤلفه ها، که کد را خواناتر و قابل نگهداری تر می کند.

با درک کاملی از نحوه استفاده از قلاب useContext، اکنون ابزارهایی برای مقابله با چالش های پیچیده مدیریت ایالت با اطمینان دارید. به یاد داشته باشید که بهترین شیوه ها مانند سازماندهی ارائه دهندگان زمینه خود، در نظر گرفتن بهینه سازی عملکرد، و پذیرش اصول طراحی مدولار را به کار ببرید. همانطور که به سفر React خود ادامه می دهید، به کاوش و آزمایش قلاب useContext ادامه دهید، زیرا بدون شک نقش مهمی در جعبه ابزار توسعه شما خواهد داشت.

بنابراین، پیش بروید و از قدرت useContext استفاده کنید تا مهارت‌های React خود را ارتقا دهید و برنامه‌های استثنایی بسازید. کد نویسی مبارک!

زیز اینجا🚀
لطفاً برای مطالب بیشتر مرتبط با توسعه وب ما را لایک کنید، به اشتراک بگذارید و ما را دنبال کنید.