Son dönemlerin en trend dili olan React js de props ve state konusuna değineceğiz. Öncelikle React props ve state tanimlarindan bahsedelim. Ardından react js’de bunlar arasindaki farklar nelerdir konusunu ele alacagiz, Ek olarak bazi makalelerde component ve bilesen kelimleri ayni anlamda kullanildigi gibi bu yazida da bilesen kavramini kullanmaya gayret ettik.
Props ve State nedir?
Props:
“Properties” kısaltmasıdır ve React componentlerine veri aktarmak için kullanılan bir JavaScript nesnesidir. Bir component, başka bir componentden props olarak adlandırılan özellikler alabilir ve bu özellikleri kullanarak işlemler gerçekleştirebilir. Componentler arasında veri aktarmak için kullanılan bir yoludur ve bir react js’de props ve state arasindaki farklar nelerdirin çıktısını başka bir bileşene girdi olarak kullanılmasını sağlar.
Örneğin, bir “Button” componentine bir “text” prop’u vererek, bu prop’un içeriğini butonun üzerindeki metin olarak gösterebilirsiniz.
State:
State, componentin içindeki verileri tutan ve componentin durumunu izleyen bir JavaScript nesnesidir. Yani componentin başlangıç durumunu belirlemek için bir constructor kullanıyoruz ve state, setState() yöntemi kullanılarak güncelliyoruz. Bir bileşenin state’i değiştiğinde, React bu değişikliği algılar ve bileşenin yeniden render edilmesi gerektiğini anlar.
Örneğin, bir “Counter” componentindeki sayacın değerini tutmak için bir state kullanabilirsiniz. Bu state, başlangıçta “0” olarak ayarlarız ve kullanıcı butona her tıkladığında değer artar. Bu durum, component içindeki verinin değiştiği ve React’in componentin yeniden render edilmesi gerektiğini anlaması nedeniyle bir state olarak tanımlanır.
Örneklerle bu kavramlarını daha iyi anlayabilirsiniz.
Propsun örneği:
import React from "react";
function Button(props) {
return (
<button onClick={props.onClick}>
{props.text}
</button>
);}
export default Button;
Yukarıdaki örnekte, “Button” adlı bir component oluşturduk ve props kullanarak “text” ve “onClick” özelliklerini aldık. Bu özellikleri buton componentinde kullanarak, butonun üzerinde belirli bir metin göstermesini ve tıklandığında belirli bir fonksiyonu çalıştırmasını sağladık.
State örneği:
import React, { Component } from "react";
class Counter extends Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
this.incrementCount = this.incrementCount.bind(this);
}
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;
state props farklari nelerdir. React JS!
React js’de Props ve State Farkları
- Props:
Bir componentden diğerine veri aktarmak için kullanılır ve değiştirilemez. Yani, componentler props’ları değiştiremezler. Bir component, ana component veya başka bir componentden gelen props’ları okuma ve kullanma kabiliyetine sahiptir. Bir componentden diğerine aktarılan verilerdir ve işlevleri, bileşenlerin yeniden kullanılabilirliğini artırmaktır. Bir bileşenin ihtiyaç duyduğu verileri almasına izin verir ve bu verileri kullanarak belirli işlemleri gerçekleştirir.
- State:
Component kendi içindeki değişkenleri tutar ve componentin durumunu (state) tutmak için kullanıriz ve bir componentin içindeki verileri tutar ve componentin bu verilere erişmesine izin verir. Yani componentin yeniden çizilmesine neden olan veri değişikliklerini izler ve componentin kendini yeniden çizmesini sağlar. Bileşenin başlangıç durumunu belirlemek için bir constructor kullanılır ve state, setState() yöntemi kullanılarak güncellenebilir.
Özetle;
Props, bir componentden diğerine veri aktarmak için kullanılırken,
State, bileşenin içindeki verileri tutmak ve durumunu izlemek için kullanıriz.
