درود دوستان! 🖐️ توی ریاکت برای مدیریت استیت (اطلاعات) برنامه همیشه یک دو راهی وجود داره اینه که چه اسکوپی رو برای یک استیت در نظر بگیریم. استیت گلوبال (Global State، اطلاعاتی که سرتاسر برنامه قابل دسترس هستن)، و استیت لوکال (Local State، اطلاعاتی که توی محدودهٔ کوچکتری از برنامه ساخته میشه و قابل دسترس هست). توی این پست میخوایم بررسی کنیم که چه زمانی کدوم اسکوپ رو به دیگری ترجیح بدیم.
این پست از مجموعه پستهای ریاکت ۱۰۱ هست که شامل مجموعهای از پستهای کوتاه و کاربردی ریاکتی هست.
لوکال استیت چیه؟ 🤔
به اطلاعاتی گفته میشه که دایره دسترسی محدودی دارن و معمولاً فقط توی یک کامپوننت تعریف میشن و قابل دسترسی هستن. توی ریاکت برای داشتن چنین استیتی از قابلیتهایی مثل useState و useReducer و یا useRef استفاده میکنیم.
گلوبال استیت چیه؟ 🤔
به اطلاعاتی گفته میشه که توی بیرونیترین قسمت برنامه تعریف میشن تا بتونن سر تا سر برنامه قابل دسترس باشن. برای این کار میتونیم از Context یا ابزارهای State Management مثل Redux استفاده کنیم.
نکاتی که هنگام ساختن استیت باید در نظر بگیریم
قبل از ساختن یک استیت میبایست معیارهایی رو در نظر داشته باشیم.
Encapsulation
مهمترین معیاری که باید در نظر داشته باشیم Encapsulation هست. به عبارت دیگه، حوزهٔ دسترسی به استیت تا جایی که امکان داره محدود باشه. برای مثال اطلاعات ما اگه فقط محدود به یک کامپوننت هست، باید اون رو به صورت لوکال ذخیره کنیم. این کار کمک میکنه وابستگی بین اجزا و کامپوننتها کمتر بشه و برنامهٔ قابل توسعه و تمیزتری داشته باشیم.
بررسی اسکوپ اطلاعات
اگه توی یک کامپوننت اطلاعاتی که داریم فقط محدود به همون کامپوننت هست، میبایست اون رو توی همون کامپوننت ذخیره و مدیریت کنیم. اگه اطلاعات قراره توسط کامپوننتهای فرزند استفاده بشن، باید سطح عمق ساختار والد-فرزند رو در نظر بگیریم. اشکالی نداره که برای یک ساختار ساده Parent -> Child همچنان از روشهایی مثل useState استفاده کنیم و اطلاعات رو با props به فرزند پاس بدیم. اما اگه عمق این ساختار بیشتر بشه، پاس دادن اطلاعات توسط props به اجزای داخلی (به قول معروف Prop Drilling) باعث ایجاد وابستگی و پیچیدگی توی ساختار میشه که توسعه برنامه رو سخت میکنه. پس باید به دنبال روشهایی باشیم که این وابستگیها رو حذف کنه. یکی از بهترین روشها استفاده از Context هست. استفاده از Context زمانی مناسب هست که اطلاعات ما توی دامنهٔ بیشتری باید در دسترس باشه. مثل یک گلوبال استیت کوچیک. استفاده از کانتکست هم محدودیتهایی داره و باید با دقت از اون استفاده کنیم. اگه اطلاعاتی که قصد نگهداری اون رو داریم مدام در حال تغییر هست، کانتکست با توجه به اینکه باعث رندرهای مجدد توی دامنهٔ بیشتری از برنامه میشه، گزینه مناسبی نمیتونه باشه. همچنین باید در نظر داشته باشیم که کانتکست رو نباید به قصد ذخیرهسازی «همه چیز» استفاده کنیم. یعنی اگه کانتکستی داریم که توی خودش هم کاربران و هم پستها رو ذخیره میکنه، بهتره به دو کانتکست UserContext و PostContext تقسیم بشه تا حوزه استفاده کوچیکتر و از اتفاقاتی مثل رندرهای اضافی جلوگیری بشه.
استفاده از ابزارهای State Management
این ابزارها برای مدیریت اطلاعاتی استفاده میشن که احتمال میدیم توی سر تا سر برنامه قراره از اونها استفاده بشه. مثل تم و اطلاعات کاربر. توی یک استیت گلوبال اطلاعاتی رو باید ذخیره کنیم که واقعاً نیاز هست و استفاده از استیت لوکال یا کانتکست نمیتونن چارهساز باشن.
خب دوستان امیدوارم از اطلاعاتی که بررسی کردیم استفاده کرده باشین. تا یه پست دیگه خدانگهدار 😉👋