Durumu yönetmek, React dinamik verileri işlemenin ve kullanıcı arayüzlerini senkronize etmenin önemli bir yönüdür. Durum, bir bileşenin mevcut durumunu temsil eder ve uygulamanın yürütülmesi sırasında değişebilir.
içinde React durum, bir bileşenin zaman içinde depolaması ve değiştirmesi gereken önemli bilgileri tutan bir JavaScript nesnesidir. Durum değiştiğinde, React kullanıcı arayüzünü bu değişiklikleri yansıtacak şekilde otomatik olarak günceller.
içinde durumu yönetmek için React, adlı özel bir özellik kullanırız state
. Durumu bileşenin yapıcısında bildiririz ve başlangıç değerini başlatırız. Ardından, yöntemi kullanarak durumun değerini değiştirebiliriz setState()
.
Örneğin, basit bir Counter bileşenini ele alalım:
import React, { Component } from 'react';
class Counter extends Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
incrementCount =() => {
this.setState(prevState =>({
count: prevState.count + 1
}));
}
render() {
return(
<div>
<p>Count: {this.state.count}</p>
<button onClick={this.incrementCount}>Increment</button>
</div>
);
}
}
export default Counter;
Yukarıdaki örnekte, count
başlangıç değeri 0 olan bir durum bildiriyoruz. Kullanıcı "Arttır" düğmesine tıkladığında, yöntem kullanılarak değeri count
bir artırılıyor setState()
.
Durumu yönetmek, bir bileşenin içeriğini ve davranışını mevcut duruma göre değiştirmemize olanak tanır. Bu, dinamik bileşenler oluştururken ve kullanıcıyla etkileşim kurarken kullanışlıdır.