آموزش state در برنامه نویسی ریکت نیتیو

4 سال پیش

امتیاز دهید post

آموزش state در برنامه نویسی ریکت نیتیو

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش state در برنامه نویسی ریکت نیتیو خواهیم پرداخت.

داده های درون کامپوننت های React توسط state و props مدیریت می شوند. در این درس، ما در مورد state صحبت خواهیم کرد.

تفاوت بین state و و props

state قابل تغییر است در حالی که props قابل تغییر نیستند. این بدان معنی است که می توان state را در آینده به روز کرد در حالی که props را نمی توان به روز کرد.

استفاده از state

این جز root اصلی ماست. ما در حال وارد کردن صفحه اصلی هستیم که در بیشتر فصل ها استفاده خواهد شد.

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 (
      &lt;View&gt;
         &lt;Text&gt; {this.state.myState} &lt;/Text&gt;
      &lt;/View&gt;
      );
   }
}

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>

);

}

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

React Native 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 (
         &lt;View&gt;
            &lt;Text onPress = {this.updateState}&gt;
               {this.state.myState}
            &lt;/Text&gt;
         &lt;/View&gt;
      );
   }
}
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;

توجه – در همه فصل ها، ما از نحو کلاس برای مولفه های state دار (ظرف) و نحو عملکرد برای مولفه های بدون state (نمایشگاهی) استفاده خواهیم کرد.

ما همچنین یاد خواهیم گرفت که چگونه از نحو عملکرد پیکان برای updateState استفاده کنیم. باید به خاطر داشته باشید که این نحو از دامنه لغوی استفاده می کند و این کلمه کلیدی به شی محیط (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() {

}

منبع.

لیست جلسات قبل آموزش ریکت نیتیو

امتیاز دهید post

نویسنده مطلب saber

آموزش state در برنامه نویسی ریکت نیتیو

آموزش state در برنامه نویسی ریکت نیتیو

تفاوت بین state و و props

استفاده از state

App.js

به روزرسانی state

Home.js

لیست جلسات قبل آموزش ریکت نیتیو

دیدگاه شما

بدون دیدگاه

آموزش state در برنامه نویسی ریکت نیتیو

تفاوت بین state و و props

استفاده از state

App.js

به روزرسانی state

Home.js

لیست جلسات قبل آموزش ریکت نیتیو

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه