آموزش مقدماتی کتابخانه معروف React.js برای افراد تازه کار - قسمت 2



visibility  
mode_comment   ۴

در قسمت قبل کار با React.js رو شروع کردیم و توضیحاتی در مورد Component ها و JSX و نحوه رندر کردن در DOM و ... دادیم و در این قسمت میخوایم این آموزش رو ادامه بدیم و بیشتر در مورد state و props براتون توضیح بدیم.آموزش مقدماتی کتابخانه معروف React.js برای افراد تازه کار - قسمت 2

در قسمت قبل توضیحات مقدماتی در مورد state و props دادیم و در این جلسه میخوایم دقیقتر در مورد اونا توضیح بدیم و با استفاده از مثالهای متنوع کاربرد اونا رو به خوبی برای شما روشن کنیم.

Props

کامپوننتی که در جلسه قبل با هم ساختیم کاملا استاتیک و ثابت بود و همیشه متن Hello world رو در صفحه رندر میکرد و هیچوقت تغییر نمی‌کرد. یکی از ویژگی های React قابلیت Reusability یا استفاده مجدد از کامپوننت های اون هست و به این معنی هست که شما یکبار یک کامپوننت رو تعریف میکنید و از اون در جاهای مختلف و به هر تعداد که بخواید استفاده میکنید. مثلا میتونین پیامهای مختلف رو در جاهای مختلف نمایش بدین.

برای انجام چنین کاری ما از props استفاده میکنیم. کد زیر رو ببینید:

میبینید که همون کامپوننت جلسه قبل رو باز با استفاده از متد render درون المنت div قرار دادیم. اما اگر دقت کنید یک ویژگی بنام message برای کامپوننت Hello اضافه شده که مقدار my friend درون اون قرار گرفته است. با این روش میتونیم props رو به کامپوننت پاس بدیم و درون کدهای مربوط به کامپوننت به اون دسترسی داشته باشیم.

برای اینکه در کامپوننت Hello به این prop دسترسی داشته باشیم، باید از this.props.message استفاده کنیم. کد زیر رو ببینید:

میبینید که بجای کلمه ثابت world از props ای که تعریف کرده بودیم استفاده کردیم. اگر کدها رو در مرورگر باز کنید خروجی بصورت زیر خواهد بود:

به این دلیل ما prop مورد نظر رو درون {} قرار دادیم چون میخواستیم یک عبارت Javascript رو درون کدهای JSX قرار بدیم. اگر اینکار رو نمیکردیم بصورت یک رشته استاتیک با اون برخورد میشد. خب پس با اینکار ساده ما یک کامپوننت داینامیک ساختیم که با استفاده از اون میتونیم هر پیامی که بخوایم رو درون صفحه نمایش بدیم. به همین راحتی.

همونطور که قبلا گفتیم کامپوننت نمیتونه بر روی props ها کنترلی داشته باشه و فقط میتونه اونا رو نمایش بده. اگر بخواید اطلاعات رو درون خود Component انجام بدین با استفاده از state این امکان برای شما فراهم می باشد.

State

راه دیگه برای ذخیره اطلاعات در React استفاده از state می باشد. برخلاف props ها که نمیتونستیم اونا رو درون کامپوننت تغییر بدیم، میتونیم state رو درون کامپوننت تغییر بدیم و کاری که میخوایم رو با استفاده از اون انجام بدیم. پس اگر شما میخواید اطلاعات موجود در رابط کاربری شما تغییر بکنن (مثلا با کارهایی که کاربر انجام میده)، این اطلاعات باید جایی در برنامه شما در state ذخیره بشن.

مقداردهی اولیه state

برای مقداردهی اولیه به State میتونین به راحتی این کار رو درون متد constructor کلاس کامپوننت انجام بدین. برای اینکار بصورت زیر عمل میکنیم:

میبینید که درون constructor در ابتدا از super(props) استفاده کردیم. در مواردی که یک کامپوننت رو به وجود میارید و با استفاده از کلمه کلیدی extends اون رو از React.Component به وجود میارید، اگر بخواید چیزی رو درون constructor اضافه کنید، باید در ابتدا super(props) رو قرار بدین. اگر اینکار رو نکنید با مشکل مواجه میشید و به کلمه کلیدی this و دیگر متدهای کلاس والد React.Component دسترسی نخواهید داشت.

درون متد render هم برای دسترسی به state مورد نظر به سادگی از this.state.message استفاده میکنیم و با اینکار متن مورد نظر در خروجی نمایش داده میشه.

تغییر دادن State

برای تغییر دادن State در مواقع مورد نظر به سادگی میتونین از this.setState() استفاده کنید و یک شئ با کلیدهای مورد نظرتون رو به اون پاس بدین. برای مثال یک متد بنام updateMessage به وجود میاریم و قصد داریم زمانی که این متد فراخوانی شد، متن پیام رو تغییر بدیم. برای اینکار بصورت زیر عمل میکنیم:

میبینید که متد جدید رو تعریف کردیم و درون اون متن message رو تغییر دادیم. این state زمانی تغییر میکنه که متد updateMessage به طریقی فراخوانی بشه. برای اینکه این متد کار کنه درون constructor این متد رو با کلمه کلیدی this بصورت bind در آوردیم تا درون متد به this دسترسی داشته باشیم. مرحله بعدی اینه که یک دکمه درون DOM قرار بدیم و کاری کنیم که با کلیک کردن بر روی این دکمه متد updateMessage فراخوانی بشه.

برای اینکار در متد render بصورت زیر عمل میکنیم:

میبینید که دکمه رو قرار دادیم و درون onClick اون مشخص کردیم که متد updateMessage رو فراخوانی بکنه. کل کدها تا اینجای کار بصورت زیر هستند:

حالا اگر مرورگر رو باز کنید و بر روی دکمه کلیک کنید، متن عوض میشه.

شما اولین کامپوننت خودتون رو به وجود آوردید و با مفاهیم اصلی React بصورت مقدماتی آشنا شدید.

امیدوارم از این مطلب خوشتون اومده باشه.

Source

comment دیدگاه کاربران
امیرمحمد رضائی

باریکِلاااا نِ باریکلاااااا نِِِ باریکِلااا

امیدوارم اموزش حرفه ای رو هم و پک حرفه ای رو هم به زودی اماده کنید

محمد اسفندیاری

ایشالا
موفق باشید

ممنون از مطالب مفیدتون

محمد اسفندیاری

خواهش میکنم دوست عزیز

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.