Herkese merhaba,
Ben şahsen react öğrenmeye yeni başladım ve react state’ler ve bunları nasıl kullanılacağı hakkında ne anladığımı oldukça basit bir şekilde paylaşmak istiyorum. React konusunda acemiyim ve her zaman olduğu gibi sadece bir veya iki şeyi paylaşmak istiyorum. Yani buradaysanız, muhtemelen react stateler nasıl çalışılacağını anlamaya çalışıyorsunuzdur,
İyi haber! Yalnız değilsin. İlk react ile başladığımda, stateler nasıl çalıştığını anlama sorunum vardı. React state kavramında size yol göstereceğim ve bana güvenin. düşündüğünden daha kolay olacak!
State nedir?
state(durum), bir bileşenin(component) dinamik verilerini depolayan ve bileşenin davranışını belirleyen bir JavaScript nesnesidir. state dinamik olduğu için, bir bileşenin oluşturmalar arasında değişen bilgileri takip etmesini ve dinamik ve etkileşimli olmasını sağlar.
state eklenirken, genellikle bir sınıf bileşenine veya işlevsel bir bileşene eklenerek yapılır.
O halde sınıf ve işlevsel bileşen nedir?
Sınıf Bileşen (class component) Nedir?
Bir sınıf bileşeni, bir React bileşenini tanımlamanın daha özellikli bir yoludur. Ayrıca props (react içindeki parametreler) alan bir işlev gibi davranır, ancak bu işlev aynı zamanda döndürülen JSX’i (JavaScript XML) kontrol eden ek girdi olarak özel bir dahili durumu da dikkate alır. Bir sınıf bileşeniyle ilgili ilginç bir gerçek, onun React.Component’ten genişletmenizi ve bir React öğesi döndüren bir oluşturma işlevi oluşturmanızı gerektirmesidir.
React bileşenlerinin yerleşik bir durum nesnesi vardır. state nesnesi, bileşene ait özellik değerlerini depoladığınız yerdir. state nesnesi değiştiğinde, bileşen yeniden oluşturulur.
Durum Nesnesini(State Object) Oluşturma
state nesnesi, constructor yani yapıcı ile başlatılır:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
import React from 'react'; class Arac extends React.Component { constructor(props) { super(props); this.state = {marka: "Honda"}; } render() { return ( <div> <h1>Arabam</h1> </div> ); } } export default Arac; |
Ve state nesnemiz istediğiniz kadar özellik içerebilir:
Bileşeninizin ihtiyaç duyduğu tüm özellikleri belirtin:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
import React from 'react'; class Arac extends React.Component { constructor(props) { super(props); this.state = { marka: "Honda", model: "Civic", renk: "Beyaz", yil: 2010 }; } render() { return ( <div> <h1>Arabam</h1> </div> ); } } export default Arac; |
State Nesnesini kullanma
Bileşenimizdeki state (durum) özelliklerine erişmeye çalışırken, this.state.ozellikadi sözdizimini kullanarak bileşenin herhangi bir yerinde durum nesnesine başvuruyoruz.
Örnek
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
import React from 'react'; class Arac extends React.Component { constructor(props) { super(props); this.state = { marka: "Honda", model: "Civic", renk: "Beyaz", yil: 2010 }; } render() { return ( <div> <h1>Araba: {this.state.marka}</h1> <p> Rengi: {this.state.renk} <br /> Modeli: {this.state.model} <br/> Yıl: {this.state.yil} <br/> </p> </div> ); } } export default Arac; |
State nesnesini değiştirme
State nesnesindeki bir değeri değiştirmek için this.setState() yöntemini kullanın. State nesnesindeki bir değer değiştiğinde, bileşen yeniden oluşturulacaktır, yani çıktı yeni değer(ler)e göre değişecektir.
Örnek
Bunun için, kullanıcı tıkladığında durumu güncellemek için bir button ve tıklamayı kontrol etmek için de bir onClick olayına ihtiyacımız olacak, Olayları React öğeleriyle işlemek, DOM öğelerindeki olayları işlemeye çok benzer. Ancak, bazı sözdizimi farklılıkları vardır:
- React olayları, küçük harf yerine camelCase kullanılarak adlandırılır.
- JSX ile, bir dizge yerine olay işleyicisi olarak bir işlevi iletirsiniz.
Örneğin:
|
1 2 3 4 5 |
<button onClick={this.renkDegistir}> Renk Değiştir </button> |
Örneğimize devam ederek, renk özelliğini değiştirecek bir onClick olayına sahip bir button ekleyeceğiz:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
import React from 'react'; class Arac extends React.Component { constructor(props) { super(props); this.state = { marka: "Honda", model: "Civic", renk: "Beyaz", yil: 2010 }; this.renkDegistir = this.renkDegistir.bind(this); } renkDegistir() { this.setState({ renk: 'Mavi' }); } render() { return ( <div> <h1>Araba: {this.state.marka}</h1> <p> Rengi: {this.state.renk} <br /> Modeli: {this.state.model} <br/> Yıl: {this.state.yil} <br/> </p> <button onClick={this.renkDegistir}> Renk Değiştir </button> </div> ); } } export default Arac; |
Önceki state bilgisini de kullanmak isterseniz. stateSet fonksiyonuna arrow fonksiyonu ile birlikte parametre geçebilirsiniz. Yukarıdaki örneği renkDegistir butonuna tıkladıkça iki renk arasında değişiklik yapacak şekilde yeniden düzenliyoruz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
import React from 'react'; class Arac extends React.Component { constructor(props) { super(props); this.state = { marka: "Honda", model: "Civic", renk: "Beyaz", yil: 2010 }; this.renkDegistir = this.renkDegistir.bind(this); } renkDegistir() { this.setState((oncekiDurum) => ({ renk: oncekiDurum.renk =='Beyaz' ? 'Mavi' : 'Beyaz' })); } render() { return ( <div> <h1>Araba: {this.state.marka}</h1> <p> Rengi: {this.state.renk} <br /> Modeli: {this.state.model} <br/> Yıl: {this.state.yil} <br/> </p> <button onClick={this.renkDegistir}> Renk Değiştir </button> </div> ); } } export default Arac; |
Not: State nesnesini değiştirmek için her zaman setState() yöntemini kullanın, bileşenin güncellendiğini bilmesini ve render() yöntemini (ve diğer tüm yaşam döngüsü yöntemlerini) çağırmasını sağlar.
Kaynak:
Yorum Yap