रिएक्ट हुक के लिए शुरुआती गाइड और उनका उपयोग कैसे करें

रिएक्ट हुक क्या हैं और वे क्यों उपयोगी हैं?

रिएक्ट हुक रिएक्ट 16.8 में एक नई विशेषता है जो आपको कक्षा लिखे बिना राज्य और अन्य रिएक्ट सुविधाओं का उपयोग करने की अनुमति देता है। यह घटकों के बीच स्टेटफुल लॉजिक को साझा करना आसान बनाता है और आपके कोड को अधिक पुन: प्रयोज्य और समझने में आसान बनाने में मदद करता है। हुक भी उपयोगी होते हैं क्योंकि वे आपको अपने कोड को छोटे, पुन: प्रयोज्य टुकड़ों में विभाजित करने की अनुमति देते हैं, जिससे इसे प्रबंधित करना और परीक्षण करना आसान हो जाता है।

रिएक्ट हुक और वर्ग-आधारित घटकों के बीच अंतर

रिएक्ट हुक और वर्ग-आधारित घटकों के बीच कुछ प्रमुख अंतरों में शामिल हैं:

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

   
   

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

   
   

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

बेसिक रिएक्ट हुक

यूज़स्टेट ()

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

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

 import React, { useState } from 'react'; const myComponent = () => { // Declare a new state variable, which we'll call "count" // The initial value of count is 0 const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times.</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); }

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

उपयोग प्रभाव ()

useEffect रिएक्ट में एक हुक है जो आपको फ़ंक्शन घटकों में साइड इफेक्ट करने की अनुमति देता है। इसमें सब्सक्रिप्शन सेट अप करने, DOM को संशोधित करने और बाहरी API के साथ इंटरैक्ट करने जैसी चीज़ें शामिल हो सकती हैं।

इसे कंपोनेंट के अंदर कहा जाता है और हर बार कंपोनेंट के रेंडर होने पर चलेगा।

इसका उपयोग कैसे करें इसका एक उदाहरण यहां दिया गया है:

 import React, { useEffect } from 'react'; const MyComponent = () => { useEffect(() => { // Perform some side effect, like subscribing to a data source const subscription = someDataSource.subscribe(data => { // Update state with the data from the subscription setState({ data }); }); // Clean up the subscription when the component unmounts return () => subscription.unsubscribe(); }); // Render the component return ( <div> {/* Use the data from the state in the render method */} Data: {state.data} </div> ); }

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

कॉन्टेक्स्ट का उपयोग करें ()

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

यहाँ कैसे useContext का उपयोग करने का एक उदाहरण है:

 import React, { useContext } from 'react'; // Create a context with a default value const MyContext = React.createContext('defaultValue'); function MyComponent() { // Use the useContext hook to access the value of the context const value = useContext(MyContext); return ( <div> {/* Use the value from the context in the render method */} Value from context: {value} </div> ); }

इस उदाहरण में, MyComponent फ़ंक्शन घटक के भीतर MyContext संदर्भ के मान तक पहुंचने के लिए useContext हुक का उपयोग किया जाता है। फिर संदर्भ के मूल्य का उपयोग रेंडर विधि में किया जा सकता है।

यह ध्यान रखना महत्वपूर्ण है कि संदर्भ का मूल्य केवल उन घटकों में अद्यतन किया जाएगा जहां संदर्भ का उपयोग किया जाता है यदि प्रदाता जो संदर्भ के मूल्य की आपूर्ति करता है अद्यतन किया जाता है। इसका अर्थ है कि संदर्भ के मूल्य में कोई भी परिवर्तन केवल उन घटकों में परिलक्षित होगा जो संदर्भ का उपयोग करते हैं यदि प्रदाता को अद्यतन मूल्य के साथ फिर से प्रस्तुत किया जाता है।

उन्नत प्रतिक्रिया हुक

यूज़रेड्यूसर ()

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

यहाँ एक उदाहरण दिया गया है कि रिएक्ट घटक में यूज़रेड्यूसर का उपयोग कैसे किया जा सकता है:

 import React, { useReducer } from 'react'; const initialState = { count: 0 }; function reducer(state, action) { switch (action.type) { case 'increment': return { count: state.count + 1 }; case 'decrement': return { count: state.count - 1 }; default: throw new Error(); } } function Counter() { const [state, dispatch] = useReducer(reducer, initialState); return ( <> Count: {state.count} <button onClick={() => dispatch({ type: 'decrement' })}>-</button> <button onClick={() => dispatch({ type: 'increment' })}>+</button> </> ); }

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

उपयोग मेमो ()

useMemo रिएक्ट में एक हुक है जो आपको इसके परिणाम को याद करके एक घटक के प्रदर्शन को अनुकूलित करने की अनुमति देता है। यह तर्क के रूप में एक फ़ंक्शन और निर्भरताओं की एक सरणी लेता है, और फ़ंक्शन के यादगार परिणाम देता है।

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

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

उपयोग रेफरी ()

रिएक्ट में, useRef हुक का उपयोग DOM तत्व या रिएक्ट घटक उदाहरण के लिए एक संदर्भ बनाने के लिए किया जाता है। इस संदर्भ का उपयोग तब तत्व के गुणों तक पहुँचने के लिए किया जा सकता है, जैसे कि इसका मान या चेक की गई स्थिति, या तत्व पर फ़ंक्शन कॉल करने के लिए, जैसे फ़ोकस या क्लिक।

यहां एक उदाहरण दिया गया है कि जब एक बटन क्लिक किया जाता है तो इनपुट तत्व पर ध्यान केंद्रित करने के लिए कैसे useRef का उपयोग किया जा सकता है:

 import { useRef } from 'react'; function MyInput() { const inputRef = useRef(null); function handleClick() { // Use the `current` property of the ref to access the DOM element inputRef.current.focus(); } return ( <div> <input type="text" ref={inputRef} /> <button onClick={handleClick}>Focus the input</button> </div> ); }

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

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

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

रिएक्ट हुक के लिए सामान्य उपयोग के मामले

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

निष्कर्ष

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

मैं आपको सलाह दूंगा कि आप अपने आप को रिएक्ट हुक की मूल बातों से परिचित कराएं और उन्हें अपने अगले प्रोजेक्ट में लागू करने का प्रयास करें।