درک مفهوم state و کار با آن + مدیریت رویدادها

State in React

0 371

درک مفهوم state در ری اکت و کار با آن + مدیریت رویدادها

در قسمت قبل به طور کامل با خروجی های پویا و شیء props آشنا شدیم؛ در همان جلسه توضیح دادیم که چطور می توان از خارج از کامپوننت داده ها را تغییر داد اما برخی اوقات می خواهیم داده ها را از درون خود کامپوننت تغییر دهیم. در این قسمت با نحوه ی انجام این کار آشنا خواهیم شد.

فرض کنید در فایل App.js دکمه ای داشته باشیم که با فشردن آن یکی از نام ها تغییر کند:

مشاهده این قسمت تنها برای افرادی که اشتراک جادویی داشته باشند، امکان‌پذیر است. با خرید اشتراک، به همه مطالب جادویی روکسوپلاس دسترسی داشته باشید.

کدنویسی عملکرد این دکمه را به جلسات بعد موکول می کنیم. در این جلسه می خواهیم کاری کنیم که نام های تعریف شده (Max و Manu و Stephanie) به صورت hardcode نوشته نشده باشند. hardcode یعنی نام را به صورت دستی بنویسیم و از هیچ متغیر یا عنصر پویایی استفاده نکنیم.

ما می توانیم از یک property خاص استفاده کنیم. توجه داشته باشید که این روش تنها زمانی کار می کند که کلاسی، کلاس Component را extend کند (یعنی کامپوننت های کلاس-محور نه کامپوننت های کاربردی) بنابراین نمی توان از این روش در کامپوننت Person استفاده کرد. نام این property خاص، state است.

نکته: در نسخه ی 16.8 کتابخانه ی react قابلیت جدیدی به نام hooks معرفی شده است که با آن می توان از state در کامپوننت های کاربردی نیز استفاده کرد! اما به دلیل راحتی در درک مسئله فعلا فرض را بر این می گذاریم که نسخه ی 16.8 ارائه نشده است. مطمئن باشید در رابطه با hooks بعدا به طور مفصل صحبت خواهیم کرد.

state در واقع یک شیء است که property های متخلفی را در خود نگه می دارد. شما می توانید هر نوع داده ای (آرایه، رشته و…) را در آن قرار دهید. ما می خواهیم state را به این صورت تعریف کنیم:

مشاهده این قسمت تنها برای افرادی که اشتراک جادویی داشته باشند، امکان‌پذیر است. با خرید اشتراک، به همه مطالب جادویی روکسوپلاس دسترسی داشته باشید.

در واقع درون state یک آرایه به نام persons (شما می توانید هر نامی قرار دهید) ساخته ایم که شامل چند شیء جاوا اسکریپتی است. هر شیء که یک عضو این آرایه محسوب می شود اطلاعات افراد مختلف را درون خود دارد.

حالا می توانیم به شکل زیر به اطلاعات آن (یا هر property دیگری در یک کلاس جاوا اسکریپتی) دسترسی داشته باشیم:

مشاهده این قسمت تنها برای افرادی که اشتراک جادویی داشته باشند، امکان‌پذیر است. با خرید اشتراک، به همه مطالب جادویی روکسوپلاس دسترسی داشته باشید.

حالا اگر فایل را ذخیره کنیم و به مرورگر برویم دکمه ی خودمان را می بینیم که فعلا هیچ کاری نمی کند و بقیه ی قسمت ها نیز دقیقا مانند قبل است.

خصوصیت state یک خصوصیت خاص است؛ از این جهت که اگر تغییری در آن ایجاد شود react تمام DOM را دوباره render می کند. state خاص است اما ما از آن به شکل خاصی استفاده نکرده ایم. برای این کار باید کدنویسی دکمه ی مان را نیز انجام دهیم.

برای کدنویسی دکمه باید از رویداد onclick استفاده کنیم. نکته ی بسیار مهم اینجاست که در جاوا اسکریپت و HTML عادی رویداد onclick به همین صورت (با c کوچک) نوشته می شود اما اگر بخواهید در JSX از آن استفاده کنید باید حتما از C بزرگ استفاده کنید. بنابراین:

روش معمول برای کدنویسی این دکمه این است که یک متد (به زبان ساده، توابع در کلاس متد نام دارند) را به آن بدهیم. بنابراین باید یک متد تعریف کنیم. برای تعریف نام متدهای از این نوع از واژه ی Handler (به معنی «مدیریت کننده») در آخر نام متد استفاده می کنیم؛ این مسئله یک قرار داد است تا بگوید ما از این تابع به صورت عادی استفاده نمی کنیم مگر آنکه رویدادی اتفاق بیفتد. بنابراین الزامی برای پیروی از این روش ندارید اما ما از همین قرارداد استفاده می کنیم. ابتدا یک کد ساده درون متد خود قرار می دهیم تا از صحت آن مطمئن شویم:

سپس این متد را به دکمه می دهیم:

نکته: هیچ گاه در انتهای نام متد خود پرانتز قرار ندهید. مثال:

اگر چنین کاری انجام دهید، متد به صورت خودکار و بدون نیاز به کلیک، به محض render شدن DOM اجرا می شود.

حالا به مرورگر بروید و از قسمت developer tools (کلید f12) به سربرگ console بروید. با کلیک روی دکمه، باید عبارت !was clicked را مشاهده کنید.

حالا که از صحت عملکرد دکمه مطمئن شده ایم می توانیم کد دیگری به جای console بنویسیم:

مشاهده این قسمت تنها برای افرادی که اشتراک جادویی داشته باشند، امکان‌پذیر است. با خرید اشتراک، به همه مطالب جادویی روکسوپلاس دسترسی داشته باشید.

برای تغییر state باید از تابعی از پیش تعریف شده در Component به نام setState استفاده کنیم. این متد به عنوان آرگومان یک شیء جاوا اسکریپتی می گیرد. سپس آن را با state قبلی خودمان ادغام می کند. بگذارید واضح تر توضیح دهم. فرض کنید state ما به این شکل باشد:

مشاهده این قسمت تنها برای افرادی که اشتراک جادویی داشته باشند، امکان‌پذیر است. با خرید اشتراک، به همه مطالب جادویی روکسوپلاس دسترسی داشته باشید.

یعنی property ای که قبلا داشتیم (persons) را با تغییراتی کوچک دوباره به آن بدهیم (نام Max را به Maximilian و سن Stephanie را به 27 سال تغییر داده ایم). در این حالت setState تفاوت های بین آرگومان خود و state قبلی را پیدا کرده و آن را اصلاح می کند اما آنقدر هوشمند است که به otherState دست نمی زند (چون آن را تغییر نداده ایم).

حالا اگر فایل را ذخیره کنیم و به مرورگر برگردیم، با فشردن دکمه متوجه تغییر مقادیر خواهیم شد. react متوجه شد که state تغییر کرده است بنابراین DOM را دوباره render کرد. دو عنصر در react به این شکل عمل می کنند: prop و state. هر زمان که یکی از اینها تغییر کند DOM نیز به روز رسانی می شود.

مفهوم کلی state به صورت خلاصه
مفهوم کلی state به صورت خلاصه

مشاهده این قسمت تنها برای افرادی که اشتراک جادویی داشته باشند، امکان‌پذیر است. با خرید اشتراک، به همه مطالب جادویی روکسوپلاس دسترسی داشته باشید.

امیدوارم به خوبی با state و props و تفاوت های آن ها آشنا شده باشید. در قسمت بعد به طور خلاصه در مورد hooks صحبت خواهیم کرد، اگر چه در انتهای دوره چند قسمت مفصل را به آن اختصاص می دهیم.

ترتیبی که روکسو برای یادگیری مطالب سری دوره جامع آموزش ری اکت به شما توصیه می‌کند:

ارسال نظر

توجه:‌ آدرس ایمیل شما منتشر نخواهد شد.

mezitli escort
mezitli escort
mezitli escort