Správa stavu v React je důležitým aspektem zpracování dynamických dat a synchronizace uživatelských rozhraní. Stav představuje aktuální stav komponenty a může se měnit během spouštění aplikace.
V React, state je objekt JavaScriptu, který obsahuje důležité informace, které komponenta potřebuje ukládat a upravovat v průběhu času. Když se stav změní, React automaticky aktualizuje uživatelské rozhraní, aby tyto změny odráželo.
Pro správu stavu v React, používáme speciální vlastnost s názvem state
. V konstruktoru komponenty deklarujeme stav a inicializujeme její počáteční hodnotu. Poté můžeme pomocí metody upravit hodnotu stavu setState()
.
Uvažujme například jednoduchou komponentu Counter:
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;
Ve výše uvedeném příkladu deklarujeme stav volaný count
s počáteční hodnotou 0. Když uživatel klikne na tlačítko "Increment", hodnota se count
pomocí metody zvýší o jedna setState()
.
Správa stavu nám umožňuje měnit obsah a chování komponenty na základě aktuálního stavu. To je užitečné při vytváření dynamických komponent a interakci s uživatelem.