هوک های استیت

مقدمه : بی مقدمه ! ?

سوال : هوک های استیت چه کاربردی دارن؟?

هوک‌های استیت در ری اکت ، یکی از اصلی‌ترین ابزارهای مدیریت state هستند و به شما امکان می‌دهند که مقادیر استیت رو در کامپوننت‌های ری اکت مدیریت کنید.

دو نوع استیت هوک داریم: useState , useReducer

هوک useState یکی از پرکاربرد ترین و مهم ترین هوک ها توی ری اکت هست.

هوک useStatat: همه ی هوک ها رو باید قبل از استفاده, از ری اکت import کنیم.

اینطوری مثلا:

import { useState } from 'react';

یه نگاه به سینتکس useState بندازید=>

در واقع، با استفاده از هوک useState می‌توانید مقدار استیت را در یک تابع کامپوننت ری اکتی تعریف کرده و سپس آن را به عنوان یک آرایه به عنوان خروجی دریافت کنید. این آرایه دو مقدار دارد: مقدار فعلی state و تابعی که به کمک آن می‌توانید مقدار state را تغییر دهید.

به عنوان مثال:

کاربر بر روی دکمه کلیک میکند و ایونت دکمه اجرا میشود

setCount (count +1) <= () تابع setCount همانطور که در کد بالا تعریف کردیم باعث اپدیت شدن مقدار count میشود و یکی به مقدار اولیه ی استیت که صفر است اضافه میکند و پاراگراف که صفحه نشان میدهد به you clicked 1 times تغییر میکند.

useReducer:

هدف از استفاده از useReducer، مدیریت استیت های بزرگ و پیچیده در کامپوننت‌های ری اکت است. معمولاً هنگامی که استیت بیش از یک مقدار شامل یک سری منطق پیچیده است، استفاده از useReducer توصیه می‌شود. همچنین، این هوک به شما امکان می‌دهد که منطق استیت را از UI جدا کنید و از روش معمول استفاده از setState برای تغییر وضعیت که ممکن است باعث پیچیدگی در کد شود، استفاده نکنید.

یه نگاه به سینتکس useReducer هم بندازید=>

به طور کلی، useReducer مشابه useState است، اما به جای متد setState برای تغییر وضعیت از یک تابع reducer استفاده می‌کند که اسمشو dispatch میزاریم معمولا. reducer یک تابع معمولی است که دو پارامتر دارد: استیت قبلی و یک اکشن. reducer سپس یک استیت جدید با توجه به اکشن و استیت قبلی باز می‌گرداند.

یه مثال برای جا افتادن مطلب:

در این کد، ابتدا مقدار اولیه شمارنده را با شماره ۰ در state قرار دادیم. سپس، یک تابع reducer را تعریف کردیم که براساس اکشن، استیت جدید را تولید می‌کند. در این حالت، reducer می‌تواند به سادگی شماره را در استیت با اضافه یا کاهش ۱ به روز رسانی کند. سپس این reducer را با استفاده از useReducer فراخوانی کردیم و state اولیه را وارد کردیم.

در انتها، دو دکمه افزایش و کاهش را به همراه یک حالت نمایش شمارنده به UI اضافه کردیم. هر بار که کاربر یکی از دکمه‌ها را فشار می‌دهد، یک اکشن با نام مشخص (increment یا decrement) به reducer ارسال می‌شود. reducer سپس با توجه به نوع اکشن وضعیت جدید را محاسبه و برگشت می‌دهد و سپس UI با وضعیت جدید بروزرسانی می‌شود همچنین منطق استیت از UI کاملا جدا است.

تفاوت بین useState و useReducer : اصلی ترین تفاوت بین useState و useReducer این است که useState برای مدیریت وضعیت های ساده و useReducer برای مدیریت وضعیت های پیچیده تر با منطق و قابلیت گسترش بیشتر استفاده می‌شود. در واقع یه جورایی خود useState با useReducer درست شده است.

تفاوت دیگری که باید برای استفاده از useReducer در نظر گرفته شود این است که برای تغییر وضعیت با useReducer، باید از یک تابع reducer استفاده کنید، که وظیفه آن تعیین نحوه به روزرسانی وضعیت جدید است، در حالی که با useState، می‌توانید به طور مستقیم مقدار جدید را تعیین کنید. در نتیجه، استفاده از useReducer برای پیچیدگی‌های بیشتر و حالت‌هایی که نیاز به منطق محاسباتی دارند، مفیدتر است.

"آیا این پست برای شما مفید بود؟ با لایک کردن و نظر دادن، به من کمک کنید تا بیشترین استفاده را از این پست داشته باشید."