React Native: Event ve State Kavramları

Bu yazımızda React Native tarafında “Event” kavramı yani olay yönetimi nasıl gerçekleştiriliyor, ardından da “State” kavramı ve kullanımına değineceğiz.
Bildiğimiz üzere “Event” HTML tarafında elementlerde gerçekleşen durumlardır. Bu olaylar kullanıcı yani bizler tarafından tetikleneceği gibi tarayıcı tarafından da tetiklenebilir. Butona tıklanılması durumda gerçekleşen onclick, elementlerde değişiklik olduğunda gerçekleşen onchange, klavyeden herhangi bir tuşa basılması durumunda gerçekleşen onkeydown bu olaylara başlıca örnek olarak verilebilir.

React Native: Event

React Native tarafında event kullanımı HTML’deki kullanıma oldukça benzerdir. RN tarafında fonksiyon isimleri event’e direkt olarak atılır ve event isimlendirmeleri “camelCase” biçimde adlandırılır.

Örnek olarak App.js dosyamız içerisinde bir Button bileşeni tanımlayalım ve bu butona tıklanıldığında “onPress” event’ini tetikleyerek bize bir alert mesajı vermesini sağlayalım.

React Native: State

“State”, component’lerin içerisine yazdığımız, ve içerisindeki herhangi bir değer değiştiği zaman ilgili bulunduğu component’in tekrar render edilmesini sağlayan bir objedir. Yani ne demek istedik, bileşenimiz içerisinde belli bir anda değişebilecek veya değiştirmek istediğimiz değerleri state içerisine tanımlarız. Örnek vermek gerekirse; bir sayaç tasarladığımızı düşünelim. Sayacın değerini artırıp, azaltmak istediğimizde bu değer sürekli değişecektir ve bu değeri bir state objesi içerisinde tanımlamamız gerekecektir.

Şimdi bu örneğimizi gerçekleştirerek state kavramını daha iyi anlayalım.

1) State tanımı ilgili component’in içerisinde state= {…} şeklinde tanımlanır.
2) Bir state içerisindeki eleman değiştirmek istenildiği zaman this.setState({…}) çağrımı yapılır. Yapılacak olan değişim bu yapı içerisinde tanımlanır.

Örneğimizde iki adet buton kullanarak yazdığımız “sayacAzalt” ve “sayacArttir” fonksiyonları ile state içerisine tanımladığımız sayi değişkenimizi this.setState() çağırımı yaparak artırıp, azaltacağız.

React Native: FlatList Kullanımı React Native: Props Kavramı

Comments

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×