React State Nedir ? State özellikleri nelerdir? State nasıl oluşturulur?

Bu yazımda state kavramından, özelliklerinden ve state oluşturmadan bahsedeceğim. Props’lar ile ilgili yazıma linkten ulaşabilirsiniz. Link

  • State bir komponentin o anki durumunu gösteren ve değişik propertylerden oluşan bir Javascript objesidir.
  • Her komponent kendi içerisinde statelere sahip olabilir. Ve bu stateler o anki durumunu simgeler. Statenin en temel tanımı bu şekildedir.
  • Komponentin üzerine tıklanmış mı ? Komponent şu anda görünür mü? gibi o komponentin anlık durumunu belirten herşey stateler ile ilgilidir.
  • Komponentin üzerindeki state değiştiği zaman Virtual DOM bunu görür ve sadece sayfanın o komponenti tekrardan render edilir. Yani sadece state değişen komponent render edilir. Diğer komponentlerde herhangi bir değişiklik olmadığı için, bu komponentlerde tekrar tekrar render işlemi gerçekleşmez.

State Oluşturma

  • State vermenin iki yolu vardır ; bir tanesi Constructor içerisinde vermek, diğeri ise Class’ın en tepesinde stateyi oluşturmak. Seçim sizin 🙂
Constructor oluşturarak state kullanımı
Class’ın en tepesinde State oluşturma
  • Bu alanda isVisible şeklinde bir tane property eklenebilir. Başlangıç olarak bu değer false olarak verilir.
  • Eğer isVisible false ise sadece ismi görünsün, eğer isVisible true ise kullanıcı bilgileri de gözüksün. Bu durumu state ile gerçekleştirebiliriz. Peki nasıl ?
  • Öncelikle, constructor veya stateyi classın en tepesinde oluşturarak tanımlama işlemini gerçekleştirebilirsiniz. Aşağıda classın en tepesinde oluşturularak state tanımlanmıştır.
State tanımlanması
  • State tanımlama işlemi gerçekleştirilmiştir. Başlangıç değeri olarak false gönderilmiştir.
  • Aşağıdaki alan ise eğer bu alan true ise kullanıcı bilgilerini göster, eğer false ise bu alanı boş gönder durumunu açıklamaktadır. Basit bir ifleme işlem gerçekleştirilmiştir.
  • Ek olarak ; isVisible const olarak “this.state”’ den türeyecek şekilde tanımlanmıştır. Böylece aşağıdaki ifleme yapıldığında direk isVisible olarak çağırılabilir. Eğer tanımlama işlemi gerçekleştirilmeseydi, “this.sitate.isVisible”şeklinde çağırılacaktı. Tabiki gene seçim sizin , iki türlü de kullanabilirsiniz 🙂
  • Kodun önizlemesine baktığımızda ; state olarak isVisible false gönderildiği için kullanıcı bilgileri aşağıdaki gibi gelmemiştir.
  • Konsoldan kontrol ettiğimizde props ve state bilgilerimiz aşağıdaki gibidir.
  • Eğer belir bir kullanıcı seçip ; konsol ekranlarından isVisible’ını true yaparsak kullanıcı bilgileri aşağıdaki gibi görüntülenecektir.

Küçük çaplı uygulamalarda ve projelerde bu yöntem kullanılabilir. Ancak orta ve büyük ölçekli projelerde Redux veya React’in kendi içinde gelen Context-Api’nin kullanılması gerekmektedir.

Bir sonraki yazıda görüşmek üzere, umarım faydalı olmuştur… 🙂

Kaynakça

  • Mustafa Murat Coşkun- Sıfırdan React.js ve Context Api /Udemy

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir