React में स्टेट की रिएक्टिविटी

आइए अब देखते हैं कि रिएक्टिविटी कैसे काम करती है। यह ऐसा करती है कि स्टेट बदलने पर बदलाव तुरंत स्क्रीन पर दिखाई देते हैं।

आइए एक उदाहरण पर नजर डालते हैं। मान लीजिए कि हमारे पास उत्पाद के नाम वाला एक स्टेट है:

jsxconst [name, setName] = useState('prod');

आइए उत्पाद का नाम वर्स्ट में दिखाएं:

jsxreturn <div>
  <span>{name}</span>
</div>;

आइए अब एक बटन बनाएं, जिस पर क्लिक करने से हमारा स्टेट बदल जाए:

jsxreturn <div>
  <span>{name}</span>
  <button onClick={clickHandler}>btn</button>
</div>;

क्लिक हैंडलर में हम setName फंक्शन का उपयोग करेंगे, ताकि उत्पाद का नया नाम सेट कर सकें:

jsxfunction clickHandler() {
  setName('xxxx');
}

आइए अपना सारा कोड एक साथ जोड़ते हैं। ऐसा होगा कि बटन दबाने के बाद टेक्स्ट तुरंत नए मान में बदल जाएगा:

jsxfunction App() {
  const [name, setName] = useState('prod');
  
  function clickHandler() {
    setName('xxxx');
  }
  
  return <div>
    <span>{name}</span>
    <button onClick={clickHandler}>btn</button>
  </div>;
}

अलग-अलग हैंडलर फंक्शन का उपयोग करना जरूरी नहीं है। अनाम एरो फंक्शन का उपयोग किया जा सकता है:

jsxfunction App() {
  const [name, setName] = useState('prod');
  
  return <div>
    <span>{name}</span>
    <button onClick={() => setName('xxxx')}>btn</button>
  </div>;
}