रिएक्ट की विकास टीम ने रिएक्ट संस्करण 16.8 में हुक की अवधारणा पेश की। एक रिएक्ट हुक एक फ़ंक्शन घटक में राज्य और अन्य प्रतिक्रिया सुविधाओं के उपयोग की अनुमति देता है। हुक यूजस्टेट के साथ, एक फंक्शन कंपोनेंट क्लास कंपोनेंट के रूप में फिर से लिखे बिना अपनी आंतरिक स्थिति सेट कर सकता है।
रिएक्ट क्लास और कार्यात्मक घटकों में अंतर की समीक्षा करने के लिए इस गाइड को देखें।
रिएक्ट में एक और व्यापक रूप से इस्तेमाल किया जाने वाला हुक उपयोग प्रभाव है। useEffect के साथ, साइड इफेक्ट्स (या "इफेक्ट्स") एक कार्यात्मक घटक के संदर्भ में किए जाते हैं। याद रखें कि जावास्क्रिप्ट कार्यों में भी दुष्प्रभाव होते हैं।
साइड इफेक्ट तब होते हैं जब कोई फ़ंक्शन अपने शरीर के बाहर कुछ बदलता है। रिएक्ट में, यह वही बात है और इसमें डेटा लाने, सब्सक्रिप्शन, या पहले रिएक्ट घटकों से डीओएम को बदलना शामिल हो सकता है।
उपयोग प्रभाव क्या है?
रिएक्ट हुक उपयोग प्रभाव एक कार्यात्मक घटक को साइड इफेक्ट करने की अनुमति देता है। यह रिएक्ट क्लास के घटकों में जीवनचक्र विधियों कंपोनेंटडिमाउंट, कंपोनेंटविलअपडेट और कंपोनेंटविलयूनमाउंट के समान तरीके से काम करता है। अधिक विवरण के लिए रिएक्ट जीवनचक्र विधियों पर यह परिचय देखें।
इस लेख में, हम एक बुनियादी उदाहरण देखेंगे कि हुक का उपयोग कैसे शुरू किया जाए। इस लेख का उद्देश्य एक परिचय के रूप में कार्य करना है, न कि गहरा गोता लगाना। UseEffect पर एक व्यापक नज़र के लिए, रिएक्ट हुक से परिचित होने के बाद इस अवलोकन को पढ़ें।
रिएक्ट हुक सिंटेक्स
UseEffect को समझने के लिए, हमें सबसे पहले useState Hook के सिंटैक्स पर संक्षेप में विचार करना होगा। हुक का उपयोग करते समय, उन्हें उसी तरह आयात किया जाना चाहिए जैसे रिएक्ट आयात किया जाता है।
आयात प्रतिक्रिया, { useState, useEffect } 'react' से; अब हम अपने कार्यात्मक घटक को अपने हुक के साथ परिभाषित कर सकते हैं। यह जावास्क्रिप्ट फ़ंक्शन स्कोप का उपयोग कर रहा है। जब हम कार्यात्मक घटक के अंदर हमारे उपयोग प्रभाव हुक को परिभाषित करते हैं, तो इसकी स्थिति तक पहुंच होती है और दायरे के माध्यम से सहारा होता है। अधिक दायरे के लिए, इस प्राइमर के साथ समीक्षा करें।
81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।
बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।
स्टेट सिंटैक्स का उपयोग करें
स्पष्टता के लिए, आइए हमारे उदाहरण के लिए एक साधारण काउंटर का उपयोग करें। हम DOM को आउटपुट देंगे कि कोई बटन कितनी बार क्लिक किया जाता है। आयात के साथ पूरा हमारा कार्यात्मक घटक इस तरह दिखेगा:
यह हमारे बटन को DOM को रेंडर करता है। useEffect को परिभाषित करने से पहले, हम useState Hook को परिभाषित करके अपनी प्रारंभिक स्थिति निर्धारित कर सकते हैं।
const [गिनती, सेटकाउंट] =useState(0);
इस सिंटैक्स का उपयोग करके, रिएक्ट पहले चर को प्रारंभिक अवस्था में सेट करता है। इस मामले में, चर "गिनती" को यूजस्टेट को दिए गए तर्क द्वारा निर्धारित किया जाता है। रिएक्ट ने हमारी गिनती की प्रारंभिक स्थिति को 0 पर सेट कर दिया है। दूसरे चर का उपयोग गिनती को अद्यतन करने के लिए एक फ़ंक्शन के रूप में किया जाएगा।
अब जब हमने गिनती की प्रारंभिक स्थिति 0 पर सेट कर दी है, तो हम राज्य को अपडेट करने के लिए अपने सेटकाउंट फ़ंक्शन का उपयोग कर सकते हैं।
const ButtonCounter =() => { const [गिनती, सेटकाउंट] =useState(0); वापसी (
आपने बटन को {गिनती} बार क्लिक किया
<बटन onClick={() => setCount(count + 1)}>मुझे क्लिक करें
)}
हमारे ऑनक्लिक प्रॉपर्टी में कॉलबैक फ़ंक्शन के रूप में हमारे सेटकाउंट का उपयोग करके, हम हर बार बटन क्लिक होने पर DOM को अपडेट कर सकते हैं।
इसका मतलब यह है कि हमारे सेटकाउंट फ़ंक्शन को परिभाषित किया गया है जब हमारी प्रारंभिक स्थिति को यूजस्टेट के साथ सेट करते समय काम कर रहा है! अब जब हमने यूजस्टेट हुक का सिंटैक्स देख लिया है, तो आइए यूजइफेक्ट को देखें।
इफेक्ट सिंटैक्स का उपयोग करें
जैसा कि पहले कहा गया है, useEffect साइड इफेक्ट्स के उपयोग को परिभाषित करता है। डेटा फ़ेचिंग और मैन्युअल डीओएम परिवर्तनों के माध्यम से घटकों में परिवर्तन साइड इफेक्ट का गठन करते हैं। हर बार कंपोनेंट रेंडर होने पर useEffect Hook को कॉल किया जाता है।
यह रिएक्ट क्लास के घटकों में कंपोनेंटडिडमाउंट और कंपोनेंटडिडअपडेट के समान काम करता है। हमारे काउंटर उदाहरण के साथ आगे बढ़ते हुए, हम अपने
तत्व में एक नाम प्रदर्शित करके हमारे DOM को useEffect अपडेट करेंगे।
कॉन्स्ट [गिनती, सेटकाउंट] =यूज़स्टेट (0); कॉन्स [नाम, सेटनाम] =यूज़स्टेट (""); useEffect(() => {setName(name + "Ryan") }) वापसी (
नमस्कार {नाम}! आपने {गिनती} बार
<बटन ऑनक्लिक ={() => सेटकाउंट पर क्लिक किया (गिनती + 1)}>मुझे क्लिक करें
)}
यह जानबूझकर गलत तरीके से कोडित किया गया है। डीओएम को जो धक्का दिया जाता है वह साबित करता है कि घटक के प्रत्येक रेंडर के साथ उपयोग किया जाता है।
ऐसा इसलिए हो रहा है क्योंकि डिफ़ॉल्ट रूप से, useEffect Hook कंपोनेंटडिमाउंट और कंपोनेंटविलअपडेट के संयोजन की तरह व्यवहार करता है।
घटक के माउंट होने पर ही हमारे हुक को रेंडर करने के लिए अनुकूलित करने के लिए, हम useEffect को दूसरा तर्क भेज सकते हैं। दूसरे तर्क के रूप में useEffect एक खाली सरणी ([]) पास करके, React केवल useEffect को कॉल करना जानता है जब घटक माउंट होता है।
useEffect(() => {setName(name + "Ryan") }, [])
अब, हमें केवल एक बार हमारे कार्यात्मक घटक माउंट होने के बाद प्रदर्शित होने वाली स्ट्रिंग "रयान" को देखना चाहिए।
महान! हुक का उपयोग करने की आदत डालने में कुछ समय लगेगा। इसे ध्यान में रखते हुए, आधिकारिक रिएक्ट दस्तावेज़ में हुक का उपयोग करने पर एक अद्यतन मार्गदर्शिका है। इसे यहां पढ़ें।
निष्कर्ष
रिएक्ट यूजइफेक्ट हुक के इस परिचय में, हमने सीखा कि हुक क्या हैं और उनका उपयोग कैसे करना है। हमने प्रत्येक के लिए एक प्राथमिक उदाहरण के साथ useState और useEffect Hooks के सिंटैक्स को भी कवर किया है।
हुक के लिए संभावित उपयोग इस प्राइमर में जो कुछ भी शामिल है उससे कहीं अधिक है। इसे पढ़ने और अपने स्वयं के कोड में कुछ समय बिताने के बाद, रिएक्ट हुक पर अपनी समझ को गहरा करने के लिए लिंक किए गए संसाधनों को देखें। हालांकि कक्षा के घटक कहीं नहीं जा रहे हैं, हुक रिएक्ट का भविष्य हैं, इसलिए सूचित रहें और उन पर अप टू डेट रहें!