state – بخش دوم

state – بخش دوم

641 346 سینا

در بخش اول آموزش state با نحوه تعریف آن و استفاده درون تابع render آشنا شدیم. در این بخش سعی می کنیم به صورت داینامیک تغییراتی بر روی آن اعمال کنیم و تاثیر تغییرات را ببینیم.

 

تغییرات مستقیم محتوای state ممنوع!

برای تغییرات this.state هیچوقت نباید به صورت مستقیم آن را مقداردهی کنید. برای این کار تابعی در react وجود دارد با نام setState که نحوه استفاده از آن در قطعه کد زیر دیده می شود.

در کد بالا مقدار reactfa که در state وجود دارد با عبارت The best website in the world  مقداردهی شده است. :))

روش غلط این کار به این شکل بود :

 

حال مثال آموزش قبلی را بررسی می کنیم.

همانطور که مشاهده کردید در این کامپوننت ما یک state داشتیم که شامل آرایه ای به نام data بود. درون render محتوای این آرایه را درون جدولی نمایش می دهیم.

در ادامه ما می خواهیم این آرایه را کمی تغییر دهیم و تاثیر آن را مشاهده کنیم.

برای این کار ابتدا دکمه ای به انتهای <table> اضافه می کنیم.

تگ <button> بالا را بعد از تگ بسته شدن جدول (<table/>) قرار می دهیم. مشخصه onClick این تگ مشخص می کند که در صورت کلیک بر روی آن متد this.addRow باید فراخوانی شود. پس در ادامه ما متد addRow را درون کامپوننت تعریف می کنیم  تا از طریق this قابل دسترسی باشد.

متد addRow را مشاهده می کنید. این متد باید خارج از render و درون کامپوننت تعریف شود تا از طریق this قابل دسترسی باشد.

*** نکته مهمی که اینجا وجود دارد این است که برای استفاده از this درون متد خود باید آن را به متد bind کنیم. bind کردن this به متد روش های متفاوتی دارد که سعی می شود در یک مقاله جدا توضیح داده شود. در اینجا سه روش اصلی از روش های موجود توضیح داده خواهند شد.

  1. bind کردن درون constructor : در این روش ما از دستور زیر برای bind کردن this استفاده می کنیم.
  2. bind کردن زمان فراخوانی :‌ در این روش ما هر زمان که بخواهیم متد را فراخوانی کنیم نیاز داریم this را به آن bind کنیم. طریقه استفاده از این روش در خط زیر آمده است.
  3. استفاده از arrow function ها : در صورتی که برای تعریف متد خود از arrow function ها استفاده شود می توانید از this داخل آن استفاده کنید. این روش ساده ترین روش است اما یادگیری سایر روش ها نیز کاملا ضروری است.

در این متد در ابتدا متغیر rowsData را تعریف کرده ایم و آن را با مقدار data درون state مقداردهی کرده ایم.

در ادامه متغیری به نام row تعریف کرده ایم که یک آبجکت مشابه آبجکت های درون rowsData است. همانطور که مشاهده می کنید این آبجکت شامل id, name, age است. id را با مقدار اندازه آرایه rowsData به اضافه 1 مقدار دهی کردیم. در نتیجه هر سطر جدیدی که اضافه شود id آن یکتا خواهد شد. مقادیر name و age نیز با متنی آزمایشی پر شده است.

پس از تعریف row آن را با استفاده از تابع push به انتهای rowsData اضافه می کنیم.

در آخرین مرحله با استفاده از تابع setState مقدار data را برابر مقدار rowsData قرار می دهیم.

در نتیجه این متد یک سطر به سطر های آرایه اضافه می کند. کد کامل این کامپوننت به این شکل خواهد بود.

 

اگر از این کامپوننت استفاده کنید و خروجی آن را ببینید مشاهده خواهید کرد که با زدن دکمه Add Example Row ، بدون بارگذاری مجدد صفحه یک سطر جدید به جدول اضافه می شود. اتفاقی که در اینجا رخ می دهد این است که پس از فراخوانی تابع setState تابع render مجددا فراخوانی می شود و جدول با مقادیر جدید ساخته می شود.

این کد با کمترین توجه به performance نوشته شده است. در آموزش های بعدی درباره افزایش performance در ری اکت نیز صحبت خواهیم کرد.

استفاده از State و Props در React Native نیز رایج است. به این دلیل است که در این آموزش ها ما از کلمه React استفاده کرده ایم و به React Native اشاره نکرده ایم.

۶ دیدگاه

دیدگاهی بگذارید