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

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

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

قبل از هر صحبتی ، بهتره ببینیم خود React چه تعریفی از این هوک داره :
هوک useContext ری اکت ، یک روش برای انتقال داده ها بین کامپوننت های مختلف اپیکیشن، بدون استفاده از Props هست .

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

به تصویر بالا دقت کنید . . .
انتقال داده به روش 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 زبانه )

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

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

مرحله 1 – Create Context

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

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

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

i`mport { 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ی که ساخته بودیم رو import کردیم داخل روت پروژه ( فایل App.js )

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

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

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

برای مطالعه نسخه کامل و راستچین مقاله لطفا روی لینک زیر کلیک کنید :
useContext در ری اکت