state
Sayfa üzerinde değişen, durumu hiçbir zaman belli olmayan ve her an değişebilme potansiyeli olan bir javascript objesidir. En tepede bir state oluştuysa onu proplar aracılığı ile taşırsınız. Bir state’de değişiklik olduğunda React o alanı tekrardan render edecektir.
constructor(props){
super(props);
this.state = {
name : "ali"
}
}
... Örnek 17 :state örneği
setState
Normalde yukarıdaki örnekte bulunan name’i değiştirme için aşağıdaki gibi yazmamız yeterli.
...
this.state.name = "veli"
... Örnek 18 : setState örneği
Ancak React, one way binding (tek yönlü bağlama) yapan bir kütüphanedir. Yani React’te Angular’da olduğu gibi sürekli dinleyen bir watcher (izleyici) sistemi yoktur. Bu nedenle yapılan değişikliği React’e bildirmemiz gerekiyor. Bu özellik aslında React’in güçlü yönlerinden biridir. Birden fazla state üzerinde değişikliği yapıp bunu istenilen bir anda ekrana yansıtılmasını isteyebilirsiniz. Kısacası React’te işlemleri topluca yaptırma imkânınız olur.
Stateful ve Stateless Component
Yukarıda propTypes konusunda sözü geçmişti şimdi biraz derinine inelim. Stateful component bir state’e sahip component demektir. (proptypes konusunda örnek 5). Bir componenti stateful olarak yazdığınızda React bu componentinizi diff (farkı) algoritmasına dahil eder.
React diff algroitması : React render işlemi sırasında sayfada oluşan ilgili stateful componentleri gezmesi ve bu componentlerin statelerinde değişiklik olup olmadığına bakmasıdır.
Bundan kaçınmak ve daha temiz kod yazmak için; eğer componentinizde hiç bir değişiklik olmayacaksa en mantıklısı stateLess componenttir.(Ör:Footer)