State

State kullanımı ve örneği

State - Component durumunu saklayan, sadece ClassComponente kullanılan JavaScript objesidir ve immutable olduğundan sadece setState() fonksionu üzerinden degişir.

this.setState() fonksionu olan state'i yenilemek için kullanılır ve onceki state ve mevcut state değişince render methodu yeniden çalışır ve DOM çizimi yapılır.

HTML Button'larda olduğu gibi React Elementinde onClick attributu bulunmakta ve bağlı olduğu metoda her tıklandığında Click event yollar.

class ClassComponent extends React.Component {
constructor(props) {
super(props)
this.state = {
count: 0 //başlangıç değeri
}
this.up = (event) => {
/** count bir arttırır */
this.setState({ count: this.state.count + 1 })
}
this.down = (event) => {
/** count bir azaltır*/
this.setState({ count: this.state.count - 1 })
}
}
render() {
return _('div', {},
_('h1', {}, this.props.data),
_('button', { onClick: this.up }, '+'),
_('span', {}, this.state.count),
_('button', { onClick: this.down }, '-'),
)
}
}
return _(ClassComponent, { data: 'Hello World' })
"-" veya "+" tıklarsanız sayının artıp azalacağını göreceksiniz!