state in react native

خوب رسیدیم به قسمت جذاب ری اکت نیتیو و اون هم state هاست که اولش همه را یکم گیج می کنه

اصن state ها چی هستن؟

ما توی برنامه نویسی بعضی وقتا متغیرهایی داریم که بعدها طی روند برنامه مقدار و اون محتوای داخلشون تغیر می کنن مثلا یه فرم ثبت نام در نظر بگیرید اول کار مقدار نام و نام خانوادگیشون خالیه ولی بعد کاربر یه مقداریو میدعه درسته؟!

خوب ما برای پیاده سازی متغیری که اول کار یه مقداری داره (null) و بعد یه رشته را داره باید با state ها پیاده سازی کنیم البته لزوما همیشه نال نیست می تونه باشه می تونه نباشه

برای شروع باید بگم state ها را وقتی می سازیم که توی سازنده یا همون constructor تعریف بشن ینی به صورت زیر

 export default class Virgool extends Component {     
 constructor(props) {     
 super(props);     
 this.state = {        
 data: {       
  name:'bahar',
  age:20                  
  }        }     } 

بخاطر چرخه حیات کامپونت ها (اول کانستراکتور اجرا میشه) ما state ها رو داخل کانستراکتور می نویسیم

حالا چرا this چون از هرجایی تو کامپونتمون بهش دسترسی داشته باشیم چه توی متد رندر چه توی متدهای دیگه

حالا اگه بخواییم از stateبالا استفاده کنیم باید بنویسیم

render(){
return(
<Text>{this.state.data.name}</Text>
);
}

خوب اینجا اگه شبیه سازتونو روی حالت هاتی لودینگ باشه می بینید که تغیری نکرده و اون بهارو بهتون نشون نمیده

چون state ها توی کانستراکتور ایجاد میشن و طبق چرخه حیات الان برنامه شما توی شبیه ساز مرحله ی کانستراکتور رد کرده و برای دیدنش باید برنامه ریلود بشه

+ ولی خوب بهار تا اینجا فقط نشونش دادیم قرار بود بهار تغیر کنه پس کووو ؟

- خوب صب کن الان میگم

برای تغیر state ها ما از متد یا همون تابع با فانشن یا هرچیزی که اسمشو بزاریم به اسم setState استفاده می کنیم به این صورت که

 import React, { Component } from 'react'; 
 import {Text,View,Button} from "react-native";  
 export default class Virgool extends Component {     
 constructor(props) {         
 super(props);             
 this.state = {                  
 data: {                     
 name:'bahar'                  
 }                  
 }     
 }     
 render(){         
 return(             
 <View>                 
 <Text>{this.state.data.name}</Text>                 
 <Button                     
 onPress={() => {                         
 if (this.state.data.name === 'bahar') {                            
  this.setState({                                 
  data: {                                     
  name:' '                                 
  }                             
  });                         
  }else {                             
  this.setState({                                 
  data: {                                     
  name:'bahar'                                 
  }                             
  });                        
   }                     
   }                     
   }                      
   title="click me"                 
   />             
   </View>        
    );     
    }    
     } 

خوب اینم یه مثال ساده

چی کار می کنه؟ با هر بار کلیک کردن اگه بهار نشون بده text مون , مقدارشُ خالی می کنه و اگه textمون خالی باشه بهار نشون میدعه

خوب view برای چیه ؟ توی ری اکت نیتیو وقتی بیشتر یه کامپونت بخواییم بنویسیم مث الان هم text هم button باید توی یه view کل باشه ما نمی تونیم دوتا ویو داشته باشیم ولی می تونیم ویو داخل ویو بنویسیم ینی چی ؟

   render(){             
    return(   
    <View> 
    <Text>bahar</Text>
    </View>
     <View>
     <Button
     title="click me" 
     />
      </View>
       );
        } 

این غلطهههههه

و باید به این صورت بنویسیم

    render(){                  
    return(        
    <View>      
         <Text>bahar</Text>     
    <View> 
        <Button      title="click me"       />         
    </View>         
    </View>        
    );         
    }  


اگه براتون کاربردی بود یه موهیتو مهمونم کنید ^.^