यदि आप ट्विटर पढ़ते हैं, तो आप सबसे अधिक जानते हैं कि हुक एक नया रिएक्ट फीचर है, लेकिन आप पूछ सकते हैं
कि हम उन्हें अभ्यास में कैसे उपयोग कर सकते हैं ? इस लेख में, हम आपको हुक का उपयोग करने के कुछ उदाहरण दिखाएंगे।
समझने के लिए महत्वपूर्ण विचारों में से एक यह है कि
हुक आपको लेखन कक्षाओं के बिना राज्य और अन्य रिएक्ट सुविधाओं का उपयोग करने की अनुमति देता है ।
हुक के पीछे की प्रेरणा
हालांकि घटक-उन्मुख वास्तुकला हमें अपने आवेदन में दृश्य का पुन: उपयोग करने की अनुमति देता है, एक सबसे बड़ी समस्या यह है कि एक डेवलपर को कैसे
घटकों के बीच राज्य-आधारित तर्क का
पुन: उपयोग करना है। जब हमारे पास ऐसे घटक होते हैं जिनके समान राज्य तर्क होते हैं, तो पुन: उपयोग के घटकों के लिए कोई अच्छा समाधान नहीं होता है, और इससे कभी-कभी निर्माणकर्ता और जीवन चक्र विधियों में तर्क का दोहराव हो सकता है।
इस समस्या को हल करने के लिए, आमतौर पर उपयोग करें:
- उच्च क्रम के घटक
- प्रस्तुत करना
लेकिन इन दोनों पैटर्न में नुकसान हैं जो कोड आधार की जटिलता में योगदान कर सकते हैं।
हुक इन सभी समस्याओं को हल करने का लक्ष्य रखते हैं, जिससे आप उन कार्यात्मक घटकों को लिखने की अनुमति देते हैं जिनकी लेखन कक्षाओं के बिना राज्य, संदर्भ, जीवन चक्र विधियों, रेफरी, आदि तक पहुंच है।अल्फा में हुक
इससे पहले कि हम गोता लगाएँ, यह उल्लेख करना महत्वपूर्ण है कि हुक एपीआई का विकास अभी तक पूरा नहीं हुआ है।
इसके अलावा, आधिकारिक दस्तावेज बहुत अच्छा है, और हम इसे पढ़ने की सलाह भी देते हैं क्योंकि यह हुक की शुरूआत के पीछे की प्रेरणा का विस्तार से वर्णन करता है।
UPD मूल लेख, जिसका अनुवाद आप पढ़ रहे हैं, उस समय लिखा गया था जब यह एपीआई अल्फा परीक्षण में था, फिलहाल रिएक्ट हुक आधिकारिक तौर पर उपयोग करने के लिए तैयार है। रिलीज के लिए किए गए अपरिवर्तनीय परिवर्तन (अल्फा की तुलना में) लेख के नीचे या रिलीज नोट्स में पाए जा सकते हैं ।
हुक कक्षाओं से कैसे संबंधित हैं
यदि आप रिएक्ट से परिचित हैं, तो हुक को समझने का एक सबसे अच्छा तरीका यह है कि हम उस व्यवहार को कैसे पुन: पेश कर सकते हैं जो हम हुक का उपयोग करके कक्षाओं के साथ काम करने के लिए करते हैं।
याद रखें कि घटक कक्षाएं लिखते समय, हमें अक्सर निम्नलिखित की आवश्यकता होती है:
- राज्य का प्रबंधन
- जीवन चक्र विधियों का उपयोग करें जैसे कंपोनेंटमाउंट () और कम्पोनेंटडीडयूडेट ()
- पहुँच संदर्भ (स्थिर संदर्भटाइप)
रिएक्ट हुक के साथ, हम कार्यात्मक घटकों में एक समान व्यवहार को पुन: पेश कर सकते हैं:
- एक घटक का उपयोग करने के लिए उपयोग स्टेट () हुक का उपयोग करें
- जीवनचक्र विधियों जैसे कि कंपोनेंटमाउंट () और कंपोनेंटडीडुप्टेट () का उपयोग करने के बजाय, यूजफैक्ट () हुक का उपयोग करें।
- स्थिर संदर्भटाइप गुण का उपयोग करने के बजाय, का उपयोग करेंकनेक्ट () हुक।
हुक के उपयोग के लिए रिएक्ट के नवीनतम संस्करण की आवश्यकता है।
आप अपने पैकेज में प्रतिक्रिया और प्रतिक्रिया-डोम के मूल्य को बदलकर हुक के साथ शुरुआत कर सकते हैं। इसे "अगले" पर भेजें।
UseState () हुक उदाहरण
राज्य प्रतिक्रिया का एक अभिन्न अंग है। यह हमें उन चरों की घोषणा करने की अनुमति देता है जिनमें डेटा होते हैं, जो बदले में, हमारे आवेदन में उपयोग किया जाएगा। कक्षाओं का उपयोग करते हुए, राज्य को आमतौर पर निम्नानुसार परिभाषित किया जाता है:
हुक से पहले, आमतौर पर राज्य केवल एक घटक में उपयोग किया जाता था - एक वर्ग, लेकिन, जैसा कि ऊपर उल्लेख किया गया है,
हुक हमें एक कार्यात्मक घटक के रूप में भी राज्य को जोड़ने की अनुमति देता है ।
नीचे एक उदाहरण देखते हैं। यहां हम एक बैकलिट स्विच का निर्माण करते हैं जो राज्य मूल्य के आधार पर रंग बदलता है। इसके लिए हम हुक यूज़स्टेट () का उपयोग करेंगे।
यहां पूरा कोड है (और एक निष्पादन योग्य उदाहरण) - हम नीचे दिए गए कार्यों को देखेंगे। छवि पर क्लिक करके, आप इस उदाहरण को CodeSandBox पर देख सकते हैं।
हमारा घटक एक फ़ंक्शन है
कोड के उपरोक्त ब्लॉक में, हम React से
यूज़स्ट्रेट आयात करके शुरू करते हैं। UseState संभावनाओं का लाभ उठाने का एक नया तरीका है।
फिर ध्यान दें कि यह घटक
एक फ़ंक्शन है, एक वर्ग नहीं है । दिलचस्प!
राज्य पढ़ें और लिखें
इस फंक्शन के अंदर, हम स्टेट में वैरिएबल बनाने के लिए यूज़स्टैट कहते हैं:
यूज़स्ट्रेट का उपयोग राज्य चर घोषित करने के लिए किया जाता है और इसे किसी भी प्रकार के मूल्य के साथ आरंभीकृत किया जा सकता है (कक्षाओं में राज्य के विपरीत, जो एक ऑब्जेक्ट होना चाहिए)।
जैसा कि ऊपर देखा गया है, हम useState के वापसी मूल्य पर विनाशकारी उपयोग कर रहे हैं।
- इस मामले में पहला मूल्य, प्रकाश वर्तमान स्थिति है (जैसे कि यह .स्टेट)
- दूसरा मान वह फ़ंक्शन होता है जिसका उपयोग राज्य मान (प्रथम मान) (जैसे it.setState) को अपडेट करने के लिए किया जाता है।
फिर हम दो फ़ंक्शन बनाते हैं, जिनमें से प्रत्येक राज्य को अलग-अलग मानों पर सेट करता है, 0 या 1।
फिर हम उन्हें दृश्य में बटन पर ईवेंट हैंडलर के रूप में लागू करते हैं:
प्रतिक्रिया ट्रैक राज्य
जब "ऑन" बटन दबाया जाता है, तो सेटऑन फ़ंक्शन को कहा जाता है, जिसे सेटलाइट (1) कहते हैं। कॉलिंग सेटलाइट (1)
अगले रेंडर के लिए लाइट वैल्यू को अपडेट करता है । यह थोड़ा जादुई लग सकता है, लेकिन
रिएक्ट इस चर के मूल्य का ट्रैक रखता है और इस घटक के फिर से प्रस्तुत किए जाने पर एक नया मूल्य पारित करेगा।
तब हम वर्तमान स्थिति (
प्रकाश ) का उपयोग यह निर्धारित करने के लिए करते हैं कि दीपक चालू होना चाहिए या नहीं। यही है, हम
प्रकाश के मूल्य के आधार पर एसवीजी का भरण रंग निर्धारित करते हैं। यदि प्रकाश 0 (बंद) है, तो fillColor को # 000000 पर सेट किया जाता है (और यदि यह 1 है (तो), fillColor को # ffbb73 पर सेट किया जाता है)।
कई राज्यों
यद्यपि हम उपरोक्त उदाहरण में ऐसा नहीं करते हैं, आप एक से अधिक बार उपयोग स्टेट कॉल करके कई राज्य बना सकते हैं। उदाहरण के लिए:
नोट।
हुक का उपयोग करने की कुछ सीमाएं हैं जिनके बारे में आपको पता होना चाहिए। सबसे महत्वपूर्ण बात, आपको केवल अपने फ़ंक्शन के शीर्ष स्तर पर हुक को कॉल करना चाहिए। अधिक जानकारी के लिए " हुक नियम " देखें।
UseEffect () हुक उदाहरण
UseEffect हुक आपको कार्यात्मक घटकों में साइड इफेक्ट करने की अनुमति देता है । साइड इफेक्ट्स में एपीआई एक्सेस करना, डोम को अपडेट करना, इवेंट हैंडलर्स को सब्सक्राइब करना शामिल हो सकता है - आप जो चाहते हैं वह होने के लिए एक "अनिवार्य" कार्रवाई के लिए है।
UseEffect () हुक का उपयोग करके, React जानता है कि आप रेंडर करने के बाद एक विशिष्ट कार्रवाई करना चाहते हैं।
आइए नीचे एक उदाहरण देखें। हम एपीआई को कॉल करने और प्रतिक्रिया प्राप्त करने के लिए यूज़फेक्ट () का उपयोग करेंगे।
यह कोड उदाहरण
useState और
useEffect दोनों का उपयोग करता है, और इसका कारण यह है कि हम एपीआई कॉल के परिणाम को राज्य में लिखना चाहते हैं।
डेटा प्राप्त करें और स्थिति अपडेट करें
"प्रभाव का उपयोग करें" के लिए, हमें अपनी कार्रवाई को
उपयोग फ़ंक्शन में रखने की
आवश्यकता है,
अर्थात् , हम "फ़ंक्शन" प्रभाव को एक अनाम फ़ंक्शन के रूप में पास करते हैं, उपयोग करने के लिए पहले तर्क के रूप में।
ऊपर के उदाहरण में, हम एक एपीआई का उल्लेख कर रहे हैं जो नामों की सूची लौटाता है। जब
प्रतिसाद देता है, तो हम इसे JSON में बदल देते हैं, और फिर राज्य सेट करने के लिए
सेटनाम (डेटा) का उपयोग करते हैं।
प्रभाव का उपयोग करते समय प्रदर्शन के मुद्दे
हालांकि, उपयोग के बारे में कहा जाने वाला कुछ और है।
सोचने वाली पहली बात यह है कि डिफ़ॉल्ट रूप से, हमारे
उपयोग को हर रेंडर पर बुलाया जाएगा! अच्छी खबर यह है कि हमें आउटडेटेड डेटा के बारे में चिंता करने की आवश्यकता नहीं है, लेकिन बुरी खबर यह है कि हम संभवतः प्रत्येक रेंडरिंग (इस मामले में) के लिए एक HTTP अनुरोध नहीं करना चाहते हैं।
आप इस मामले में,
दूसरे उपयोग के तर्क का उपयोग करके प्रभावों को छोड़ सकते हैं। उपयोग करने के लिए दूसरा तर्क वे चर की एक सूची है जिसे हम "निरीक्षण" करना चाहते हैं, और उसके बाद ही हम प्रभाव को फिर से चलाएंगे जब इनमें से एक मान बदलता है।
उपरोक्त कोड उदाहरण में, ध्यान दें कि हम दूसरे तर्क के रूप में
एक खाली सरणी से गुजर रहे हैं। यह हम है जो रिएक्ट बताते हैं कि हम केवल घटक को बढ़ते समय इस प्रभाव का नाम देना चाहते हैं।
प्रभाव प्रदर्शन के बारे में अधिक जानने के लिए, श्वेत पत्र में इस अनुभाग को देखें।
इसके अलावा, useState फ़ंक्शन की तरह, useEffect आपको कई उदाहरणों का उपयोग करने की अनुमति देता है, जिसका अर्थ है कि आपके पास कई उपयोग किए जाने वाले फ़ंक्शन हो सकते हैं।
UseContext () हुक उदाहरण
प्रसंग बिंदुप्रतिक्रिया में संदर्भ एक बच्चे के घटक के लिए मूल घटक में एक मूल्य तक पहुंचने का एक तरीका है।
संदर्भ की आवश्यकता को समझने के लिए: रिएक्ट एप्लिकेशन बनाते समय, आपको अक्सर अपने रिएक्ट ट्री के ऊपर से मानों को पास करने की आवश्यकता होती है। संदर्भ का उपयोग नहीं करके, आप उन घटकों के माध्यम से प्रॉपर पास करते हैं जिनके बारे में जानने की आवश्यकता नहीं है।
"असंबंधित" घटकों के पेड़ के नीचे से गुजरने को प्यार से प्रॉप्स ड्रिलिंग कहा जाता है।
रिएक्ट कॉन्टेक्ट प्रॉपर ड्रिलिंग प्रॉब्लम को आपको इन वैल्यूज़ को रिक्वेस्ट करने वाले किसी भी कंपोनेंट के साथ कंपोनेंट ट्री के जरिए वैल्यू शेयर करने की प्रॉब्लम को हल करता है।
useContext () संदर्भ के उपयोग को सरल करता हैUseContext हुक के साथ, संदर्भ का उपयोग करना पहले से कहीं अधिक आसान है।
UseContext () फ़ंक्शन एक संदर्भ ऑब्जेक्ट लेता है, जिसे शुरू में
React.createContext () से वापस किया
जाता है , और फिर वर्तमान संदर्भ मान लौटाता है। आइए नीचे एक उदाहरण देखें।
उपरोक्त कोड में, React.createContext () का उपयोग करके JediContext का संदर्भ बनाया गया है।
हम अपने ऐप घटक में JediContext.Provider का उपयोग करते हैं और वहां "ल्यूक" के लिए मूल्य निर्धारित करते हैं। इसका मतलब यह है कि किसी भी घटक को संदर्भ तक पहुंचने की आवश्यकता है जो अब इस मूल्य को पढ़ सकेगा।
प्रदर्शन () फ़ंक्शन में इस मान को पढ़ने के लिए, हम JCiContext तर्क से गुजरते हुए, कॉल कॉन्टेक्स्ट का उपयोग करते हैं।
फिर हम संदर्भ ऑब्जेक्ट पास करते हैं जो हमें React.createContext से मिला है, और यह स्वचालित रूप से मूल्य प्रदर्शित करता है। जब प्रदाता मूल्य अपडेट किया जाता है, तो यह हुक स्वचालित रूप से अंतिम संदर्भ मूल्य के साथ काम करेगा।
एक बड़े एप्लिकेशन में संदर्भ के लिए लिंक प्राप्त करना
ऊपर, हमने दोनों घटकों के भीतर जेडीकोटेक्स्ट बनाया, लेकिन एक बड़े अनुप्रयोग में, डिस्प्ले और ऐप अलग-अलग फाइलों में होंगे। इसलिए, यदि आपके पास एक समान स्थिति है, तो आप सोच रहे होंगे: "हमें फ़ाइलों के लिए जेडीएक्सएक्सएक्सएक्सएक्स का लिंक कैसे मिलता है?"
इसका उत्तर यह है कि आपको
एक नई फ़ाइल बनाने की आवश्यकता
है जो जेडीकोटेक्स्ट को निर्यात करती है ।
उदाहरण के लिए, आपके पास एक संदर्भ हो सकता है। जेएस फाइल जिसमें कुछ इस तरह हो:
और फिर App.js (और Display.js) में आपको लिखना चाहिए:
धन्यवाद,
डेव )
UseRef () हुक उदाहरण
Refs रेंडर () विधि में बनाए गए रिएक्ट तत्वों तक पहुंचने का एक तरीका प्रदान करता है।
यदि आप React Refs में नए हैं, तो आप इस
परिचय को React Refs पढ़ सकते हैं।
उपयोग
रीफ () फ़ंक्शन एक रेफ ऑब्जेक्ट देता है।
उपयोग () और इनपुट के साथ रूपों
आइए useRef () हुक का उपयोग करके एक उदाहरण देखें।
उपरोक्त उदाहरण में, हम p टैग के इनपुट मूल्य को रेंडर करने के लिए useState () के साथ संयोजन में useRef () का उपयोग करते हैं।
नाम ने नाम परिवर्तन चर में बनाया गया है। फिर चर nameRef इनपुट में इस्तेमाल किया जा सकता है, रेफ के रूप में दिया जाता है। अनिवार्य रूप से, इसका मतलब है कि अब इनपुट फ़ील्ड की सामग्री रेफ के माध्यम से सुलभ होगी।
कोड में सबमिट बटन पर एक ऑनक्लिक इवेंट हैंडलर है, जिसे सबमिटबटन कहा जाता है। सबमिटबटन फ़ंक्शन कॉल सेटनाम (उपयोग के माध्यम से बनाया गया)।
जैसा कि हमने पहले ही हुकस्टेट का उपयोग किया था, सेटनाम का उपयोग राज्य का नाम सेट करने के लिए किया जाएगा। इनपुट टैग से नाम निकालने के लिए, हम nameRef.current.value का मान पढ़ते हैं।
उपयोग के संबंध में एक और टिप्पणी है कि यह रेफरी की विशेषता से अधिक उपयोग किया जा सकता है।
कस्टम हुक का उपयोग करना
हुक की सबसे अच्छी विशेषताओं में से एक यह है कि आप आसानी से
अपने स्वयं के हुक बनाकर कई घटकों के बीच तर्क साझा कर सकते हैं
।नीचे दिए गए उदाहरण में, हम एक कस्टम
सेटकाउंटर () हुक
बनाएंगे जो हमें राज्य को ट्रैक करने और कस्टम राज्य अपडेट फ़ंक्शन प्रदान करने की अनुमति देता है!
इसके अलावा, इस उपयोग को देखने के लिए हुक का उपयोग करें और कैंट से उपयोग करें
उपर्युक्त कोड ब्लॉक में, हम एक उपयोग फ़ंक्शन बनाते हैं जो हमारे हुक के तर्क को संग्रहीत करता है।
कृपया ध्यान दें कि useCounter अन्य हुक का उपयोग कर सकता है! उपयोग के माध्यम से एक नया हुक राज्य बनाकर शुरू करते हैं।
फिर हम दो सहायक कार्यों को परिभाषित करते हैं:
वेतन वृद्धि और
वेतन वृद्धि , जो
सेटकाउंट कहते हैं और तदनुसार वर्तमान
गणना को समायोजित करते हैं।
अंत में, हम अपने हुक के साथ बातचीत करने के लिए आवश्यक लिंक वापस करते हैं।
प्रश्न: क्या होता है, किसी ऑब्जेक्ट के साथ एक सरणी लौटाता है?
एक: ठीक है, हुक में अधिकांश चीजों की तरह, एपीआई सम्मेलनों अभी तक पूरा नहीं हुआ है। लेकिन हम यहां क्या करते हैं, एक सरणी देता है, जहां:
- पहला आइटम हुक का वर्तमान मूल्य है।
- दूसरा तत्व एक ऑब्जेक्ट है जिसमें हुक के साथ बातचीत करने के लिए उपयोग किए जाने वाले फ़ंक्शन हैं।
यह कन्वेंशन आपको हुक के वर्तमान मूल्य को आसानी से "पुनर्नामित" करने की अनुमति देता है - जैसा कि हम
myCount के साथ
करते हैं ।
हालाँकि, आप अपने कस्टम हुक से जो चाहें वापस कर सकते हैं।
उपरोक्त उदाहरण में, हम अपने दृश्य में
ऑनक्लिक हैंडलर के रूप में
वेतन वृद्धि और
वेतन वृद्धि का उपयोग करते हैं। जब उपयोगकर्ता बटन दबाता है, तो काउंटर अपडेट किया जाता है और दृश्य में फिर से प्रदर्शित होता है (जैसे
myCount )।
रिएक्ट हुक के लिए टेस्ट लिखना
हुक के लिए परीक्षण लिखने के लिए, हम परीक्षण के लिए
प्रतिक्रिया-परीक्षण-पुस्तकालय का उपयोग करेंगे।
प्रतिक्रिया-परीक्षण-पुस्तकालय रिएक्ट घटकों के परीक्षण के लिए एक बहुत ही हल्का समाधान है। यह
प्रतिक्रिया-डोम और
प्रतिक्रिया-डोम / परीक्षण-बर्तनों का विस्तार है ।
प्रतिक्रिया-परीक्षण-पुस्तकालय का उपयोग करना सुनिश्चित करता है कि आपके परीक्षण सीधे डोम नोड्स के साथ काम करते हैं।
परीक्षण हुक के साथ, सब कुछ अभी तक स्पष्ट नहीं है। वर्तमान में, आप अलगाव में हुक का परीक्षण नहीं कर सकते। इसके बजाय, आपको अपने हुक को घटक के साथ संलग्न करना होगा और इस घटक का परीक्षण करना होगा।
तो, नीचे हम अपने हुक के लिए परीक्षण लिखेंगे, हमारे घटकों के साथ बातचीत करेंगे, और सीधे हुक के साथ नहीं। अच्छी खबर यह है कि हमारे परीक्षण नियमित प्रतिक्रिया परीक्षणों की तरह दिखाई देंगे।
परीक्षण का उपयोग करें () हुक
आइए
उपयोगस्ट्रेट हुक के लिए परीक्षण लिखने का एक उदाहरण देखें। ऊपर दिए गए ट्यूटोरियल में, हम ऊपर उपयोग किए गए उपयोग के उदाहरण की अधिक विविधता का परीक्षण करते हैं। हम यह सुनिश्चित करने के लिए परीक्षण लिखेंगे कि "ऑफ" बटन दबाने से राज्य 0 पर सेट हो जाता है और "ऑन" बटन दबाने से राज्य 1 पर सेट हो जाता है।
उपरोक्त कोड ब्लॉक में, हम
प्रतिक्रिया-परीक्षण-पुस्तकालय और परीक्षण के तहत घटक से कुछ सहायकों को आयात करके शुरू करते
हैं ।
- प्रस्तुत करना , यह हमारे घटक को प्रदर्शित करने में मदद करेगा। यह एक कंटेनर में प्रदान किया जाता है जिसे document.body में जोड़ा जाता है
- getByTestId को डेटा-टेस्टिड द्वारा DOM तत्व मिलता है
- फायरइवेंट , इसका उपयोग DOM इवेंट को "ट्रिगर" करने के लिए किया जाता है। उदाहरण के लिए, इवेंट डेलिगेशन के माध्यम से कुछ DOM ईवेंट्स को दस्तावेज़ और संसाधित करने के लिए यह एक इवेंट हैंडलर संलग्न करता है। एक बटन पर क्लिक करके।
इसके अलावा, परीक्षण अनुमोदन फ़ंक्शन में, हम
डेटा-टेस्टिड के साथ तत्वों के चर और उनके मूल्यों को
निर्धारित करते हैं जिन्हें हम परीक्षण में उपयोग करना चाहते हैं। DOM पर तत्वों के लिंक के साथ, हम तब एक बटन पर एक क्लिक का अनुकरण करने के लिए
फ़ायरइन विधि का उपयोग कर सकते हैं।
परीक्षण सत्यापित करता है कि यदि
ऑनबटन पर क्लिक किया जाता है , तो राज्य का मूल्य 1 पर सेट होता है, और जब आप
ऑफबटन पर क्लिक करते हैं
तो राज्य 1 होता है।
परीक्षण का उपयोग करें () हुक
इस उदाहरण में, हम
useEffect हुक का उपयोग करके कार्ट में एक उत्पाद जोड़ने के लिए परीक्षण लिखेंगे। आइटम की संख्या भी स्थानीयस्टोरेज में संग्रहीत है। नीचे CodeSandbox में index.js फ़ाइल में कार्ट में आइटम जोड़ने के लिए उपयोग किए जाने वाले वास्तविक तर्क होते हैं।
हम यह सुनिश्चित करने के लिए परीक्षण लिखेंगे कि कार्ट आइटम की संख्या का अद्यतन भी स्थानीयस्टोरेज में परिलक्षित होता है, और भले ही पृष्ठ फिर से लोड हो जाए, कार्ट आइटम की संख्या अभी भी समान है।
परीक्षण की पुष्टि करने वाले फ़ंक्शन में, हम सबसे पहले
कार्टिस्टेम को
लोकलस्टोरेज में 0 पर सेट करते हैं, जिसका अर्थ है कि कार्ट आइटम की संख्या 0. है। फिर हमें
ऐप कंपोनेंट से विनाशकारी के माध्यम से
कंटेनर और
रेंडर दोनों मिलते हैं।
रेंडरर हमें पेज रीलोड का अनुकरण करने की अनुमति देता है।
फिर हम बटन और पी टैग के लिंक प्राप्त करते हैं, जो वर्तमान टोकरी मूल्य प्रदर्शित करता है और उन्हें चर पर सेट करता है।
एक बार यह हो जाने के बाद, परीक्षण फिर
addButton पर एक क्लिक का अनुकरण करता है और जाँचता है कि क्या वर्तमान बास्केट काउंटर 1 है और पृष्ठ को फिर से लोड करता है, इसके बाद यदि यह जांचता है कि क्या
लोकलस्टोरेज ,
कार्ट इटेम 1 पर सेट है। तो यह
रीसेटबटन और क्लिक पर अनुकरण करता है जाँच करता है कि कार्ट आइटम की वर्तमान संख्या 0 पर सेट है या नहीं।
परीक्षण उपयोग () हुक
इस उदाहरण में, हम
useRef हुक का परीक्षण करेंगे, और हम परीक्षण के आधार के रूप में मूल उपयोग के ऊपर का उपयोग करेंगे।
UseRef का उपयोग इनपुट क्षेत्र से मान प्राप्त करने के लिए किया जाता है, और फिर मान को राज्य में सेट करता है। नीचे
CodeSandbox में
index.js फ़ाइल में मान दर्ज करने और भेजने के लिए तर्क होता है।
परीक्षण को मंजूरी देने वाले फ़ंक्शन में, हम इनपुट फ़ील्ड में चर सेट करते हैं, एक पी टैग जो रेफरी के वर्तमान मूल्य और एक सबमिट बटन को प्रदर्शित करता है। हम उस मान को भी सेट करते हैं जिसे हम newName वैरिएबल के लिए इनपुट फ़ील्ड में दर्ज करना चाहते हैं। इसका उपयोग परीक्षण में सत्यापन के लिए किया जाएगा।
FireEvent.change विधि का उपयोग इनपुट फ़ील्ड में एक मान दर्ज करने के लिए किया जाता है, उस स्थिति में निरंतर newName में संग्रहीत नाम का उपयोग किया जाता है, जिसके बाद सबमिट बटन दबाया जाता है।
परीक्षण तब यह देखने के लिए जांचता है कि बटन दबाने के बाद रेफ मान
नएनाम के मूल्य से
मेल खाता है
या नहीं ।
अंत में, आपको "कोई परीक्षण क्रैश नहीं होना चाहिए, बधाई!" कंसोल में संदेश।
हुक के लिए सामुदायिक प्रतिक्रिया
रिएक्ट हुक की शुरुआत के बाद से, समुदाय इस सुविधा से खुश हो गया है, और हमने रिएक्ट हुक का उपयोग करने के
कई उदाहरण और उदाहरण देखे हैं। यहाँ कुछ मुख्य हैं:
- इस साइट पर रिएक्ट हुक का संग्रह है।
- प्रतिक्रिया-उपयोग , लाइब्रेरी जो रिएक्ट हुक के एक समूह के साथ आती है।
- इस CodeSandbox उदाहरण से पता चलता है कि प्रतिक्रिया-वसंत का उपयोग करके एनिमेशन बनाने के लिए उपयोग कैसे करें हुक का उपयोग करें
- एक उपयोग करने योग्य Reducer उदाहरण है जो आपको एक reducer में इसे अद्यतन करने के लिए बस एक राज्य को बदलने के लिए अनुमति देता है।
- यह उदाहरण CodeSandbox पर है, जो माता-पिता के बच्चे के संचार का एक जटिल एकीकृत उपयोग और रेडीज़र का उपयोग दिखाता है।
- रिएक्ट हुक स्विच घटक
- रिएक्ट हुक का एक और संग्रह जिसमें इनपुट मान, डिवाइस ओरिएंटेशन और दस्तावेज़ दृश्यता के लिए हुक हैं।
विभिन्न प्रकार के हुक
विभिन्न प्रकार के हुक हैं जिन्हें आप अपने रिएक्ट एप्लिकेशन में उपयोग करना शुरू कर सकते हैं। वे नीचे सूचीबद्ध हैं:
- उपयोग स्टेट - हमें उन में राज्य तक पहुँच के साथ शुद्ध कार्यों को लिखने की अनुमति देता है।
- useEffect - हमें साइड इफेक्ट्स करने की अनुमति देता है। साइड इफेक्ट्स API कॉल हो सकते हैं, DOM को अपडेट कर सकते हैं, इवेंट हैंडलर्स को सब्सक्राइब कर सकते हैं।
- useContext - आपको उनमें संदर्भ के साथ शुद्ध कार्य लिखने की अनुमति देता है।
- useReducer - हमें एक Redux की तरह Reducer का लिंक देता है
- useRef - आपको शुद्ध कार्यों को लिखने की अनुमति देता है जो एक उत्परिवर्ती रेफ ऑब्जेक्ट लौटाते हैं।
- useMemo - .
- useCallback — Hook .
- useImperativeMethods - , ref.
- useMutationEffects — useEffect Hook , DOM-.
- useLayoutEffect - DOM -.
- hooks - .
hooks
हुक के बारे में महान बात यह है कि वे मौजूदा कोड के साथ कंधे से कंधा मिलाकर काम करते हैं, इसलिए आप धीरे-धीरे ऐसे बदलाव ला सकते हैं जो हुक को लागू करते हैं। आपको बस इतना करना है कि रिएक्ट को एक वर्जन हुक के साथ अपग्रेड करना है।हालांकि, हुक अभी भी एक प्रयोगात्मक विशेषता है, और रिएक्ट टीम ने बार-बार चेतावनी दी है कि एपीआई परिवर्तन के अधीन है। विचार करें कि आपको चेतावनी दी गई है।कक्षाओं के लिए हुक के उद्भव का क्या मतलब है? जैसा कि रिएक्ट टीम की रिपोर्ट है, कक्षाएं अभी भी बनी हुई हैं, वे रिएक्ट कोड आधार का एक बड़ा हिस्सा हैं, और आने वाले कुछ समय के लिए सबसे अधिक संभावना होगी।. Facebook , , , , . React Hooks, —
API- Hooks , Hooks, , .अतिरिक्त संसाधन
- React React Hooks,
- API .
- RFC, ,
UPD
:
React 16.8 Hooks API. -:
— useMutationEffect.
— useImperativeMethods useImperativeHandle.
— useState useReducer Hooks.
— , useEffect/useMemo/useCallback Hooks.
— Object.is useState useReducer.
— Strict Mode (DEV-only).
— lazy initialization API useReducer Hook.
.