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

0 دیدگاه

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

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;

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>

{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() {
      //
   }
}

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 ؟

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

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

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

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

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

export default class App extends Component {

render() {

return (

);

}

3- حالا نوبت به تعریف 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 (
);
}
}

export default class App extends Component {

constructor(props){

super(props);

this.state={

title:'Home page'

}

render() {

return (

);

}

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

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

<View>

<Text>

{this.state.title}

</Text>

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

</View>

5- در کامپوننت 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>
);
}
}

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

React Native یا ریکت نیتیو چیست؟

آموزش React Native – نصب و تنظیم محیط React Native

آموزش App در React Native

4.6/5 - (11 امتیاز)

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.

نظرات

برچسب ها: React Native, آموزش React Native, آموزش ریکت نیتیو

صابر بوستانی

داستان من با دنیای برنامه‌ نویسی آغاز شد، و در ادامه به عنوان یک توسعه‌ دهنده نرم‌ افزار، طراح وب سایت و متخصص سئو، مهارت ‌های تکنیکی و تحلیلی خودم رو پرورش دادم. علاقه م به دنیای مالی منو به سمت یادگیری ترید و معامله‌گری سوق داد. و در حال حاضر در برنامه نویسی و معامله گری ارز دیجیتال انجام میدم. از سال 96 سعی کردم معامله گری در کریپتو رو یاد بگیرم. ترید و معامله گری برام پر از چالش و شکست‌ های متعدد بود. اما هر شکست، درسی ارزشمند برام داشت و من رو به یک تریدر و معامله گر قوی‌ تر و هوشمندتر تبدیل کرد. با پشتکار و یادگیری مداوم، تونستم به موفقیت‌های قابل توجهی دست یابم و به معامله گری موفق تبدیل بشم. در اینجا بزرگترین تجربیات و مهمترین دانش خودم رو در اختیار شما قرار میدم تا در مدت زمان کوتاه تر و شکست های کمتر در این مسیر به موفقیت برسید.

دوره آموزش طراحی فروشگاه اینترنتی بدون کد نویسی در 8 ساعت

منبع : سورس باران
رمز فايل : www.sourcebaran.com
انتشار: ۱۳ آذر ۱۳۹۸

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

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

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

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

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

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

صابر بوستانی

دسته بندی موضوعات

آخرین محصولات فروشگاه

نظرات

بازخوردهای خود را برای ما ارسال کنید

لغو پاسخ

مطالب مرتبط