آموزش کار با State در React NativeReviewed by صابر بوستانی on Dec 4Rating: 5.0
آموزش کار با State در React Native

آموزش کار با State در React Native

با آموزش کار با State در React Native از وب سایت آموزش برنامه نویسی سورس باران در خدمت شما کاربران عزیز هستیم. در جلسه چهارم آموزش React Native به بررسی State یا وضعیت در React Native و تفاوت بین State و props در React Native خواهیم پرداخت.

آموزش کار با State در React Native

داده ها در داخل React Components توسط State و props اداره می شوند. در این فصل، ما درباره State صحبت خواهیم کرد. State تغییرپذیر است در حالیکه props غیر قابل تغییر است. این بدان معنی است که در آینده می توان State را به روز کرد در حالی که props را نمی توان آپدیت کرد. در ادامه آموزش React Native با ما همراه باشید….

 

آموزش استفاده از State

این مولفه اصلی ماست. ما فقط وارد Home می شویم که در اکثر فصل ها استفاده شده است.

App.js

ما می توانیم شبیه ساز متن یا emulator text را از state در اسکرین شات تصویر زیر مشاهده کنید.

آموزش بروزرسانی State

از آنجا که State قابل تغییر است، ما می توانیم آن را با ایجاد تابع deleteState به روز کنیم و با استفاده از رویداد onPress = {this.deleteText} فراخوانی کنیم.

Home.js

در تمام فصل ها، ما از کلاس syntax برای وضعیت کامل (container) کامپوننت ها و تابع Syntax برای بدون وضعیت (presentational) کامپوننت ها استفاده می کنیم.ما در مورد کامپوننت ها در فصل بعدی بیش تر صحبت می کنیم.

ما همچنین نحوه استفاده از arrow function syntax برای updateState را یاد خواهیم گرفت. شما باید در نظر داشته باشید که این syntax از lexical scope استفاده می کند و این کلمه کلیدی با environment یا (Class) محدود می شود. که این گاهی منجر به رفتار غیرمنتظره خواهد شد.

روش دیگر برای تعریف متد ها استفاده از توابع EC5 است، اما در این صورت ما باید این را به صورت دستی در کامپوننت قرار دهیم. مثال زیر را با هم می بینیم.

مثالی دیگر از آموزش State ها در react native

برای کنترل یک کامپوننت دو نوع داده وجود داره state و props. اگر داده های ما در حال تغییر هستن باید از state استفاده کنیم. برای معرفی state باید اونو داخل سازنده ها مقدار دهی کنیم و هر وقت بخواهیم اون مقدارو تغییر بدیم از دستور setstate استفاده میکنیم. در ویدئو زیر هم توضیحات کاملی در مورد state ها دادم. در مثال زیر میخواهیم با زدن دکمه , متن title تغییر پیدا کنه به Hello world ؟

1- برای شروع react و دو کامپوننت Text , View را داخل فایل app.js اضافه میکنیم:

2- سپس یک کلاس با نام App تعریف می کنیم:

3- حالا نوبت به تعریف state رسیده. برای این کار یک سازنده ایجاد کرده و در آن یک state با نام title تعریف میکنیم: برای تعریف state از کلمه کلیدی {this.state={name of state:value استفاده میکنیم .

4- حالا نوبت به تعریف دو کامپوننت Text , Button رسیده:

5- در کامپوننت Button یک پراپ title برای مشخص کردن نام دکمه و یک پراپ onPress برای زمانی که روی دکمه کلیک شد میگه چه عملی انجام بده  که در اینجا گفتیم با استفاده از setState مقدار title رو برابر عبارت Hello world بزارید.

سورس کد برنامه در فایل App.js

 

لیست جلسات قبل آموزش React Native

  1. React Native یا ریکت نیتیو چیست؟
  2. آموزش React Native – نصب و تنظیم محیط React Native
  3. آموزش App در React Native