డైనమిక్ డేటాను నిర్వహించడంలో మరియు వినియోగదారు ఇంటర్ఫేస్లను సమకాలీకరించడంలో స్థితిని నిర్వహించడం React అనేది ఒక ముఖ్యమైన అంశం. రాష్ట్రం ఒక భాగం యొక్క ప్రస్తుత స్థితిని సూచిస్తుంది మరియు అప్లికేషన్ అమలు సమయంలో మారవచ్చు.
లో React, స్థితి అనేది జావాస్క్రిప్ట్ ఆబ్జెక్ట్, ఇది ఒక భాగం నిల్వ చేయడానికి మరియు కాలక్రమేణా సవరించడానికి అవసరమైన ముఖ్యమైన సమాచారాన్ని కలిగి ఉంటుంది. స్థితి మారినప్పుడు, React ఈ మార్పులను ప్రతిబింబించేలా వినియోగదారు ఇంటర్ఫేస్ స్వయంచాలకంగా నవీకరించబడుతుంది.
లో రాష్ట్రాన్ని నిర్వహించడానికి React, మేము అనే ప్రత్యేక ఆస్తిని ఉపయోగిస్తాము state
. మేము భాగం యొక్క కన్స్ట్రక్టర్లో స్థితిని ప్రకటిస్తాము మరియు దాని ప్రారంభ విలువను ప్రారంభిస్తాము. అప్పుడు, మేము పద్ధతిని ఉపయోగించి రాష్ట్ర విలువను సవరించవచ్చు setState()
.
ఉదాహరణకు, ఒక సాధారణ కౌంటర్ భాగాన్ని పరిశీలిద్దాం:
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;
పై ఉదాహరణలో, మేము count
0 యొక్క ప్రారంభ విలువతో పిలువబడే స్థితిని ప్రకటిస్తాము. వినియోగదారు "ఇంక్రిమెంట్" బటన్ను క్లిక్ చేసినప్పుడు, పద్ధతిని ఉపయోగించి విలువ count
ఒకటి ద్వారా పెరుగుతుంది setState()
.
స్థితిని నిర్వహించడం అనేది ప్రస్తుత స్థితి ఆధారంగా ఒక భాగం యొక్క కంటెంట్ మరియు ప్రవర్తనను మార్చడానికి మాకు అనుమతిస్తుంది. డైనమిక్ భాగాలను సృష్టించేటప్పుడు మరియు వినియోగదారుతో పరస్పర చర్య చేస్తున్నప్పుడు ఇది ఉపయోగపడుతుంది.