ReactJS - Durum
Stateverinin geldiği yerdir. Durumumuzu her zaman olabildiğince basitleştirmeye ve durum bilgisi olan bileşenlerin sayısını en aza indirmeye çalışmalıyız. Örneğin, eyaletten veriye ihtiyaç duyan on bileşene sahipsek, tümü için durumu koruyacak bir konteyner bileşeni oluşturmalıyız.
Eyaleti kullanma
Aşağıdaki örnek kod, EcmaScript2016 sözdizimi kullanılarak durum bilgili bir bileşenin nasıl oluşturulacağını gösterir.
App.jsx
import React from 'react';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
header: "Header from state...",
content: "Content from state..."
}
}
render() {
return (
<div>
<h1>{this.state.header}</h1>
<h2>{this.state.content}</h2>
</div>
);
}
}
export default App;
main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App />, document.getElementById('app'));
Bu, aşağıdaki sonucu verecektir.