state – بخش اول

state – بخش اول

600 225 سینا

پیش از این با کامپوننت ها آشنا شدیم. کامپوننت ها باعث افزایش قابلیت نگهداری برنامه می شوند و می توان برای ایجاد تغییرات یکی از کامپوننت ها را  بدون نگرانی از ایجاد مشکل در سایر قسمت های برنامه ویرایش کرد.

کامپوننت ها را می توان به دو دسته کلی تقسیم بندی کرد.

Stateless Components

کامپوننت هایی که تا به اینجا مشاهده کرده ایم همگی در این بخش قرار می گیرند. کامپوننت های Stateless یا بدون حالت، همانطور که احتمالا از نام آنها حدس زده اید، کامپوننت هایی استاتیک هستند که خروجی آن ها ثابت است و به حالت (state) خاصی بستگی ندارد.

به مثال زیر توجه کنید.

در این قطعه از کد مشاهده می کنید که ما 3 کامپوننت مختلف داریم. هر سه این کامپوننت ها Stateless یا بدون حالت هستند. کامپوننت Header یک تگ h1 برای ما تولید می کند و کامپوننت Content یک تگ h2 و یک تگ p دارد. این دو کامپوننت را در ReactfaStatelessComponent در کنار یکدیگر قرار داده و استفاده کرده ایم. در نتیجه خروجی این کامپوننت به این شکل خواهد بود.

نکته: در صورتی که میخواهید کامپوننت شما stateless باشد بهتر است برا افزایش کارایی (performance) از عبارت PureComopnent به جای Component استفاده شود و یا کامپوننت خود را با استفاده از تابع تعریف کنید که در آموزش قبلی به آن اشاره شد.

 

Header

Content

The Content text!!!

  • یادآوری : خط آخر این قطعه کد مشخص می کند که کامپوننت ReactfaStatelessComponent به صورت پیش فرض export شده و می توان آن را در سایر فایل ها Import کرد.

 

 

Stateful Components

این نوع از کامپوننت ها بر خلاف کامپوننت های نوع قبلی می توانند در حالت های مختلف خروجی های مختلفی تولید کنند. تفاوت این دو نوع کامپوننت در state است. React هر لحظه state را بررسی می کند و با تغییر آن تابع render دوباره فراخوانی می شود. البته فقط این تابع نیست که فراخوانی می شود. ری اکت شامل یک چرخه زندگی (lifecycle) است که به طور مفصل در مقاله های بعدی بررسی خواهد شد.

در مثال زیر به جای استفاده از کامپوننت Content که در مثال قبل دیدیم و کامپوننتی بود که محتوای استاتیکی تولید می کرد ما از یک table استفاده کرده ایم و محتوای آن را به صورت داینامیک تولید کرده ایم.

 

قسمت های مختلف این کد را بررسی می کنیم.

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

در ادامه state را تعریف می کنیم. با توجه به اینکه کد بسیار ساده است نیازی به توضیح زیادی نیست. فقط کافی است this.state را برابر یک object جاوا اسکریپت قرار دهیم. از این به بعد در تمامی قسمت های این کلاس می توانیم به state از طریق this.state دسترسی داشته باشیم.

میرسیم به بخش render این کامپوننت. در render  سعی کرده ایم که بر روی state حلقه ای ایجاد کنیم و محتوای آن را در جدولی نمایش دهیم.

بخش مهم تابع render این قسمت است. با سایر قسمت های آن در آموزش های قبلی آشنا شدیم. در صورت داشتن هر گونه سوالی در بخش نظرات آن را ارسال کنید.

در این قسمت با استفاده از تابع map که یکی از توابع جاوااسکریپت است حلقه ای بر بر روی state.data ایجاد کردیم. اگر به state.data توجه کنید متوجه می شوید که آرایه ای است که سه خانه دارد. تابع map فقط بر روی آرایه ها قابل اجراست و بر روی object قابل اجرا نیست. شاید سینتکس استفاده شده در ابتدا کمی گنگ باشد اما به زودی به آن عادت خواهید کرد. به قطعه کد زیر نگاهی می اندازیم.

این کد با کد اول هیچ تفاوتی ندارد و تنها تفاوت آن ها در سینتکس استفاده شده است. در کد اول به جای استفاده از function معمولی از arrow function استفاده کردیم که بسیار ساده تر است. فقط کافی است درون ( ) ورودی های تابع را وارد کنید و با استفاده از <= محتوای تابع را تعریف کنید.

با توجه به اینکه پیش نیاز این آموزش ها، آشنایی با جاوا اسکریپت است سعی می کنیم از توضیحات بیشتر آن خودداری کنیم. تابع map در اینجا دو ورودی گرفته است (person, i).

person مشخص کننده خانه های آرایه است که اجرای حلقه بر روی آن صورت می گیرد و i مشخص کننده اندیس خانه جاری است. در این مثال 3 بار return تابع map اجرا می شود. و به ترتیب i و person.id ،person.name و  person.age را نشان می دهد.

بهتر است کمی کدهای این کامپوننت را تغییر دهید (با کامپوننت بازی کنید) و خودتان اثر تغییرات را ببینید.

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

 

۱ دیدگاه

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