માં રાજ્યનું સંચાલન કરવું React એ ગતિશીલ ડેટાને હેન્ડલ કરવા અને વપરાશકર્તા ઇન્ટરફેસને સુમેળ કરવા માટે એક મહત્વપૂર્ણ પાસું છે. રાજ્ય ઘટકની વર્તમાન સ્થિતિનું પ્રતિનિધિત્વ કરે છે અને એપ્લિકેશનના અમલ દરમિયાન બદલાઈ શકે છે.
માં React, રાજ્ય એ JavaScript ઑબ્જેક્ટ છે જે મહત્વપૂર્ણ માહિતી ધરાવે છે કે જે ઘટકને સમયાંતરે સંગ્રહિત અને સંશોધિત કરવાની જરૂર છે. જ્યારે સ્થિતિ બદલાય છે, ત્યારે 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;
ઉપરના ઉદાહરણમાં, અમે 0 ની પ્રારંભિક કિંમત સાથે કહેવાય તેવી સ્થિતિ જાહેર કરીએ છીએ. count
જ્યારે વપરાશકર્તા "ઇન્ક્રીમેન્ટ" બટનને ક્લિક કરે છે, ત્યારે પદ્ધતિનો count
ઉપયોગ કરીને ની કિંમત એક વડે વધારવામાં આવે છે setState()
.
મેનેજિંગ સ્ટેટ અમને વર્તમાન સ્થિતિના આધારે ઘટકની સામગ્રી અને વર્તન બદલવાની મંજૂરી આપે છે. ગતિશીલ ઘટકો બનાવતી વખતે અને વપરાશકર્તા સાથે ક્રિયાપ્રતિક્રિયા કરતી વખતે આ ઉપયોગી છે.