रिएक्टजेएस यूज़स्टेट हुक: एक शुरुआती गाइड

परिचय

रिएक्टजेएस, यूजर इंटरफेस बनाने के लिए एक लोकप्रिय जावास्क्रिप्ट लाइब्रेरी, घटक तर्क को सरल और बढ़ाने के लिए हुक पेश करती है। रिएक्ट में सबसे अधिक उपयोग किए जाने वाले हुक में से एक यूज़स्टेट हुक है, जो एक घटक की स्थिति का प्रबंधन करता है। यह कैसे काम करता है यह समझने से आपको रिएक्ट की पूरी क्षमता को अनलॉक करने में मदद मिल सकती है।

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

हुक क्या हैं?

प्रतिक्रिया में हुक

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

रिएक्ट कई हुक प्रदान करता है, जैसे:

• राज्य का उपयोग करें - राज्य के प्रबंधन के लिए।
• उपयोग प्रभाव - डेटा लाने जैसे दुष्प्रभावों के लिए।
• उपयोगकॉन्टेक्स्ट - आपके एप्लिकेशन के भीतर संदर्भ को प्रबंधित करने के लिए।

हुक राज्य प्रबंधन को सरल बनाते हैं और जटिल वर्ग-आधारित घटकों की आवश्यकता को कम करते हैं। हुक की सुंदरता स्वच्छ और अधिक पठनीय कोड बनाए रखते हुए आपको आवश्यक कार्यक्षमता प्रदान करने की उनकी क्षमता में निहित है।

यूज़स्टेट को इनिशियलाइज़ कैसे करें

बुनियादी आरंभीकरण

एक कार्यात्मक घटक में यूज़स्टेट को प्रारंभ करना सरल है। यह रिएक्ट से हुक आयात करने और इसे आपके घटक के अंदर कॉल करने से शुरू होता है। वाक्यविन्यास इस तरह दिखता है:

import React, { useState } from 'react';

function Counter() {
  // Declare state variable and its updater function
  const [count, setCount] = useState(0);

  return (
    

      
You clicked {count} times
       setCount(count   1)}>
        Click me
      
    
  );
}

टूट - फूट:

• यूज़स्टेट(0) 0 के प्रारंभिक मान के साथ राज्य को आरंभ करता है।
• गिनती राज्य चर है, और सेटकाउंट फ़ंक्शन है जिसका उपयोग इस स्थिति को अद्यतन करने के लिए किया जाता है।
• हर बार जब बटन क्लिक किया जाता है, तो स्थिति अपडेट हो जाती है, और घटक नए मान के साथ पुनः प्रस्तुत हो जाता है।

राज्य कैसे पढ़ें

वर्तमान स्थिति तक पहुँचना

वर्तमान स्थिति को पढ़ना सरल है। आप सीधे अपने JSX में स्टेट वेरिएबल (पिछले उदाहरण में गिनती) का उपयोग करें। चूँकि स्थिति बदलने पर रिएक्ट घटक को फिर से प्रस्तुत करता है, अद्यतन मूल्य स्वचालित रूप से यूआई में परिलक्षित होता है।

आइए अपने पिछले उदाहरण में बदलाव करके यह दिखाएं कि हम राज्य तक कैसे पहुंच सकते हैं:

Current count: {count}

यह कोड गिनती स्थिति तक पहुंचता है और इसे गतिशील रूप से प्रदर्शित करता है।

राज्य को अपडेट कैसे करें

स्टेट सेटर फ़ंक्शन का उपयोग करना

रिएक्ट में स्टेट को अपडेट करना यूज़स्टेट के दूसरे तत्व का उपयोग करके किया जाता है, जो कि सेटर फ़ंक्शन है। यह फ़ंक्शन अद्यतन मान लेता है और उस नई स्थिति के साथ घटक को पुनः प्रस्तुत करता है।

यहां एक उदाहरण दिया गया है कि काउंटर को कैसे बढ़ाया और घटाया जाए:

 setCount(count   1)}>Increment
 setCount(count - 1)}>Decrement

रिएक्ट यह सुनिश्चित करता है कि जब भी स्थिति अपडेट की जाती है, तो परिवर्तन यूआई में निर्बाध रूप से दिखाई देते हैं। यह याद रखना महत्वपूर्ण है कि रिएक्ट में स्टेट अपडेट एसिंक्रोनस होते हैं, जिसका अर्थ है कि आप हमेशा सेटर फ़ंक्शन को कॉल करने के तुरंत बाद अपडेटेड स्थिति नहीं देखेंगे।

राज्य क्या धारण कर सकता है?

विभिन्न प्रकार के मूल्य

रिएक्ट में राज्य विभिन्न प्रकार के डेटा प्रकार रख सकता है, जिनमें शामिल हैं:

• आदिम प्रकार जैसे संख्याएं, तार और बूलियन।
• ऑब्जेक्ट्स और सरणी।
• शून्य और अपरिभाषित मान।

आइए इनके उदाहरण देखें:

राज्य में एक स्ट्रिंग धारण करना:

const [name, setName] = useState("John");

राज्य में एक सारणी धारण करना:

const [items, setItems] = useState([1, 2, 3]);

किसी वस्तु को राज्य में रखना:

const [user, setUser] = useState({ name: "John", age: 30 });

रिएक्ट का यूज़स्टेट हुक आपको इन विभिन्न प्रकार के डेटा को प्रबंधित करने की अनुमति देता है, लेकिन ऑब्जेक्ट और एरे जैसे जटिल प्रकारों को अपडेट करते समय सावधानी बरतनी चाहिए, जैसा कि हम आगे देखेंगे।

राज्य में वस्तुओं और सारणियों को अद्यतन करना

अपरिवर्तनीय अद्यतन

रिएक्ट में ऑब्जेक्ट या ऐरे के साथ काम करते समय, उन्हें अपरिवर्तनीय रूप से अपडेट करना महत्वपूर्ण है। रिएक्ट नेस्टेड ऑब्जेक्ट्स की गहराई से तुलना नहीं करता है, इसलिए किसी ऑब्जेक्ट को सीधे संशोधित करने से री-रेंडर ट्रिगर नहीं होगा। इसके बजाय, आपको अद्यतन मानों के साथ एक नया ऑब्जेक्ट या सरणी बनाना होगा।

उदाहरण: किसी ऑब्जेक्ट को अपडेट करना

const [user, setUser] = useState({ name: "John", age: 30 });

function updateName() {
  setUser(prevState => ({
    ...prevState,
    name: "Doe"
  }));
}

इस उदाहरण में:

• हम ...prevState का उपयोग करके मौजूदा स्थिति (prevState) को एक नई वस्तु में फैलाते हैं।
• फिर, हम मूल उपयोगकर्ता ऑब्जेक्ट को बदले बिना नाम संपत्ति को संशोधित करते हैं।

उदाहरण: एक सारणी को अद्यतन करना

const [items, setItems] = useState([1, 2, 3]);

function addItem() {
  setItems(prevItems => [...prevItems, 4]);
}

यहाँ:

• हम पिछली सरणी (prevItems) को फैलाते हैं और नई आइटम (4) जोड़ते हैं, जिससे एक नई सरणी बनती है।

अक्सर पूछे जाने वाले प्रश्न अनुभाग

क्लास-आधारित राज्य के बजाय यूज़स्टेट का उपयोग क्यों करें?

हुक, यूज़स्टेट की तरह, कार्यात्मक घटकों के भीतर राज्य प्रबंधन को सरल बनाते हैं, जिससे कोड को क्लास घटकों की तुलना में अधिक पठनीय और कम अव्यवस्थित बनाया जाता है।

क्या राज्य एकाधिक डेटा प्रकार रख सकता है?

हाँ, यूज़स्टेट स्ट्रिंग्स, संख्याएँ, सरणियाँ, ऑब्जेक्ट, बूलियन और यहां तक ​​कि शून्य या अपरिभाषित मान भी रख सकता है।

क्या अद्यतन स्थिति अतुल्यकालिक है?

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

मैं वस्तुओं या सारणियों जैसी जटिल स्थितियों को कैसे अद्यतन करूँ?

मूल स्थिति को बदलने से बचने के लिए, हमेशा ऑब्जेक्ट या सरणी की एक प्रति बनाएं, और फिर स्प्रेड ऑपरेटर (...) का उपयोग करके इसे अपरिवर्तनीय रूप से अपडेट करें।

निष्कर्ष

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

अब जब आप यूज़स्टेट के साथ शून्य से नायक बन गए हैं, तो इसे अपनी परियोजनाओं में शामिल करने का प्रयास करें और क्रिया में रिएक्ट का जादू देखें!