تفاوت state و props در React Native

React Native یک فریمورک توسعه موبایل است که توسط Facebook توسعه داده شده است. با استفاده از React Native، برنامه‌های موبایل قابل توسعه و اجرا بر روی سیستم‌عامل‌های iOS و Android می‌باشند.

این فریمورک بر پایه React، یک کتابخانه محبوب برای توسعه وب، ساخته شده است.

مهمترین ویژگی React Native این است که به توسعه‌دهندگان امکان می‌دهد برنامه‌های موبایل را با استفاده از جاوا‌اسکریپت (JavaScript) توسعه دهند، بدون نیاز به توانایی‌ها و زبان‌های برنامه‌نویسی مخصوص هر سیستم‌عامل موبایل.

این به معنی این است که با استفاده از همان کد منبع (کد بیزینس)، می‌توانید برنامه‌هایی برای هر دو سیستم‌عامل iOS و Android توسعه دهید، که این امر باعث سرعت بخشیدن به فرآیند توسعه و کاهش هزینه‌ها می‌شود.

در هر نوع برنامه نویسی موبایل ما نیاز داریم همیشه تا یک سری از اطلاعات و در طول برنامه ذخیره کنیم. در React Native هم وظیفه ذخیره کردن اطلاعات در طول اجرای برنامه بر عهده  state و props می باشد اما بیاید نگاهی بندازیم و تفاوت این دو روش ذخیره سازی اطلاعات و متوجه بشیم.

آموزش جامع برنامه نویسی فلاتر Flutter

به طور کلی اگر بخوایم نگاه کنیم state ها قابل ویرایش یا بروزرسانی هستند یعنی اطلاعاتی که در state ذخیره می شود در طول برنامه می تواند تغییر کند اما اطلاعات داخل props غیر قابل تغییر می باشد.

روش تعریف state به این صورت هست که ابتدا یک آبجکت به نام state تعریف میکنیم ‘state = {}’  سپس داخل این آبجکت متغیر های مختلف و ایجاد میکنیم.

داخل  state یک متغیر به نام myState تعریف کردیم و عبارت this is my state data و داخل آن ذخیره کردیم.

حالا برای استفاده کردن از این متن ذخیره شده در کامپوننت Text از دستور JSX استفاده میکنیم. ابتدا {} قرار میدهیم و سپس داخل آن عبارت this.state.myState و مینویسیم.

برای تغییر عبارت state ها حتما باید از دستور setState استفاده کنیم.

در مثال بالا یک تابع به نام updateState تعریف کردیم متن state و به The state is updated تغییر میدهد.

برای پاس دادن اطلاعات به کامپوننت هایی که میسازیم اکثرا از props استفاده می کنیم.

من یک کامپوننت به اسم PresentationalComponent ایجاد میکنم که در واقع همون Text می باشد و برای نمایش متن داخل Text از props استفاده می کنم.

حالا داخل صفحه ای که از PresentationalComponent  استفاده میکند متن نوشته بصورت props بهش پاس میدیم