State Kullanımı

React Native ile yapılan uygulamalarda çok fazla kullanılan bir yapı da state yapısıdır. Bu yazıda state nedir ve nasıl kullanılır onu göstermeye çalışacağız.

Uygulama açıldığında çağırılan sınıfın constructor fonksiyonu çalışır. Bu fonksiyon ile birlikte state kavramlarını belirtebiliriz. State, uygulama içinde kullanabileceğimiz değişkenlerin sabit değil dinamik olması durumunda bu değişkenleri barındıran bir yapıdır. State içinde tanımlanan değişkenler ve bunların default değerleri sınıf her oluştuğunda constructor fonksiyonu ile birlikte oluşmaktadır.

State değişkenlerini ne zaman kullanırız? Eğer ki değişkenlerimiz dinamik bir şekilde uygulama esnasında değişiklik gösterecek ise bu durumda state kullanmamız gerekmektedir. Küçük bir örnekle gösterelim. Örnek olarak daha önceki 2 sayfalı basit uygulamamız üzerinden gideceğiz.

Uygulamamızın birinci sayfasında bir buton koyalım ve bu butona her basıldığında sayaç değerimiz artsın ve bunu ekranda görelim.

State değişkenini güncellemek için setState fonksiyonunu kullanırız. Eğer ki değişkenin güncellenmeden önceki değerini elde etmek istersek prevState kullanabiliriz.

Sınıfımızın içerisine constructor fonksiyonunu ekledik ve içerisine hem props hem de state eklemiş oldu. State içerisinde de counter adında bir değişken koyduk ve buna default olarak 0 değerini verdik.

render() fonksiyonu içerisinde sayacı artırması için bir buton ve sayaç değerini göstermesi için de bir adet text koyduk. Butonun onPress() fonksiyonunun içerisine setState fonksiyonu ile counter değerinin artırılmasını sağladık.

 

 

 

Teşekkürler.