صفر تا صد React Hooks (قسمت اول useState)

قبلا کامپوننت های ری اکت صرفا به صورت کلاس تعریف می شدند ولی از ری اکت نسخه ی 16.8 به بعد این امکان نیر به وجود آمد که از کامپوننت های به صورت تابع نیز استفاده کنیم. برای درک بهتر یک مثال خیلی ساده را بررسی میکنیم :

-تعریف کامپوننت به صورت کلاس:

- تعریف کامپوننت به صورت تابع: ( اگر متوجه کد پایین نشده اید هیچ مشکلی نیست. توابع به کار رفته را در ادامه به صورت کامل بررسی میکنیم )

اولین hook که در این قسمت میخوام درمورد آن صحبت کنیم useState است . طبق روشی که قبل از نسخه ی 16.8 ری اکت استفاده میکردیم برای تعریف stateیک آبجکت به نام state باید ایجاد کنیم و سپس فیلدهای مدنظر را درون آن قرار دهیم. (مانند شکل اول)

ولی در استاندارد جدید برای تعریف فیلدهای state از تابع (هوک) useState استفاده میشود . درواقع این هوک یک آرایه شامل دومقدار باز میگرداند که از طریق این دو مقدار میتوان به مقدار آن دسترسی پیدا کرد و همچنین مقدار را تغییر داد.

همانطور که در این شکل میبینید برای ایجاد یک فیلد به نام count باید به این صورت عمل شود . مقداری که به عنوان مقدار اولیه میخواهیم به count بدهیم را باید به تابع useState پاس داده و در نتیجه useState دو مقدار برمیگرداند. یکی مقدار count و یک تابع برای تغییر مقدار count . دقت کنید که اسامی count و setCount نام های دلخواه هستند و حتی میتوانند هیچ ارتباطی به هم نداشته باشند.

برای استفاده از تابع setCount باید یک تابع به آن پاس بدهیم . مقدار ورودی تابعی که تعریف میکنیم آخرین مقدار count را به عنوان ورودی دریافت میکند و مقدار بعدی که باید در count قرار بگیرد را باید برگردانیم . به شکل زیر :

حال برای نمایش و یا استفاده از مقدار count به صورت زیر میتوانیم عمل کنیم :

شکل 2 مثالی کامل از روش استفاده از useState است که بهتر است دوباره بررسی کنیم :

در خط 5 ابتدا فیلد count تعریف شده است.

درصورتی که برروی دکمه ی Increase Value کلیک شود تابع increaseCount صدا زده میشود و مقدار count یک واحد افزایش پیدا میکند و همینطور در صورتی که بر روی دکمه ی Decrease value کلیک شود مقدار count یک واحد کاهش میابد.

تا این لحظه با اولین و ساده ترین هوک آشنا شدیم. پیش از این که به بررسی هوک بعدی بپردازیم ابتدا قوانین اساسی هوک ها در ری اکت را بررسی میکنیم :

1- Only Call Hooks at the Top Level

Don’t call Hooks inside loops, conditions, or nested functions.

2- Only Call Hooks from React Functions

Don’t call Hooks from regular JavaScript functions

طبق قانون اول نباید هیچگاه از hooks در داخل if یا for و توابع تودرتو استفاده کرد . به طور خلاصه هوک ها فقط باید در بالاترین سطح در توابع ری اکت استفاده شود.

طبق قانون دوم نیز فقط باید از هوک ها در توابع ری اکتی استفاده شود ... (واضحه دیگ )

در قسمت بعدی از سری مقالات React Hooks به بررسی useEffect میپردازیم.. اگر انتقاد یا نظری داشتید حتما کامنت بذارید . با تشکر