آموزش کار با 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

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default class App extends React.Component {
   state = {
      myState: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, used do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
      nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
      fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
      culpa qui officia deserunt mollit anim id est laborum.'
   }
   render() {
      return (
      <View>
         <Text> {this.state.myState} </Text>
      </View>
      );
   }
}

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

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

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

Home.js

import React, { Component } from 'react'
import { Text, View } from 'react-native'

class Home extends Component {
   state = {
      myState: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed 
         do eiusmod tempor incididunt ut labore et dolore magna aliqua.
         Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
         ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit 
         in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
         Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
         deserunt mollit anim id est laborum.'
   }
   updateState = () ⇒ this.setState({ myState: 'The state is updated' })
   render() {
      return (
         <View>
            <Text onPress = {this.updateState}>
               {this.state.myState}
            </Text>
         </View>
      );
   }
}
export default Home;

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

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

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

class Home extends Component {
   constructor() {
      super()
      this.updateState = this.updateState.bind(this)
   }
   updateState() {
      //
   }
   render() {
      //
   }
}

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

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

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

import React, { Component } from 'react';
import { View, Text ,Button} from 'react-native';

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

export default class App extends Component {
render() {
return (
);
}
}

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

export default class App extends Component {
constructor(props){
super(props);
this.state={
title:'Home page'
}
}
render() {
return (
);
}
}

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

<View>
<Text>
{this.state.title}
</Text>
<Button title="click" onPress={()=>this.setState({title:' Hello world '})}/>
</View>

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

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

import React, { Component } from 'react';
import { View, Text ,Button} from 'react-native';
export default class App extends Component {
constructor(props){
super(props);
this.state={
title:'Home page'
}
}
render() {
return (
<View>
<Text>
{this.state.title}
</Text>
<Button title="click" onPress={()=>this.setState({title:'Hello world'})}/>
</View>
);
}
}

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

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

The post آموزش کار با State در React Native appeared first on آموزش برنامه نویسی - یادگیری برنامه نویسی با طعم سورس باران.