यदि आप एक रिएक्ट डेवलपर हैं, जिसने अभी तक रिएक्ट हुक के बारे में नहीं सीखा है, तो अब वह क्षण है। यह पोस्ट यूज़इफेक्ट रिएक्ट हुक के बारे में विस्तार से जानेगी। यह एक स्विस आर्मी चाकू के बराबर हुक है। यह कई तरह के मुद्दों को हल करता है, जैसे कि किसी घटक के माउंट होने पर डेटा कैसे प्राप्त किया जाए, किसी राज्य या प्रॉप में बदलाव होने पर कोड कैसे चलाया जाए, टाइमर या अंतराल कैसे सेट किया जाए, और इसी तरह।
एक useEffect का उपयोग बहुत कुछ के लिए किया जाता है जिसे आप एक प्रतिक्रिया घटक में "करना" चाहते हैं जो JSX (किसी भी प्रकार का साइड इफेक्ट) नहीं लौटा रहा है। आपके पास प्रति घटक कई उपयोग प्रभाव भी हो सकते हैं।
यह सारी शक्ति एक कीमत पर आती है: जब तक आप यह नहीं समझते कि यह कैसे काम करता है, यह हैरान करने वाला हो सकता है। इस पोस्ट में, हम विभिन्न उदाहरणों को देखेंगे ताकि आप अवधारणात्मक मॉडल को समझ सकें और इसे अपने कोड पर लागू कर सकें।
रिएक्ट हुक - यह क्या हल करने की कोशिश कर रहा है?
हुक को पहले रिएक्ट संस्करण 16.8 में पेश किया गया था और अब कई रिएक्ट परियोजनाओं द्वारा उपयोग किया जाता है। हुक घटकों के बीच कोड दोहराव की समस्या पर काबू पाता है। वे कक्षाओं के उपयोग के बिना लिखे गए हैं। इसका मतलब यह नहीं है कि रिएक्ट कक्षाओं को छोड़ रहा है; हुक बस एक वैकल्पिक तरीका है।
रिएक्ट आपको स्टेटफुल लॉजिक के साथ परिष्कृत घटकों को जल्दी से बनाने की अनुमति देता है। इन घटकों को अलग करना मुश्किल है क्योंकि वर्ग प्रतिक्रिया जीवनचक्र विधियों पर निर्भर करता है। यहीं पर रिएक्ट हुक आते हैं।
वे आपको एक घटक को छोटे कार्यों में विभाजित करने की अनुमति देते हैं। जीवनचक्र विधियों के आधार पर कोड को छोटे टुकड़ों में विभाजित करने के बजाय, अब आप कार्यक्षमता के आधार पर कोड को छोटी इकाइयों में व्यवस्थित और अलग कर सकते हैं।
यूज़इफेक्ट हुक क्या है?
हुक ऐसे कार्य हैं जो आपको ES6 कक्षाओं को लिखे बिना राज्य और अन्य प्रतिक्रिया क्षमताओं तक पहुंचने की अनुमति देते हैं। प्रतिक्रिया हुक एपीआई में एक हुक होता है जिसे useEffect कहा जाता है। यदि आप प्रतिक्रिया जीवन चक्र से परिचित हैं, तो useEffect हुक समान है कंपोनेंटडिडमाउंट, घटकडिपडडेट, तथा कंपोनेंटविलअनमाउंट जीवन चक्र विधियों संयुक्त।
रिएक्ट हुक प्रलेखन के अनुसार, इसे ES6 वर्ग घटक जीवन चक्र विधियों के साथ कुछ मुद्दों को हल करने के लिए बनाया गया था।
वाक्य - विन्यास
पहला तर्क कॉलबैक फ़ंक्शन है, जिसे प्रत्येक रेंडर के बाद डिफ़ॉल्ट रूप से निष्पादित किया जाता है। दूसरा पैरामीटर एक वैकल्पिक निर्भरता सरणी है जो हुक को केवल तभी कॉलबैक करने का निर्देश देता है जब लक्ष्य स्थिति बदल जाती है।
हुक प्रत्येक निर्भरता के ऐतिहासिक और वर्तमान राज्यों की तुलना करता है। यदि दो मान मेल नहीं खाते हैं, तो हुक पहले पैरामीटर में निर्दिष्ट कॉलबैक को आमंत्रित करता है। निर्भरता सरणियाँ सामान्य कॉलबैक व्यवहार को बदल देती हैं और गारंटी देती हैं कि हुक घटक दायरे में अन्य सभी घटकों की उपेक्षा करता है।
मूल उपयोग
किसी संदेश को सहेजने के लिए, मैं उपरोक्त कोड नमूने में रिएक्ट यूज़स्टेट का उपयोग कर रहा हूं। उसके बाद, मैं अपना संदेश राज्य चर लेता हूं और इसे स्क्रीन पर प्रिंट करता हूं। हालांकि, अब मैं घटक को माउंट करने के एक सेकंड बाद संदेश को संशोधित करने के लिए प्रभाव का उपयोग करना चाहता हूं।
मैंने रिएक्ट फ्रेमवर्क से useEffect आयात करने के बाद useState लाइन के पीछे अपना प्रभाव डाला है। उपयोग करने के लिए पहला पैरामीटर एक फ़ंक्शन है। जब इस फ़ंक्शन हैंडलर को निष्पादित किया जाता है, तो यह आपके द्वारा प्रदान किए जाने वाले किसी भी दुष्प्रभाव का ध्यान रखेगा। फ़ंक्शन एक कॉलबैक फ़ंक्शन है जिसे तब कहा जाता है जब रिएक्ट घटक जीवनचक्र की घटनाओं में से एक होता है।
इसका उपयोग कब करें?
useEffect हुक विभिन्न स्थितियों में उपयोगी हो सकता है। निम्नलिखित सबसे महत्वपूर्ण हैं:
- जब हम आपूर्ति किए गए तर्क के आधार पर डेटा प्राप्त करना चाहते हैं तो हम क्लाइंट पक्ष से इस पैरामीटर को बदल सकते हैं। पैरामीटर को ताजा डेटा के साथ अपडेट करने के बाद इसे वापस बुलाया जाएगा।
- अगर हम एपीआई एंडपॉइंट से डेटा पुनर्प्राप्त करना चाहते हैं और इसे क्लाइंट-साइड पर प्रदर्शित करना चाहते हैं। जब हमारा कंपोनेंट रेंडर करता है, तो यूजइफेक्ट हुक को दिए गए फंक्शन या हैंडलर को निष्पादित किया जाता है, और कंपोनेंट स्टेट्स में डेटा रिकवर किया जाता है। इन स्थितियों को तब यूजर इंटरफेस घटकों में नियोजित किया जाता है।
- जब आपका घटक बाहरी दुनिया के डेटा पर निर्भर करता है और हम यह सुनिश्चित नहीं कर सकते कि डेटा आ जाएगा, तो हमें प्रभाव का उपयोग करना चाहिए (शायद सर्वर वहां नीचे है)। समस्याओं को फेंकने और अन्य घटकों को प्रदर्शित होने से रोकने के बजाय, उन्हें उपयोग प्रभाव हुक में रखें।
उपयोग के मामलों
यदि घटक पहले रन के बाद पुन: प्रस्तुत करता है, तो यह निष्पादित नहीं होगा।
जब भी कोई घटक रेंडर या री-रेंडर करता है, तो उसे हमेशा निष्पादित किया जाना चाहिए।
डिफ़ॉल्ट रूप से, प्रोग्राम केवल एक बार चलता है। बाद में, यदि प्रोप मान बदलते हैं, तो चलाएँ:
अतुल्यकालिक गतिविधियों के लिए, हमेशा useEffect का उपयोग करें।
useEffect कोड ब्लॉक आपके साथी डेवलपर्स के लिए एसिंक्रोनस जॉब्स के स्पष्ट मार्कर हैं। यूजइफेक्ट का उपयोग किए बिना एसिंक्रोनस कोड बनाना संभव है, लेकिन यह "रिएक्शन मेथड" नहीं है और यह जटिलता और गलतियों के जोखिम दोनों को बढ़ाता है।
अतुल्यकालिक कोड लिखने के बजाय useEffect का उपयोग करना जो UI को रोक सकता है, रिएक्ट समुदाय में एक प्रसिद्ध तकनीक है, विशेष रूप से जिस तरह से रिएक्ट टीम ने इसे साइड इफेक्ट करने के लिए बनाया है।
इसका उपयोग करने का एक अन्य लाभ यह है कि डेवलपर्स केवल कोड की समीक्षा कर सकते हैं और तुरंत "नियंत्रण प्रवाह के बाहर" चलने वाले कोड का पता लगा सकते हैं, जो पहले रेंडर चक्र के बाद ही महत्वपूर्ण हो जाता है। इसके अलावा, ब्लॉक पुन: प्रयोज्य और इससे भी अधिक सिमेंटिक कस्टम हुक में निष्कर्षण के लिए उपयुक्त हैं।
एक उदाहरण
useEffect कोड का उपयोग करके, प्रति सेकंड एक संख्या बढ़ाएँ।
निष्कर्ष
मेरे विचार से, अंतर्निहित डिजाइन सिद्धांतों और उपयोग के सर्वोत्तम अभ्यासों को समझना, मेरे विचार में, यदि आप एक अगले स्तर के रिएक्ट डेवलपर बनना चाहते हैं, तो यह सीखना एक महत्वपूर्ण कौशल है।
संक्षेप में, useEffect Hook एक फ़ंक्शन प्राप्त करता है जिसमें अनिवार्य, संभावित रूप से पूर्ण तर्क शामिल होता है। निर्भरता सरणी, जो दूसरा पैरामीटर है, का उपयोग निष्पादन को प्रभावित करने के लिए किया जा सकता है। इससे निपटने के दौरान, रिटर्न फ़ंक्शन का उपयोग करके सफाई कोड लिखना भी आवश्यक है।
हमें टिप्पणियों में बताएं कि क्या लेख मददगार था।
एक जवाब लिखें