فرید شریعتی
فرید شریعتی
خواندن ۳ دقیقه·۳ سال پیش

معرفی State در ری اکت (React js)

  گفتم مطلب بدون عکس نباشه :)
گفتم مطلب بدون عکس نباشه :)


توی این مطلب میخوام به طور خلاصه یه معرفی از State ها داشته باشم برای کسی که اول راه یادگیری ری اکت هست یا حتی برای کسی که مدتیه داره کار میکنه و خب یهو براش سوال شده که state دقیقا ماجراش چیه ؟ خب ... بریم برای معرفی state :


به طور خلاصه state یک آبجکت هست که متعلق به خود ری اکته یعنی در اصل built-in هست و ما دیتای خودمون و یا اطلاعاتی که داریم رو توی این ابجکت ها ذخیره میکنیم و از اون ها برای مدیریت کامپوننت های ری اکتیمون استفاده میکنیم ... اما یکم بهتر اگه بخوام بگم ، استیت ها فقط اینجور نیستن که یه سری دیتا توشون ذخیره کنیم و اونارو بخونیم ، چون اون موقع فرقی با متغیر ندارن ! فرق استیت و متغیر اینجاست که متغیر ها با تموم شدن عملکرد فانکشنشون دیگه خبری ازشون نیست ولی استیت ها توسط خود ری اکت کنترل میشن یعنی تا مدت زمانی که کامپوننت هست این استیت ها هم وجود دارن و در طول زمانی که کامپوننت وجود داره ممکنه استیت ها تغییر کنن و باید بگم که استیت ها به نوعی درباره ی وضعیتی که کامپوننت ما داره هم اطلاعات میدن و یه سری property ارائه میدن که رفتار کامپوننت هامون رو کنترل میکنن و همچنین با تغییر state های ما کامپوننت هم re-render میشه ، پس باید حواسمون باشه چه زمانی نیازه استیت خودمون رو تغییر بدیم تا از render های اضافه جلوگیری کنیم .

ما در کل 4 نوع state داریم که میخوام اونا رو بهتون معرفی کنم :

1 - Local state :

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

2 - Global state :

ما تا یه قسمتی میتونیم کارمون رو با لوکال استیت ها راه بندازیم ، ولی یه جایی ممکنه نیاز داشته باشیم که یک یا چند تا از state هامون رو توی چندین کامپوننت استفاده کنیم و خب توی این حالت یا باید لوکال استیت هارو یکی یکی پاس بدیم به کامپوننت های مختلف که این هم کار اضافه ایه و هم کدمون رو زشت میکنه و سرعت توسعه ی اون رو پایین میاره ، یه راه دیگه هم اینه که ما بیایم از گلوبال استیت ها استفاده کنیم ، گلوبال استیت ها به اون دسته ای از استیت ها گفته میشه که میتونیم ازشون توی همه جای برناممون استفاده کنیم و موقعی که بخوایم دیتامون رو توی چندین جای برنامه از یک استیت بخونیم یا اون رو توی یه استیت ذخیره کنیم به کارمون میاد و خیلی مفید واقع میشن .

3 - Server state :

این دسته از استیت ها به دیتایی گفته میشه که از جایی خارج از برنامه ی ما یعنی از یه سرور خارجی به برناممون اضافه میشن و قراره اون هارو توی برناممون استفاده کنیم و انواع مختلفی دارن که باید اون هارو مدیریت کنیم و هر بار که دیتایی رو میگیریم یا چیزی رو اپدیت میکنیم باید این استیت هارو مدیریت کنیم مثل استیت loading و یا استیت error که اینجور مواقع باهاشون سر و کار داریم .

4 - URL state :

دسته ی آخر از استیت ها هم url state ها هستند که به دیتایی گفته میشه که توی url ما وجود داره مثل pathname یا پارامتر ها .


برای مدیریت state ها توی فانکشنال کامپوننت از هوک ها استفاده میکنیم ، که اگه دوست دارین با هوک های ری اکت هم آشنا بشین میتونین این مطلب رو بخونین :

https://virgool.io/@faridshariati989/%D9%85%D8%B9%D8%B1%D9%81%DB%8C-%D8%AA%D9%85%D8%A7%D9%85-%D9%87%D9%88%DA%A9-%D9%87%D8%A7%DB%8C-react-js-o065rkwm4qju




خب اینم از این :) امیدوارم توضیحاتم به دردتون خورده باشه و یه ذره هم که شده مسیر رو براتون روشن تر کرده باشه هر جا که هستید موفق و خوشحال باشین ;)


reactبرنامه نویسیjs
سعی در ایجاد ثبات و فرار از سکون
شاید از این پست‌ها خوشتان بیاید