هوک useState ری اکت و بررسی تخصصی ()React.useState

هوک useState ری اکت به ما این امکان رو میده که حالت ها و مقادیر کامپوننت خودمون رو در جایی ذخیره کنیم. این حالت ها (stateها) میتونن از هر نوعی ( string,number,array,object و..) باشن .

با ذخیره کردن این state ها ، میتونیم تو کل اون کامپوننت ازشون مثل یه متغیر استفاده کنیم و هر زمان نیاز داشتیم مقدارشون رو بروزرسانی کنیم .

هوک useState چطور کار میکنه ؟

با ساختن هر state ( توسط useState ) باید یک مقدار اولیه به اون state بدید .

مثلا اگه میخواید Theme اپیکیشن رو داخل state ذخیره کنید ، باید مشخص کنید که مقدار اولیه Theme چی باشه ؟!

تو مثال زیر ما به کمک هوک useState حالت اپیکیشن رو ذخیره کردیم.

(تو این مثال از theme برای دسترسی به مقدار و از setTheme برای بروز کردن مقدار استفاده میکنیم ):

const [theme,setTheme] = useState('DarkMode')

اگه کد بالارو کامل متوجه نشدید ، اصلا نگران نباشید و با فِرانت اِندی همراه باشید که میخوایم حسابی بررسیش کنیم ?

هوک useState ری اکت چیست ؟

هوک useState یکی از مهمترین هوک های ری اکت هست که به ما اجازه میده حالت های کامپوننت خودمون رو ذخیره و مدیریت کنیم . حالا شاید بپرسید حالت کامپوننت یعنی چی ؟

فرض کنید توی کامپوننت خودمون باید نام کاربر یا شماره تلفنش رو در جایی ذخیره کنیم . خب هرکدوم از اینها یک حالت ( state ) هستن که هوک useState ری اکت به ما امکان ذخیره و بروزرسانی این مقادیر رو میده.

برای ذخیره کردن نام کاربر باید بصورت زیر عمل کنیم :

const [name,setName] = useState('احمد')

برای استفاده از نام کاربر تو کامپوننت خودمون ، باید از name استفاده کنیم . مثل مثال زیر :

<div>{name}</div>

برای تغییر یا بروزرسانی مقدار name به یک مقدار جدید ( مثلا تغییر احمد به حسین ) باید بصورت زیر عمل کنیم :

setName('حسین')

در واقع React.useState به ما 2 امکان میده :

• امکان خواندن مقدار ذخیره شده .
• امکان بروزرسانی مقدار ذخیره شده.

هوک useState ری اکت چه مقادیری رو میتونه ذخیره کنه ؟

هوک useState در React به ما اجازه ذخیره هر نوع مقداری با هر نوعی رو میده !

مثلا شما میتونید انواع مختلف دیتا های primitive مثل String , Number , Boolean رو داخلش ذخیره کنید . همچنین امکان ذخیره کردن دیتا های Complex مثل Array و Object ، تابع ، و دیتا تایپ های اختصاصی روهم دارید.

یا بزارید اینجوری بگم :

هرچیزی که داخل متغیر های جاوااسکریپت میتونید ذخیره کنید ، داخل State هم میتونید ?

چطور Object و Array ذخیره شده در State رو بروزرسانی کنیم ؟

بروزرسانی مقادیر ذخیره شده در state ها خیلی آسونن ! ( البته بروزرسانی Object و Array کمی تفاوت داره )

مثلا برای آپدیت کردن state با نوع number ، string و boolean بصورت زیر باید عمل کنیم :

بروزرسانی State با نوع Number !

//My State
const [age,setAge]=useState(18)
// Update My State
setAge(20)

بروزرسانی State با نوع String !

//My State
const [name,setName]=useState('علی')
// Update My State
setName('ممد')

بروزرسانی State با نوع Boolean !

//My State
const [premium,setPremium]=useState(false)
// Update My State
setPremium(true)

اما بروزرسانی Object و Array کمی متفاوت تره !

تو ری اکت انواع مختلف دیتا رو میشه بصورت مستقیم بروزرسانی کرد ( مثل مثال های بالا )

اما برای Object و Array نمیشه مستقیما بروزرسانی رو انجام داد . ( بخاطر بحث immutability که بعدا راجبش صحبت میکنیم )

برای بروزرسانی Object یا Array باید بصورت زیر عمل کنید :

1. یک کپی از Object یا Array موجود در state بگیرید .
   
2. تغییرات خودتون رو روی اون Object یا Array کپی شده اعمال کنید .
   
3. حالا توسط setState آبجکت یا آرایه بروز شده رو در state ذخیره کنید .
   

تو دستورالعمل بالا ما مستقیما مقدار State خودمون با نوع Object یا Array رو آپدیت نمیکنیم !

یک کپی از اون مقدار میگیریم و هر تغییری که لازم داریم رو روی اون مقدار کپی شده لحاظ میکنیم .

حالا مقدار کپی شده که تغییرات رو هم شامل شده ، توسط setState جایگزین مقدار قبلی در state میکنیم .

تو مثال زیر یه State با نوع Object رو بروزرسانی میکنیم :

• const [state, setState] = useState({ name: 'Fatemeh', age: 21 });

const updateAge = () => {
setState({ ...state, age: 22 });
};

تو مثال بالا یه State داریم که یک Object به عنوان مقدار اولیه ( InitialState ) بهش دادیم . این آبجکت شامل نام و سن هست که نام از نوع رشته و سن از نوع عدد هستن.

تابع updateAge برای بروزرسانی اطلاعات این State هست که داخلش setState رو صدا زدیم .

با state… میتونیم یک کپی از مقدار state بگیریم ، حالا چون مقدار age تغییر کرده پس در کنارش مقدار جدید رو هم قرار میدیم .

یعنی تو خط 4 گفتیم : از هرچی تو state هست یه کپی بگیر ، حالا مقدار age رو توی ورژن کپی شده تغییر بده . در نهایت با setState این مقدار بروز شده رو set کن .

تو مثال زیر یه state با نوع Array رو بروزرسانی میکنیم :

const [array, setArray] = useState([1, 2, 3, 4, 5]);

const addItem = () => {
  setArray([...array, 6]);
};

تو مثال بالا یک state از نوع Array داریم .

تو خط 4 یک کپی از array گرفتیم و مقدار 6 رو به این آرایه اضافه کردیم و در نهایت توسط setArray این مقدار بروزر شده رو set کردیم .

لطفا برای ادامه این مقاله و دسترسی به مابقی مثال ها + کد ها روی لینک زیر کلیک کنید :

هوک useState در React

FrontEndi.com