هوک useContext ری اکت و بررسی تخصصی Context API ری اکت !

16 مرداد 1402
ارسال شده توسط
ری اکت
هوک useContext - هوک useContext ری اکت - Context Api ری اکت - آموزش useContext ری اکت - useContext چیست

هوک useContext ری اکت ، یکی از مهمترین و پرکاربرد ترین هوک هایی هست که هر ری اکت دِوِلوپری باید درک عمیقی نسبت بهش داشته باشه 🙂

پس آماده باشید که بریم تخصصی Context Api ری اکت رو بررسی کنیم …

هوک useContext چیست ؟

قبل از هر صحبتی ، بهتره ببینیم خود React چه تعریفی از این هوک داره :

هوک useContext ری اکت ، یک روش برای انتقال داده ها بین کامپوننت های مختلف اپیکیشن، بدون استفاده از Props هست .

منبع : داکیومنت ری اکت

انتقال داده تو ری اکت بین کامپوننت های مختلف به 2 روش انجام میشه :

هوک useContext - هوک useContext ری اکت - Context Api ری اکت - آموزش useContext ری اکت - useContext چیست

به تصویر بالا دقت کنید . . .

انتقال داده به روش React Props

تو این روش اگر نیاز باشه که دیتایی رو از کامپوننت 1 به کامپوننت 4 انتقال بدیم باید مراحل زیر رو طی کنیم :

انتقال Data از کامپوننت 1 به 2

انتقال Data از کامپوننت 2 به 3

انتقال Data از کامپوننت 3 به 4

بزرگترین مشکلی که تو این روش داریم ، اینه که دیتای ما داره به کامپوننت هایی ارسال میشه که تو اون کامپوننت ها اصلا به اون دیتا ها نیاز نداریم !!

در واقع تو کامپوننت 2 ما نیازی به اون دیتا ها نداریم ولی برای اینکه بتونیم دیتای خودمون رو به کامپوننت شماره 4 برسونیم ، باید از کامپوننت شماره 2 و 3 هم عبورشون بدیم .

حالا فرض کنید تعداد کامپوننت های درخت ما 20 تا باشه و بخوایم یه دیتایی رو از کامپوننت 1 به آخرین فرزند این درخت ( کامپوننت 20 ) بفرستیم ، اینجوری باید اون Data رو از طریق تک تک Component ها انتقال بدیم .

به اینکار میگن Props Drilling و اصلا اصلا پیشنهاد نمیشه !

اما خبر خوب اینه که یه روش بهتری برای اینجور وقتا داریم به اسم Context یا همون useContext 🙂

انتقال داده به روش React Context

اگه به تصویر بالا دقت کنید ، یک Context ساختیم که نقش منبع دیتا رو ایفا میکنه .

حالا از تمامی کامپوننت هایی که داریم ، میتونیم به این منبع Data بصورت مستقیم دسترسی داشته باشیم .

دیگه اینجا مشکل Props Drilling نداریم !

خیلی راحت از کامپوننت شماره 4 به Data مورد نیاز دسترسی پیدا کردیم، بدون اینکه اون Data رو وارد کامپوننت های دیگه بکنیم .

در حقیقت React Context یک روش انتقال داده بین کامپوننت های مختلف اپیکیشن شماست بدون توجه به عمق اون Component !

موارد استفاده از Context Api کدامند ؟

از Context در ری اکت برای به اشتراک گذاری دیتا های Global مثل تنظیمات کاربر ، تم ( دارک مود و لایت مود ) و … میشه استفاده کرد.

ایده اصلی Context این هست که به ما اجازه میده یک مقدار رو بین کامپوننت های مختلف به اشتراک بزاریم و هر زمان این مقدار تغییر کرد ، اون کامپوننتی که از مقدارمون استفاده کرده بوده ، مجدد رندر بشه .

در حقیقت بهتره بگیم از Context برای به اشتراک گذاری State هایی استفاده میکنیم که میخوایم تو بخش های مختلف اپیکیشن در دسترس باشن .

مواردی مثل :

  • تم سایت ( دارک مود / لایت مود )
  • تنظیمات سایت
  • نام و اطلاعات کاربر احراز شده ( وارد شده )
  • تنظیمات کاربر
  • زبان سایت ( سایت های 2 زبانه )
هوک useContext - هوک useContext ری اکت - Context Api ری اکت - آموزش useContext ری اکت - useContext چیست

چطور از Context ری اکت استفاده کنیم ؟

برای استفاده از Context در React باید 3 مرحله انجام داد :

مرحله 1

Create Context

مرحله 2

Providing The Context

مرحله 3

Consuming The Context

مرحله 1 – Create Context

برای اینکه یک Context بسازید ، میتونید از تابع داخلی خود ری اکت برای انجام اینکار استفاده کنید.

در واقع خود React یک تابع در اختیار ما گذاشته به نام createContext که بصورت زیر میتونیم ازش استفاده کنیم .

تابع createContext یک ورودی اختیاری از ما میگیره که میتونیم این مقدار رو هم بهش ندیم.

				
					import { createContext } from 'react'; // تابع خود ری اکت برای ساخت کانتکست

export const Context = createContext('یه مقداری');

مرحله 2 – Providing The Context ( دسترسی دادن به مقدار Context )

برای اینکه بتونید از State یا مقدار ذخیره شده تو Context در کل اپیکیشن/کامپوننت ها استفاده کنید ، باید اون state/مقدار رو به کامپوننت های خودتون ارائه بدید ( Provide کنید ) .

به تیکه کد زیر دقت کنید تا توضیح رو هم بگم :

 

				
					import { Context } from './context'; // این همون کانتکستی هست که در تیکه کد قبلی ساختیمش

function App() {
  const value = 'مقداری که میخوایم تو اپیکیشن ازش استفاده کنیم';
  return (
    <Context.Provider value={value}>
      <MyComponent />
    </Context.Provider>
  );
}

تو تیکه کد بالا ، ابتدا Contextی که ساخته بودیم رو import کردیم داخل روت پروژه ( فایل App.js )

داخل متغیر value مقداری رو مینویسیم که میخوایم تو کل اپیکیشن بهش دسترسی داشته باشیم مثل تنظیمات کاربر / حالت Theme ( دارک مود/لایت مود) و ..

حالا کل اپیکیشن رو به عنوان Children به Context.Provider میدیم . ( مطابق خط 6 )

در واقع تمامی کامپوننت هایی به  مقدار value دسترسی دارن ( مقدار خط 4 ) که به عنوان فرزند Context.Provider قرار گرفتن . ( تو این مثال، کامپوننت MyComponent و تمامی فرزندانش به مقدار value دسترسی دارن )

مرحله 3 – Consuming The Context ( استفاده از مقادیر / State ها )

حالا که تونستیم یک state یا مقدار رو تو کل اپیکیشن Share کنیم ، وقت این رسیده که از این مقدار استفاده کنیم .

برای استفاده کردن از مقادیر Share شده توسط Context ، میتونیم از 2 روش استفاده کنیم .

روش اول استفاده از هوک useContext ری اکت  هست :

				
					import { useContext } from 'react'; // فراخوانی هوک یوز کانتکست
import { Context } from './context'; // همون کانتکستی که در مراحل قبل ساختیم

function MyComponent() {
  const value = useContext(Context); // دریافت مقدار - get Context Value

  return <span>{value}</span>; // نمایش مقدار - Show Context Value
}

تو تیکه کد بالا از هوک useContext برای دریافت مقدار Share شده توسط context استفاده کردیم.

روش دوم استفاده از مقدار share شده توسط Context ، استفاده از Context.Consumer هست .

برای اینکار میتونید مثل مثال زیر عمل کنید :

				
					import { Context } from './context';

function MyComponent() {
  return (
    <Context.Consumer>
      {value => <span>{value}</span>}
    </Context.Consumer>
  );
}

تو روش بالا ، از هوک useContext استفاده نکردیم.

اگر بین روش useContext و Context.Consumer بخوایم یکی رو انتخاب کنیم، useContext انتخاب بهتری میتونه باشه .

هوک useContext در React چیست ؟

تصویر بالا یه مثال ساده از پروژه ای هست که داخلش از Context استفاده کردیم .

تو بخش Provider مشخص کردیم که از این Context قراره تو چه کامپوننت هایی استفاده کنیم .

این کامپوننت ها باید به عنوان children برای Context.Provider قرار بگیرن .

تو بخش Context ، مقداری که میخوایم تو بخش های مختلف پروژه بین کامپوننت ها ازش استفاده کنیم رو قرار میدیم .

حالا تو هر کامپوننتی که دلمون بخواد ( مثل کامپوننت شماره 4 ) میتونیم از مقدار Share شده توسط Context استفاده کنیم . ( توسط useContext )

 

درصورت تغییر مقدار Context چه اتفاقی میوفته ؟

اگر شما یک مقدار رو توسط Context به کامپوننت هاتون پاس داده باشید و این مقدار تغییر بکنه ، خود Context به تمام Consumer ها اطلاع میده که re-Render بشن !

چطور مقدار Context رو آپدیت کنیم ؟

هوک useContext - آموزش useContext - کانتکست ری اکت - آموزش context ری اکت

خود Context Api چنین قابلیتی به ما ارائه نداده که بتونیم مقدار/State خودمون تو Context رو آپدیت کنیم .

اما میشه با کمک هوک useState یا هوک useReducer این کار رو به سادگی انجام داد .

تیکه کد پایین یه مثال جامع از همه چیزاییه که تو این مقاله راجبش صحبت کردیم ، اگه متوجهش نشدید ، نگران نباشید همرو توضیح میدم :

				
					import { createContext, useState, useContext, useMemo } from 'react';

const UserContext = createContext({
  userName: '',
  setUserName: () => {},
});

function Application() {
  const [userName, setUserName] = useState('John Smith');
  const value = useMemo(
    () => ({ userName, setUserName }), 
    [userName]
  );
  
  return (
    <UserContext.Provider value={value}>
      {useMemo(() => (
        <>
          <UserNameInput />
          <UserInfo />
        </>
      ), [])}
    </UserContext.Provider>
  );
}

function UserNameInput() {
  const { userName, setUserName } = useContext(UserContext);
  const changeHandler = event => setUserName(event.target.value);

  return (
    <input
      type="text"
      value={userName}
      onChange={changeHandler}
    />
  );
}

function UserInfo() {
  const { userName } = useContext(UserContext);
  return <span>{userName}</span>;
}

تو خط 2 یه Context ایجاد کردیم که میخوایم توسط این Context ، نام کاربری یوزر رو ذخیره کنیم و درصورت نیاز اون رو آپدیت کنیم .

کامپوننت UserNameInput مقدار Context رو از جایی که userName و setUserName استخراج شده ، میخونه.

 اینجا میتونیم مقدار Context رو توسط setUserName(newValueOfContext) آپدیت کنیم .

کامپوننت UserInfo یه کامپوننته که مقدار userName رو نشون میده !

 یه نکته مهم اینجا وجود داره و اون این هست که اگه تابع setUserName در UserNameInput صدا زده بشه و مقدار userName تغییر کنه ، کامپوننت UserInfo هم re-Render میشه .

یه نکته هم راجب کامپوننت Application وجود داره : اینکه  مقدار Context رو memoize کردیم.

 در حقیقت Memoization مقدار Context باعث میشه تا زمانیکه userName تغییری نکرده ، هیچ re-Render اضافه ای اینجا صورت نگیره .

کاربرد های واقعی Context Api ری اکت در پروژه های واقعی

چند کاربر useContext در React که توی پروژه های واقعی میتونیم ازش استفاده کنیم :

مدیریت Theme با Context Api ری اکت

میتونیم حالت Theme پروژمون رو با Context مدیریت کنیم . ( دارک مود / لایت مود )

در واقع اگه کاربر حالت Theme رو تغییر بده ، تمامی اجزای سایت با حالت جدید تغییر میکنن .

احراز هویت کاربر

برای بحث Authentication هم میتونید از Context Api ری اکت استفاده کنید .

در واقع اطلاعات کاربری که login کرده رو ذخیره میکنید و در بخش های مختلف از اون اطلاعات استفاده میکنید .

مثلا تو هدر اسمش رو بهش نشون میدید و در بخش سایدبار مقدار کیف پولش رو بهش نشون میدید .

چند زبانه کردن سایت با Context

شما میتونید وبسایت چند زبانه React خودتون رو با Context مدیریت کنید .

در واقع شما باید زبان فعلی کاربر رو ذخیره کنید و درصورت تغییر زبان فعلی ، بخش های مورد نیاز سایت که باید تغییر کنن رو تغییر بدید.

 

جمع بندی

هوک useContext ری اکت به ما این امکان رو میده که state ها یا مقدار های گلوبال اپیکیشن خودمون رو بین کامپوننت های خودمون به اشتراک بزاریم ( بدون در نظر گرفتن اینکه چقدر تو درخت کامپوننت هامون عمیق هستن )

فقط یادتون باشه که هرجایی و الکی از هوک useContext در react استفاده نکنید !

گاهی اوغات که کامپوننت ما خیلی عمیق نیست میتونیم اون Data رو با Props بهش منتقل کنیم .

تو این مقاله به آموزش useContext ری اکت پرداختیم ، امیدوارم متوجه شده باشید که useContext چیست و کاربردش چیه 🙂

ایده اصلی Context Api ری اکت این هست که به ما اجازه میده یک مقدار رو بین کامپوننت های مختلف به اشتراک بزاریم و هر زمان این مقدار تغییر کرد ، اون کامپوننتی که از مقدارمون استفاده کرده بوده ، مجدد رندر بشه .

در موارد زیر پیشنهاد میشه از Context Api ری اکت استفاده کنید :

  • تم سایت ( دارک مود / لایت مود )
  • تنظیمات سایت
  • نام کاربر احراز شده ( وارد شده )
  • تنظیمات کاربر
  • زبان سایت ( سایت های 2 زبانه )

+ هرجایی که دیتای Global داشتید و نمیخواستید Props Drilling اتفاق بیوفته.

از هوک useContext تو ری اکت میتونیم برای دسترسی به مقدار Context استفاده کنیم .

توسط هوک createContext تو ری اکت میتونیم یک Context ایجاد کنیم.

سوالات متداول فِرانت اِندی
درباره احمد احمدنژاد

من یه برنامه نویس و توسعه دهنده وب هستم که عاشق دنیای صفر و یکم❤️

8 دیدگاه

به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.

  • سلام واقعا عالی توضیح داده بودین
    من چندتا مقاله مختلف راجب Context ری اکت خوندم ولی هیچی نفهمیده بودم.
    خیلی ساده و روون توضیحش دادید

    پاسخ

    • سلام و درود
      خواهش میکنم بزرگوار خوشحالم که براتون مفید بوده 🙂

      پاسخ

    • سلام خانم سلیمانی خیلی خوشحالم که براتون مفید واقع شده و مرسی از نظر ارزشمندتون 🙂

      پاسخ

  • سلام، ممنون از مطلب خیلی خوبتون
    یه سوال دارم، توی مواردی که کار خیلی گسترده، پیچیده و عمیقه میشه از تعداد زیادی Context (تو در تو) استفاده کرد؟ مشکلی به وجود نمیاره؟ (فرض کنید مثلا 10 تا Context درون هم)

    پاسخ

    • سلام محسن جان زنده باشی
      در مواردی که Global State های پیچیده ای داریم ( مثل موردی که شما مطرح کردی ) بهتره از کتابخانه های State Management استفاده کنیم که بطور تخصصی و بهینه چنین مواردی رو هندل میکنن.

      یکی از باحال ترینشون Zustand هست :
      https://frontendi.com/zustand-in-react/

      و ریداکس که خیلی معروفه :
      https://frontendi.com/redux-in-react/

      پاسخ

دیدگاهتان را بنویسید