React Native State Mantığı

React Native ile uygulama geliştirirken sıklıkla karşılaştığımız kavram state , React Native ile oluşturduğumuz sayfada ilk kurulma anında constructor da çağırmamız gerekir.

State ile ilgili her işlem yapıldığında render methodu yeniden render edilir ve değişkenler ekranda dinamik bir yapıya bürünür. Yani siz ekrandaki bir <Text> componentin’de yaptığınız her değişikliğin kullanıcıya yansımasını istiyorsanız state içerisinde değişken tanımlamalı ve bunu kullanmalısınız const veya let ile yaptığınız işlemlerde değişken güncellediğinizde render içerisindeki değişken gösterimi değişmeyecektir taki state içerisinde yapacağınız herhangi bir işleme kadar.

State i daha iyi anlayabilmek adına tanımlamadan kullanıma kadar örnek üzerinde inceleyelim. Öncelikle state tanımlamasını gerçekleştirelim .

 
constructor(props){
    super(props)   
    this.state={
        textDegiskeni:'Yükleniyor...'
    }
}

Yukarıdaki örnekte constructor tanımladık sonrasında state oluşturduk ve bir değişken tanımladık .

Birde bunu render içerisinde tanımladığımız <Text> içerisinde ekrana yazdıralım

render(){
    return(
        <View>
            <Text>{this.state.textDegiskeni}</Text>
        </View>
        )
}

ekrana değişkeni yazdırdık bide render işlemi tamamlandıktan sonra çalışacak componentDidMount fonksiyonunu kullanalım ve componentler yüklendikten sonra ekrana Tamamlandı yazalım .

componentDidMount(){
    this.setState({
        textDegiskeni:'Yükleme Tamamlandı...'
    })
}

this.setState({}) fonksiyonu ile state içerisinde tanımlı olan değişkenlerin güncellenmesi sağlanır. 

eğer biz burda state değilde let kullanmış olsa idik componentDidMount() içerisinde yine bu let i değiştirseydik yani state kullanmadan bu işlemi yapmış olsaydık , sayfa tamamlanacak let içerisine yeni değişkenimiz tanımlanacak ancak yeniden render() çalışmayacağı için ekranda biz bu değişkeni göremeyecektik .