Menaxhimi i gjendjes në React është një aspekt i rëndësishëm i trajtimit të të dhënave dinamike dhe sinkronizimit të ndërfaqeve të përdoruesit. Gjendja përfaqëson gjendjen aktuale të një komponenti dhe mund të ndryshojë gjatë ekzekutimit të aplikacionit.
Në React, shteti është një objekt JavaScript që mban informacione të rëndësishme që një komponent duhet të ruajë dhe modifikojë me kalimin e kohës. Kur ndryshon gjendja, React përditëson automatikisht ndërfaqen e përdoruesit për të pasqyruar këto ndryshime.
Për të menaxhuar gjendjen në React, ne përdorim një pronë të veçantë të quajtur state
. Ne deklarojmë gjendjen në konstruktorin e komponentit dhe inicializojmë vlerën fillestare të tij. Pastaj, ne mund të modifikojmë vlerën e gjendjes duke përdorur setState()
metodën.
Për shembull, le të shqyrtojmë një komponent të thjeshtë 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;
Në shembullin e mësipërm, ne deklarojmë një gjendje të quajtur count
me një vlerë fillestare 0. Kur përdoruesi klikon butonin "Increment", vlera e count
rritet me një duke përdorur setState()
metodën.
Menaxhimi i gjendjes na lejon të ndryshojmë përmbajtjen dhe sjelljen e një komponenti bazuar në gjendjen aktuale. Kjo është e dobishme kur krijoni komponentë dinamikë dhe ndërveproni me përdoruesin.