रिएक्ट में स्टेट लिफ्टिंग

अक्सर कई कंपोनेंट्स को एक ही बदलते डेटा को प्रतिबिंबित करना होता है। रिएक्ट में साझा स्टेट को निकटतम सामान्य पूर्वज तक उठाने की सिफारिश की जाती है। आइए एक उदाहरण पर देखें।

मान लीजिए कि हम पानी के तापमान के लिए एक कैलकुलेटर बनाना चाहते हैं। यह एक इनपुट होगा, जिसमें उपयोगकर्ता तापमान दर्ज करेगा, और एक पैराग्राफ, जिसमें फैसला output किया जाएगा: पानी तरल है, पानी ठोस है, पानी गैसीय है।

मान लीजिए कि हमारा कैलकुलेटर एक कंटेनर कंपोनेंट Calculator है:

function Calculator() {
	return <div>
		
	</div>;
}

आइए तापमान दर्ज करने के लिए इनपुट को एक कंपोनेंट TempInp में अलग करें, और फैसले वाले पैराग्राफ को - कंपोनेंट Verdict में:

function Calculator() {
	return <div>
		<Verdict />
		<TempInp />
	</div>;
}

यह समझना आसान है कि TempInp और Verdict दोनों को तापमान वाला स्टेट होना चाहिए। साथ ही, यह तार्किक है, कि यह एक ही तापमान होना चाहिए: इनपुट में डेटा दर्ज करने के दौरान फैसला प्रदर्शित होना चाहिए।

ऐसे मामले में, उस तकनीक का उपयोग करने की सिफारिश की जाती है, जिसे स्टेट लिफ्टिंग कहा जाता है: स्टेट, जो दो (या अधिक) कंपोनेंट्स के लिए सामान्य है, उसे ऊपर उनके सामान्य माता-पिता तक उठा दिया जाता है।

हमारे मामले में, यह पता चलेगा कि तापमान वाला स्टेट Calculator कंपोनेंट का होना चाहिए, जो इसे TempInp और Verdict को प्रॉप्स के रूप में पास करेगा:

function Calculator() {
	const [temp, setTemp] = useState(0);
	
	return <div>
		<Verdict temp={temp} />
		<TempInp temp={temp} />
	</div>;
}

TempInp कंपोनेंट में तापमान बदलने के लिए एक इनपुट होना चाहिए। लेकिन, चूंकि यह तापमान इस कंपोनेंट का एक प्रॉप है, तो सीधे TempInp में इसे बदला नहीं जा सकता। सही तरीका होगा कंपोनेंट Calculator से तापमान बदलने के लिए एक विशेष फ़ंक्शन पास करना:

function Calculator() {
	const [temp, setTemp] = useState(0);
	
	function changeTemp(event) {
		setTemp(event.target.value);
	}
	
	return <div>
		<Verdict temp={temp} />
		<TempInp temp={temp} changeTemp={changeTemp} />
	</div>;
}

वैसे, एक नया फ़ंक्शन पेश किए बिना, चाइल्ड कंपोनेंट में setTemp फ़ंक्शन को पास किया जा सकता है:

function Calculator() {
	const [temp, setTemp] = useState(0);
	
	return <div>
		<Verdict temp={temp} />
		<TempInp temp={temp} setTemp={setTemp} />
	</div>;
}

TempInp और Verdict कंपोनेंट्स का कार्यान्वयन लिखें।

3 ऐसे कार्यों के बारे में सोचें, जिनमें स्टेट लिफ्टिंग का उपयोग करने की आवश्यकता हो। इन कार्यों के समाधान लिखें।