هوک useContext ری اکت ، یکی از مهمترین و پرکاربرد ترین هوک هایی هست که هر ری اکت دِوِلوپری باید درک عمیقی نسبت بهش داشته باشه ?
پس آماده باشید که بریم تخصصی Context Api ری اکت رو بررسی کنیم …
با فِرانت اِندی همراه باشید ...
قبل از هر صحبتی ، بهتره ببینیم خود React چه تعریفی از این هوک داره :
هوک useContext ری اکت ، یک روش برای انتقال داده ها بین کامپوننت های مختلف اپیکیشن، بدون استفاده از Props هست .
انتقال داده تو ری اکت بین کامپوننت های مختلف به 2 روش انجام میشه :
به تصویر بالا دقت کنید . . .
تو این روش اگر نیاز باشه که دیتایی رو از کامپوننت 1 به کامپوننت 4 انتقال بدیم باید مراحل زیر رو طی کنیم :
بزرگترین مشکلی که تو این روش داریم ، اینه که دیتای ما داره به کامپوننت هایی ارسال میشه که تو اون کامپوننت ها اصلا به اون دیتا ها نیاز نداریم !!
در واقع تو کامپوننت 2 ما نیازی به اون دیتا ها نداریم ولی برای اینکه بتونیم دیتای خودمون رو به کامپوننت شماره 4 برسونیم ، باید از کامپوننت شماره 2 و 3 هم عبورشون بدیم .
حالا فرض کنید تعداد کامپوننت های درخت ما 20 تا باشه و بخوایم یه دیتایی رو از کامپوننت 1 به آخرین فرزند این درخت ( کامپوننت 20 ) بفرستیم ، اینجوری باید اون Data رو از طریق تک تک Component ها انتقال بدیم .
به اینکار میگن Props Drilling و اصلا اصلا پیشنهاد نمیشه !
اما خبر خوب اینه که یه روش بهتری برای اینجور وقتا داریم به اسم Context یا همون useContext ?
اگه به تصویر بالا دقت کنید ، یک Context ساختیم که نقش منبع دیتا رو ایفا میکنه .
حالا از تمامی کامپوننت هایی که داریم ، میتونیم به این منبع Data بصورت مستقیم دسترسی داشته باشیم .
دیگه اینجا مشکل Props Drilling نداریم !
خیلی راحت از کامپوننت شماره 4 به Data مورد نیاز دسترسی پیدا کردیم، بدون اینکه اون Data رو وارد کامپوننت های دیگه بکنیم .
در حقیقت React Context یک روش انتقال داده بین کامپوننت های مختلف اپیکیشن شماست بدون توجه به عمق اون Component !
از Context در ری اکت برای به اشتراک گذاری دیتا های Global مثل تنظیمات کاربر ، تم ( دارک مود و لایت مود ) و … میشه استفاده کرد.
ایده اصلی Context این هست که به ما اجازه میده یک مقدار رو بین کامپوننت های مختلف به اشتراک بزاریم و هر زمان این مقدار تغییر کرد ، اون کامپوننتی که از مقدارمون استفاده کرده بوده ، مجدد رندر بشه .
در حقیقت بهتره بگیم از Context برای به اشتراک گذاری State هایی استفاده میکنیم که میخوایم تو بخش های مختلف اپیکیشن در دسترس باشن .
مواردی مثل :
برای استفاده از Context در React باید 3 مرحله انجام داد :
برای اینکه یک Context بسازید ، میتونید از تابع داخلی خود ری اکت برای انجام اینکار استفاده کنید.
در واقع خود React یک تابع در اختیار ما گذاشته به نام createContext که بصورت زیر میتونیم ازش استفاده کنیم .
تابع createContext یک ورودی اختیاری از ما میگیره که میتونیم این مقدار رو هم بهش ندیم.
برای اینکه بتونید از State یا مقدار ذخیره شده تو Context در کل اپیکیشن/کامپوننت ها استفاده کنید ، باید اون state/مقدار رو به کامپوننت های خودتون ارائه بدید ( Provide کنید ) .
حالا که تونستیم یک state یا مقدار رو تو کل اپیکیشن Share کنیم ، وقت این رسیده که از این مقدار استفاده کنیم .
برای استفاده کردن از مقادیر Share شده توسط Context ، میتونیم از 2 روش استفاده کنیم .
ادامه این مقاله تخصصی + کد های هر پاراگراف رو در لینک زیر مطالعه کنید :
