तुम्ही रिअॅक्ट डेव्हलपर असाल ज्यांनी रिएक्ट हुकबद्दल अजून माहिती घेतली नसेल, तर हा क्षण आहे. हे पोस्ट इफेक्ट रिएक्ट हूकचा तपशीलवार वापर करेल. हे स्विस आर्मी चाकूच्या समतुल्य हुक आहे. हे विविध समस्यांचे निराकरण करते, जसे की एखादा घटक आरोहित झाल्यावर डेटा कसा मिळवायचा, स्थिती किंवा प्रॉप बदलल्यावर कोड कसा चालवायचा, टाइमर किंवा मध्यांतर कसे सेट करावे इत्यादी.
JSX (कोणत्याही प्रकारचे साइड इफेक्ट) परत न करणार्या प्रतिक्रिया घटकामध्ये तुम्हाला “करायचे आहे” अशा कोणत्याही गोष्टीसाठी useEffect वापरला जातो. तुमच्याकडे प्रति घटक अनेक उपयोग प्रभाव देखील असू शकतात.
ही सर्व शक्ती खर्चात येते: ती कशी कार्य करते हे समजल्याशिवाय, ते गोंधळात टाकणारे असू शकते. या पोस्टमध्ये, आम्ही विविध उदाहरणे पाहू जेणेकरून तुम्ही संकल्पनात्मक मॉडेल समजून घेऊ शकता आणि ते तुमच्या स्वतःच्या कोडमध्ये लागू करू शकता.
प्रतिकृती हुक - ते काय सोडवण्याचा प्रयत्न करीत आहे?
हुक प्रथम React आवृत्ती 16.8 मध्ये सादर करण्यात आले होते आणि आता ते अनेक React प्रकल्पांद्वारे वापरले जातात. हुक घटकांमधील कोड पुनरावृत्तीच्या समस्येवर मात करते. ते वर्गांचा वापर न करता लिहिलेले आहेत. याचा अर्थ असा नाही की प्रतिक्रिया वर्ग सोडून देत आहे; हुक फक्त एक पर्यायी पद्धत आहे.
प्रतिक्रिया तुम्हाला राज्यपूर्ण तर्कासह अत्याधुनिक घटक द्रुतपणे तयार करण्यास अनुमती देते. हे घटक वेगळे करणे कठीण आहे कारण वर्ग प्रतिक्रिया जीवनचक्र पद्धतींवर अवलंबून आहे. इथेच React Hooks येतात.
ते आपल्याला घटक लहान फंक्शन्समध्ये विभाजित करण्याची परवानगी देतात. लाइफसायकल पद्धतींवर आधारित कोडचे लहान तुकड्यांमध्ये विभाजन करण्याऐवजी, तुम्ही आता कार्यक्षमतेनुसार लहान युनिट्समध्ये कोडची व्यवस्था करू शकता आणि वेगळे करू शकता.
वापर इफेक्ट हुक म्हणजे काय?
हुक ही फंक्शन्स आहेत जी तुम्हाला ES6 क्लासेस न लिहिता स्टेट आणि इतर प्रतिक्रिया क्षमतांमध्ये प्रवेश करण्याची परवानगी देतात. react hooks API मध्ये useEffect नावाचा हुक आहे. आपण प्रतिक्रिया जीवन चक्रांशी परिचित असल्यास, वापर इफेक्ट हुक समान आहे componentDidMount, componentDidUdateआणि घटक विलअनमाउंट जीवन चक्र पद्धती एकत्रित.
React Hooks दस्तऐवजीकरणानुसार, ES6 वर्ग घटक जीवन चक्र पद्धतींसह काही समस्यांचे निराकरण करण्यासाठी ते तयार केले गेले.
वाक्यरचना
पहिला युक्तिवाद कॉलबॅक फंक्शन आहे, जो प्रत्येक रेंडरनंतर डीफॉल्टनुसार कार्यान्वित केला जातो. दुसरा पॅरामीटर एक पर्यायी अवलंबन अॅरे आहे जो लक्ष्य स्थिती बदलल्यासच हुकला कॉलबॅक करण्यास सूचित करतो.
हुक प्रत्येक अवलंबित्वाच्या ऐतिहासिक आणि वर्तमान स्थितीची तुलना करतो. जर दोन मूल्ये जुळत नाहीत, तर हुक पहिल्या पॅरामीटरमध्ये निर्दिष्ट केलेल्या कॉलबॅकची विनंती करतो. डिपेंडन्सी अॅरे नेहमीच्या कॉलबॅक वर्तनात बदल करतात आणि हमी देतात की हुक घटक स्कोपमधील इतर सर्व घटकांकडे दुर्लक्ष करते.
मूलभूत वापर
संदेश सेव्ह करण्यासाठी, मी वरील कोड नमुन्यात React useState वापरत आहे. त्यानंतर, मी माझा संदेश स्टेट व्हेरिएबल घेतो आणि स्क्रीनवर प्रिंट करतो. तथापि, मला आता घटक आरोहित झाल्यानंतर एक सेकंदाचा संदेश सुधारण्यासाठी प्रभाव वापरायचा आहे.
React फ्रेमवर्कमधून useEffect इंपोर्ट केल्यानंतर मी UseState लाईनच्या मागे माझा प्रभाव टाकला आहे. इफेक्ट वापरण्यासाठी पहिले पॅरामीटर फंक्शन आहे. जेव्हा हे फंक्शन हँडलर कार्यान्वित केले जाते, तेव्हा ते तुम्ही प्रदान केलेल्या कोणत्याही दुष्परिणामांची काळजी घेईल. फंक्शन हे कॉलबॅक फंक्शन आहे ज्याला प्रतिक्रिया घटक लाइफसायकल इव्हेंटपैकी एक घडल्यास कॉल केले जाते.
ते कधी वापरायचे?
UseEffect हुक विविध परिस्थितींमध्ये उपयुक्त ठरू शकतो. खालील सर्वात निर्णायक आहेत:
- जेव्हा आम्ही पुरवलेल्या युक्तिवादावर अवलंबून डेटा आणू इच्छितो तेव्हा आम्ही क्लायंटच्या बाजूने हे पॅरामीटर बदलू शकतो. नवीन डेटासह पॅरामीटर अद्यतनित केल्यानंतर ते परत बोलावले जाईल.
- जर आम्हाला API एंडपॉईंट वरून डेटा पुनर्प्राप्त करायचा असेल आणि तो क्लायंट-साइडवर प्रदर्शित करायचा असेल. जेव्हा आमचा घटक रेंडर होतो, तेव्हा UseEffect हुकला दिलेले फंक्शन किंवा हँडलर कार्यान्वित केले जाते आणि घटक स्थितीतील डेटा पुनर्प्राप्त केला जातो. या स्थिती नंतर वापरकर्ता इंटरफेस घटकांमध्ये वापरल्या जातात.
- जेव्हा तुमचा घटक बाहेरील जगाच्या डेटावर अवलंबून असतो आणि आम्ही डेटा येईल याची खात्री करू शकत नाही, तेव्हा आम्ही इफेक्ट वापरला पाहिजे (कदाचित सर्व्हर तिथे बंद असेल). समस्या फेकण्याऐवजी आणि इतर घटक प्रदर्शित होण्यापासून प्रतिबंधित करण्याऐवजी, त्यांना useEffect हुकमध्ये ठेवा.
केस वापरा
पहिल्या रननंतर घटक पुन्हा रेंडर झाल्यास, तो कार्यान्वित होणार नाही.
जेव्हा जेव्हा एखादा घटक प्रस्तुत करतो किंवा पुन्हा प्रस्तुत करतो तेव्हा तो नेहमी कार्यान्वित केला पाहिजे.
डीफॉल्टनुसार, प्रोग्राम फक्त एकदाच चालतो. नंतर, प्रॉप मूल्ये बदलल्यास, चालवा:
असिंक्रोनस क्रियाकलापांसाठी, नेहमी useEffect वापरा.
useEffect कोड ब्लॉक्स हे तुमच्या सहकारी विकासकांसाठी असिंक्रोनस नोकऱ्यांचे स्पष्ट मार्कर आहेत. UseEffect न वापरता असिंक्रोनस कोड तयार करणे शक्य आहे, परंतु ही "प्रतिक्रिया पद्धत" नाही आणि यामुळे गुंतागुंत आणि चुकांचा धोका दोन्ही वाढतो.
UI थांबवू शकणारे असिंक्रोनस कोड लिहिण्याऐवजी useEffect वापरणे हे React समुदायातील एक सुप्रसिद्ध तंत्र आहे, विशेषत: प्रतिक्रिया कार्यसंघाने साइड इफेक्ट करण्यासाठी ते तयार केले आहे.
याचा वापर करण्याचा आणखी एक फायदा असा आहे की विकासक फक्त कोडचे पुनरावलोकन करू शकतात आणि "नियंत्रण प्रवाहाच्या बाहेर" चालवलेला कोड त्वरित शोधू शकतात, जे पहिल्या रेंडर सायकलनंतरच महत्त्वाचे बनते. शिवाय, ब्लॉक्स पुन्हा वापरता येण्याजोग्या आणि त्याहूनही अधिक अर्थपूर्ण कस्टम हुकमध्ये काढण्यासाठी योग्य आहेत.
एक उदाहरण
UseEffect कोड वापरून, प्रति सेकंद संख्या वाढवा.
निष्कर्ष
माझ्या मते, जर तुम्हाला पुढील-स्तरीय प्रतिक्रिया विकसक बनायचे असेल तर, माझ्या मते, मूलभूत डिझाइन तत्त्वे आणि वापराच्या सर्वोत्तम पद्धती समजून घेणे हे शिकण्यासाठी एक महत्त्वपूर्ण कौशल्य आहे.
थोडक्यात, useEffect Hook ला एक फंक्शन प्राप्त होते ज्यामध्ये अनिवार्य, संभाव्य प्रभाव पूर्ण तर्क समाविष्ट आहे. अवलंबन अॅरे, जो दुसरा पॅरामीटर आहे, अंमलबजावणीवर प्रभाव टाकण्यासाठी वापरला जाऊ शकतो. ते हाताळताना, रिटर्न फंक्शन वापरून क्लीनिंग कोड लिहिणे देखील आवश्यक आहे.
लेख उपयुक्त असल्यास आम्हाला टिप्पण्यांमध्ये कळवा.
प्रत्युत्तर द्या