டைனமிக் டேட்டாவை கையாளுதல் மற்றும் பயனர் இடைமுகங்களை ஒத்திசைத்தல் ஆகியவற்றில் மாநிலத்தை நிர்வகித்தல் 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;
மேலே உள்ள எடுத்துக்காட்டில், 0 இன் ஆரம்ப மதிப்புடன் அழைக்கப்படும் நிலையை நாங்கள் அறிவிக்கிறோம். count
பயனர் "அதிகரிப்பு" பொத்தானைக் கிளிக் செய்யும் போது, இந்த முறையைப் பயன்படுத்தி ஒன்றின் மதிப்பு count
அதிகரிக்கப்படுகிறது setState()
.
தற்போதைய நிலையின் அடிப்படையில் ஒரு கூறுகளின் உள்ளடக்கத்தையும் நடத்தையையும் மாற்றுவதற்கு நிலையை நிர்வகித்தல் நம்மை அனுமதிக்கிறது. டைனமிக் கூறுகளை உருவாக்கி பயனருடன் தொடர்பு கொள்ளும்போது இது பயனுள்ளதாக இருக்கும்.