रिएक्ट यूजर इंटरफेस बनाने के लिए एक लोकप्रिय जावास्क्रिप्ट लाइब्रेरी है। यह कई हुक प्रदान करता है जो डेवलपर्स को राज्य का प्रबंधन करने और साइड इफेक्ट करने में सक्षम बनाता है। रिएक्ट में आमतौर पर इस्तेमाल होने वाले दो हुक हैं useRefऔर useState। हालांकि वे पहली नज़र में समान लग सकते हैं, वे अलग-अलग उद्देश्यों की पूर्ति करते हैं और अलग-अलग उपयोग के मामले हैं। इस लेख में, हम उनकी कार्यक्षमताओं की तुलना करने और उनके उपयोग को स्पष्ट करने के लिए उदाहरण प्रदान करते हुए, उनकी गहराई से useRefखोज करेंगे।useState

समझ useRef:

useRefरिएक्ट में हुक एक परिवर्तनशील संदर्भ बनाता है जो घटक रेंडर में बना रहता है । इसके विपरीत useState, जो राज्य का प्रबंधन करता है और फिर से रेंडरिंग को ट्रिगर करता है, useRefमुख्य रूप से DOM को एक्सेस और हेरफेर करने के लिए या म्यूटेबल वैल्यू को स्टोर करने के लिए उपयोग किया जाता है जो री-रेंडरिंग को ट्रिगर नहीं करता है। currentयह एक संपत्ति के साथ एक परिवर्तनशील वस्तु लौटाता है ।

उदाहरण 1: DOM तत्वों तक पहुँचना

मान लें कि बटन क्लिक होने पर हम इनपुट फ़ील्ड पर ध्यान केंद्रित करना चाहते हैं। हम इसे useRefनिम्नानुसार प्राप्त कर सकते हैं:

import React, { useRef } from 'react';

function MyComponent() {
  const inputRef = useRef(null);

  const handleClick = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} />
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
}

समझ useState:

useStateएक कार्यात्मक घटक के भीतर राज्य का प्रबंधन करने के लिए हुक का उपयोग किया जाता है । यह हमें वेरिएबल्स बनाने की अनुमति देता है जिन्हें अपडेट किया जा सकता है और जब उनके मान बदलते हैं तो फिर से प्रस्तुत करना शुरू कर सकते हैं। हुक useStateदो तत्वों के साथ एक सरणी देता है: वर्तमान स्थिति मान और इसे अद्यतन करने के लिए एक फ़ंक्शन।

उदाहरण 2: एक काउंटर का प्रबंधन

आइए इसका उपयोग करके एक सरल काउंटर घटक बनाएँ useState:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

तुलना useRefऔर useState:

जबकि दोनों useRefतथा useStateमूल्यों को संग्रहीत कर सकते हैं, वे विभिन्न उद्देश्यों की पूर्ति करते हैं:

1. प्रबंध राज्य: useStateएक घटक के भीतर राज्य के प्रबंधन के लिए डिज़ाइन किया गया है। जब राज्य अद्यतन करता है, तो यह फिर से प्रस्तुत करता है, यह सुनिश्चित करता है कि यूआई नवीनतम मूल्यों को दर्शाता है।
2. DOM को एक्सेस करना और मैनिप्युलेट करना: useRefमुख्य रूप से DOM के साथ इंटरैक्ट करने के लिए उपयोग किया जाता है, जैसे इनपुट वैल्यू को एक्सेस करना या एलिमेंट्स पर फोकस करना। यह हमें DOM नोड्स के संदर्भों को संग्रहीत करने और पुनः रेंडरिंग को ट्रिगर किए बिना उनकी संपत्तियों को पुनः प्राप्त करने की अनुमति देता है।
3. रेंडरर्स में मूल्यों को संरक्षित करना: useRefघटक रेंडर्स में समान मूल्य बनाए रखता है, जबकि useStateप्रत्येक रेंडर के दौरान स्थिति को आरंभ करता है।
4. री-रेंडरिंग व्यवहार: द्वारा लौटाए गए मान को अपडेट करने से useStateघटक को फिर से रेंडर करने का कारण बनता है, जबकि बनाए गए currentकी संपत्ति को अपडेट करने से री-रेंडर ट्रिगर नहीं होता है।refuseRef

useRefऔर के उपयोग के मामलों को और समझने के लिए useState, आइए कुछ परिदृश्य देखें जहां प्रत्येक हुक अधिक उपयुक्त है:

1. useRefउपयोग के मामले:

1.1। DOM तत्वों तक पहुँचना: जब आपको DOM तत्वों तक पहुँचने या हेरफेर करने की आवश्यकता होती है, जैसे किसी इनपुट पर ध्यान केंद्रित करना, किसी विशिष्ट तत्व तक स्क्रॉल करना या किसी तत्व के आकार को मापना, useRefउपयुक्त विकल्प है। यह आपको DOM नोड का संदर्भ बनाने और इसके गुणों या विधियों तक पहुँचने की अनुमति देता है।

1.2। परिवर्तनीय मूल्यों को संग्रहीत करना: यदि आपके पास एक ऐसा मूल्य है जिसे रेंडरर्स में बने रहने की आवश्यकता है, लेकिन घटक के यूआई को प्रभावित नहीं करता है या री-रेंडर को ट्रिगर करता है, तो यह useRefएक अच्छा विकल्प है। उदाहरण के लिए, आप useRefपिछले मानों को संग्रहीत करने के लिए उपयोग कर सकते हैं, मान कैशिंग कर सकते हैं या तुलना के लिए परिवर्तनीय मानों को संरक्षित कर सकते हैं।

2. useState मामलों का प्रयोग करें:

2.1। घटक स्थिति का प्रबंधन: जब आपको किसी घटक के भीतर स्थिति को प्रबंधित और अद्यतन करने की आवश्यकता होती है, तो यह useStateअनुशंसित दृष्टिकोण है। यह उन मूल्यों को संग्रहीत और अद्यतन करने का एक तरीका प्रदान करता है जो घटक के UI को प्रभावित करते हैं और फिर से रेंडर को ट्रिगर करते हैं।

2.2। उपयोगकर्ता इंटरैक्शन को संभालना: यदि आपके घटक में इंटरैक्टिव तत्व हैं, जैसे चेकबॉक्स, इनपुट फ़ील्ड या टॉगल, तो useStateआमतौर पर इन इंटरैक्शन से जुड़े राज्य को प्रबंधित करने के लिए उपयोग किया जाता है। आप उपयोगकर्ता इनपुट के आधार पर स्थिति को अपडेट कर सकते हैं और UI में परिवर्तनों को दर्शा सकते हैं।

तुलना उदाहरण:

useRefऔर अधिक स्पष्ट रूप से अंतर को स्पष्ट करने के लिए useState, आइए एक उदाहरण पर विचार करें जहां दोनों हुक का उपयोग किया जा सकता है:

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

का उपयोग करना useRef:

import React, { useRef } from 'react';

function Form() {
  const inputRef = useRef(null);

  const handleSubmit = () => {
    const value = inputRef.current.value;
    // Submit the form
    displaySuccessMessage();
  };

  const displaySuccessMessage = () => {
    // Display success message without clearing the input field
  };

  return (
    <div>
      <input ref={inputRef} />
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
}

का उपयोग करना useState:

import React, { useState } from 'react';

function Form() {
  const [inputValue, setInputValue] = useState('');

  const handleSubmit = () => {
    // Submit the form
    displaySuccessMessage();
  };

  const displaySuccessMessage = () => {
    // Display success message
    setInputValue(''); // Clear the input field
  };

  const handleInputChange = (e) => {
    setInputValue(e.target.value);
  };

  return (
    <div>
      <input value={inputValue} onChange={handleInputChange} />
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
}

इस उदाहरण में, useStateइनपुट फ़ील्ड के मान को प्रबंधित करने और उपयोगकर्ता के साथ इंटरैक्ट करने पर री-रेंडर को ट्रिगर करने के लिए उपयोग किया जाता है। राज्य अद्यतन स्थिति को displaySuccessMessageअद्यतन करके इनपुट फ़ील्ड को साफ़ करता है inputValue।

निष्कर्ष:

अंत में, useRefऔर useStateदोनों रिएक्ट में आवश्यक हुक हैं, लेकिन वे अलग-अलग उद्देश्यों की पूर्ति करते हैं। useRefमुख्य रूप से DOM तक पहुँचने और हेरफेर करने के लिए उपयोग किया जाता है या री-रेंडर को ट्रिगर किए बिना परिवर्तनशील मूल्यों को संग्रहीत करता है। यह एक परिवर्तनशील संदर्भ प्रदान करता है जो घटक रेंडर में बना रहता है। दूसरी ओर, useStateघटक स्थिति के प्रबंधन के लिए उपयोग किया जाता है, जब राज्य अद्यतन करता है तो पुन: रेंडरिंग को ट्रिगर करता है। यह एक राज्य मूल्य और इसे अद्यतन करने के लिए एक फ़ंक्शन देता है।

प्रभावी और अनुकूलित रिएक्ट घटकों को लिखने के लिए प्रत्येक हुक का उपयोग करने के बीच अंतर को समझना useRefऔर जानना महत्वपूर्ण है। useStateउपयोग करके useRefऔर useStateसही तरीके से, आप रिएक्ट के साथ इंटरैक्टिव और प्रदर्शन करने वाले एप्लिकेशन बना सकते हैं।

पढ़ने के लिए धन्यवाद!

मुझे आशा है कि आपको यह लेख उपयोगी लगा होगा। यदि आपके कोई प्रश्न या सुझाव हैं, तो कृपया टिप्पणी छोड़ दें। आपकी प्रतिक्रिया मुझे बेहतर बनने में मदद करती है।

Subscribe⭐️ करना न भूलें

फेसबुक पेज :https://www.facebook.com/designTechWorld1

इंस्टाग्राम पेज :https://www.instagram.com/techd.esign/

यूट्यूब चैनल :https://www.youtube.com/@tech..Design/

चहचहाना :https://twitter.com/sumit_singh2311

गियर इस्तेमाल किया :

लैपटॉप :https://amzn.to/3yKkzaC

घड़ी:https://amzn.to/41cialm

आप रिएक्ट बुक पसंद कर सकते हैं: https://amzn.to/3Tw29nx

प्रोग्रामिंग लैंग्वेज से सम्बंधित कुछ अतिरिक्त पुस्तकें:

https://amzn.to/3z3tW5s

https://amzn.to/40n4m6O

https://amzn.to/3Jzstse

https://amzn.to/3nbl8aE

*महत्वपूर्ण अस्वीकरण - "Amazon और Amazon लोगो Amazon.com, Inc. या इसके सहयोगियों के ट्रेडमार्क हैं।"