فرانت اندی | FrontEndi
فرانت اندی | FrontEndi
خواندن ۴ دقیقه·۱ سال پیش

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


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

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

با فِرانت اِندی همراه باشید ...

هوک useContext چیست ؟

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

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


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

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

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

تو این روش اگر نیاز باشه که دیتایی رو از کامپوننت 1 به کامپوننت 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 یک ورودی اختیاری از ما میگیره که میتونیم این مقدار رو هم بهش ندیم.

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


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

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

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

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


ادامه این مقاله تخصصی + کد های هر پاراگراف رو در لینک زیر مطالعه کنید :

هوک useContext ری اکت

FrontEndi.com

ری اکتusecontextusecontext ری اکتآموزش usecontext ری اکتهوک usecontext
فرانت اِندی مرجع تخصصی فرانت اند برای فارسی زبانان است . هدف ما گردآوری و انتشار تخصصی ترین و بهترین مقالات و دوره های آموزشی حوزه فرانت اند در یک منبع فارسی زبان است .
شاید از این پست‌ها خوشتان بیاید