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

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

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

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

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

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

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

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

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

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

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

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

jsxfunction 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 फ़ंक्शन को पास किया जा सकता है:

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