بخش های اصلی

آموزش React Native

React Native – وضعیت (State)

داده های داخلِ کامپوننت هایِ React توسط state و prop ها مدیریت میشن. در این بخش راجع به state توضیح میدیم.

تفاوت میان State و Propها

state، تغییرپذیره ولی propها تغییرناپذیرن. این یعنی state می تواند بعداً به روز رسانی بشه در حای که propها چنین قابلیتی ندارن.

طرز استفاده از State

state (وضعیت) اولیه، با استفاده از دستورِ this.state، داخل متد سازنده ی کلاسِ EC6 تعریف میشه.

در مثال زیر، با استفاده از دستورِ {this.state.myText}، myText را به view، bind کردیم.

src/components/myComponent/MyContainerComponent

مثال

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

export default class MyContainerComponent extends Component {
   constructor() {
      super()
      this.state = {
         myText: 'Lorem ipsum dolor sit amet, consectetur adipiscing 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.'
      }
   }
   render() {
      return (
         
            
               {this.state.myText}
            
         
      );
   }
}

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

خروجی

react native state

به روز رسانی وضعیت

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

src/components/myComponent/MyContainerComponent

مثال

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

export default class reactTutorialApp extends Component {
   constructor() {
      super()
      this.state = {
         myText: 'Lorem ipsum dolor sit amet, consectetur adipiscing 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.'
      }
   }
   deleteText = () => {
      this.setState({myText: ''})
   }
   render() {
      return (
         
            
               {this.state.myText}
            
         
      );
   }
}

می توانید متن را با کلیک کردن روی آن پاک کنین.

نکته

در تمام بخش های این آموزش برای کامپوننت های stateful (container)، از دستورِ کلاسِ EC6 استفاده می کنیم و برای کامپوننت های stateless (نمایشی) از دستورِ تابعِ EC6 استفاده می کنیم. در بخش بعدی راجع به این موضوع بیش تر توضیح دادیم.

در مثال دوم، از دستورِ arrow EC6 استفاده کرده ایم. باید در نظر داشته باشین که این دستور از حوزه ی lexical استفاده می کنه و کلمه ی کلیدیِ this به شیءِ محیط (سازنده)، bind میشه.

این روش گاهی آن گونه که ما انتظار داریم عمل نمی کنه. روش دیگه برای تعریف متدها استفاده از توابعِ EC5 است ولی در این روش باید this را بصورت دستی bind کنیم. در ادامه مثالی در این رابطه آورده شده.

class reactTutorialApp extends Component {
   constructor() {
      super()
      this.deleteText = this.deleteText.bind(this)
   }
   deleteText() {
      //
   }
   render() {
      //
   }
}
در صورتی که سوال و یا نظری دارید، از بخش نظرات با ما در میان بگذارید.

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

مبحث آموزشی

آموزش React Native

Learn React Native

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد