रिएक्ट का संदर्भ एपीआई ट्यूटोरियल: संदर्भ क्या है और इसका उपयोग कैसे करें!
रिएक्ट का कॉन्टेक्स्ट एपीआई कई लोगों के लिए पसंद का राज्य प्रबंधन उपकरण बन गया है, जो कई बार Redux को पूरी तरह से बदल देता है। इस त्वरित ट्यूटोरियल में, आप एक परिचय देखेंगे कि प्रसंग क्या है और इसका उपयोग कैसे करें!
इस पेड़ पर विचार करें, जिसमें नीचे के बक्से अलग-अलग घटकों का प्रतिनिधित्व करते हैं:
हम आसानी से नीचे के घटकों में राज्य जोड़ सकते हैं, लेकिन अब तक एक घटक के भाई को डेटा पास करने का एकमात्र तरीका राज्य को एक उच्च घटक में ले जाना था और फिर इसे प्रोप के माध्यम से भाई को वापस पास करना था।
यदि हमें बाद में पता चलता है कि राज्य के साथ घटक के भाई-बहन को भी डेटा की आवश्यकता है, तो हमें राज्य को फिर से ऊपर उठाना होगा, और इसे वापस पास करना होगा:
हालांकि यह समाधान काम करता है, समस्याएँ तब शुरू होती हैं जब किसी भिन्न शाखा के किसी घटक को डेटा की आवश्यकता होती है:
इस मामले में, हमें सभी मध्यस्थ घटकों के माध्यम से आवेदन के शीर्ष स्तर से राज्य को पारित करने की आवश्यकता है, जिसे नीचे डेटा की आवश्यकता है, भले ही मध्यस्थ स्तरों को इसकी आवश्यकता न हो। इस थकाऊ और समय लेने वाली प्रक्रिया के रूप में जाना जाता है प्रोप ड्रिलिंग .
यह वह जगह है जहां कॉन्टेक्स्ट एपीआई आता है। यह प्रत्येक स्तर के माध्यम से प्रोप को पारित किए बिना प्रदाता-उपभोक्ता जोड़ी के माध्यम से घटक पेड़ के माध्यम से डेटा पास करने का एक तरीका प्रदान करता है। इसे डेटा के साथ पकड़ने वाले घटकों के रूप में सोचें - मध्यस्थ घटकों को यह भी पता नहीं चल सकता है कि कुछ भी हो रहा है:
इसे प्रदर्शित करने के लिए, हम इस फंकी (और सुपर उपयोगी) दिन-रात की स्विचिंग छवि बनाएंगे।
यदि आप पूरा कोड देखना चाहते हैं, तो अवश्य देखें इस लेख के लिए स्क्रिंबा खेल का मैदान .
प्रसंग बनाएँ
शुरू करने के लिए, हम एक नया संदर्भ बनाते हैं। जैसा कि हम चाहते हैं कि पूरे ऐप की इस तक पहुंच हो, हम |_+_| . पर जाते हैं और ऐप को |_+_| में लपेटें।
हम |_+_| . भी पास करते हैं हमारे प्रदाता के लिए सहारा। यह वह डेटा रखता है जिसे हम सहेजना चाहते हैं। अभी के लिए, हम केवल |_+_| में हार्डकोड करते हैं।
index.jsसंदर्भ प्रकार के साथ संदर्भ का उपभोग
वर्तमान में, |_+_| में, हम केवल |_+_| . लौटा रहे हैं अवयव।
ThemeContext.Providerहमारा लक्ष्य वर्गनामों को |_+_| . में बदलने के लिए संदर्भ का उपयोग करना है से |_+_| to |_+_|, इस पर निर्भर करता है कि हम किस इमेज को रेंडर करना चाहते हैं। ऐसा करने के लिए, हम अपने घटक में एक स्थिर गुण जोड़ते हैं जिसे |_+_| . कहा जाता है और उसके बाद |_+_| . में क्लासनाम में जोड़ने के लिए स्ट्रिंग इंटरपोलेशन का उपयोग करें अवयव।
अब, क्लासनाम में |_+_| . से स्ट्रिंग शामिल है सहारा ध्यान दें: मैं स्थानांतरित हो गया हूँ |_+_| बग को रोकने के लिए अपनी फ़ाइल में।
valueप्रसंग.उपभोक्ता
दुर्भाग्य से, यह दृष्टिकोण केवल वर्ग-आधारित घटकों के साथ काम करता है। यदि आपने पहले ही हुक इन रिएक्ट के बारे में जान लिया है, तो आपको पता होगा कि हम इन दिनों कार्यात्मक घटकों के साथ कुछ भी कर सकते हैं। तो अच्छे उपाय के लिए, हमें अपने घटकों को कार्यात्मक घटकों में बदलना चाहिए और फिर उपयोग करना चाहिए |_+_| ऐप के माध्यम से जानकारी पास करने के लिए घटक।
यह हमारे तत्वों को |_+_| . के उदाहरण में लपेटकर किया जाता है और उसके भीतर (जहां |_+_| गो), एक फ़ंक्शन प्रदान करना जो तत्वों को लौटाता है। यह रेंडर प्रोप पैटर्न का उपयोग करता है जहां हम एक बच्चे के रूप में एक नियमित फ़ंक्शन प्रदान करते हैं जो रेंडर करने के लिए कुछ JSX देता है।
'Day'ध्यान दें: हमें |_+_| . को भी लपेटना होगा में घटक |_+_| - यह हमें बाद में बटन में कार्यक्षमता जोड़ने की अनुमति देता है।
import React from 'react'; import ReactDOM from 'react-dom'; import ThemeContext from './themeContext'; import App from './App'; ReactDOM.render( , document.getElementById('root') ); संदर्भ प्रदाता निकालें
वर्तमान में हम प्रदाता के माध्यम से एक हार्ड-कोडित मूल्य नीचे पारित कर रहे हैं, हालांकि, हमारा लक्ष्य हमारे बटन के साथ रात और दिन के बीच स्विच करना है।
इसके लिए हमारे प्रदाता को एक अलग फ़ाइल में ले जाने और इसे अपने स्वयं के घटक में डालने की आवश्यकता होती है, इस मामले में, जिसे |_+_| कहा जाता है।
App.jsध्यान दें: value प्रॉपर्टी को अब नई फ़ाइल ThemeContext.js में हैंडल किया जा रहा है, और इसलिए, index.js से हटा दिया जाना चाहिए।
संदर्भ बदलना
बटन को वायर अप करने के लिए, हम सबसे पहले स्टेट को |_+_| में जोड़ते हैं:
अगला, हम दिन और रात के बीच स्विच करने के लिए एक विधि जोड़ते हैं:
import React from 'react'; import Image from './Image'; class App extends React.Component { render() { return ( ); } } export default App; अब हम अपना |_+_| . बदलते हैं संपत्ति |_+_| ताकि यह राज्य से जानकारी लौटा सके।
Image.jsअगला, हम बदलते हैं |_+_| |_+_| युक्त किसी ऑब्जेक्ट के लिए, और उन सभी स्थानों को अपडेट करें जहां हम देखने के लिए एक ही मान का उपयोग करते हैं |_+_| किसी वस्तु में। इसका मतलब है कि हर |_+_| बन जाता है |_+_| और हर संदर्भ |_+_| के रूप में मूल्य बन जाता है |_+_|।
अंत में, हम बटन को |_+_| . सुनने के लिए कहते हैं घटना और फिर आग |_+_| - यह उन उपभोक्ताओं को अपडेट करता है जो प्रदाता से राज्य का उपयोग कर रहे हैं। बटन के लिए कोड इस तरह दिखता है:
Dayहमारा बटन अब एक क्लिक में रात और दिन के बीच छवि को बदल देता है!
प्रसंग चेतावनी
कोड में सभी अच्छी चीजों की तरह, संदर्भ का उपयोग करने के लिए कुछ चेतावनी हैं:
सेब खाने वाला सांप
-
केवल एक या दो परतों में ड्रिलिंग प्रॉप्स से बचने के लिए प्रसंग का उपयोग न करें। संदर्भ राज्य के प्रबंधन के लिए बहुत अच्छा है जो एक आवेदन के बड़े हिस्से के लिए आवश्यक है। हालाँकि, यदि आप केवल कुछ परतों में जानकारी पास कर रहे हैं, तो प्रोप ड्रिलिंग तेज़ है।
-
राज्य को बचाने के लिए संदर्भ का उपयोग करने से बचें जिसे स्थानीय रूप से रखा जाना चाहिए। इसलिए यदि आपको उपयोगकर्ता के फॉर्म इनपुट को सहेजने की आवश्यकता है, उदाहरण के लिए, स्थानीय स्थिति का उपयोग करें, न कि संदर्भ।
-
प्रदाता को हमेशा पेड़ में सबसे कम संभव सामान्य माता-पिता के चारों ओर लपेटें - ऐप के उच्चतम-स्तरीय घटक नहीं। ओवरकिल की कोई जरूरत नहीं है।
-
अंत में, यदि आप किसी ऑब्जेक्ट को अपने मूल्य प्रोप के रूप में पास करते हैं, तो आवश्यकतानुसार प्रदर्शन और रिफैक्टर की निगरानी करें। यह शायद तब तक आवश्यक नहीं होगा जब तक कि प्रदर्शन में गिरावट ध्यान देने योग्य न हो।
लपेटें
यह उदाहरण बहुत सरल है और संभवत: ऐप में स्टेट डालना और प्रॉप्स के माध्यम से इसे पास करना आसान होगा। हालांकि, उम्मीद है कि यह उन उपभोक्ताओं की शक्ति को दर्शाता है जो पेड़ में उनके ऊपर के घटकों से स्वतंत्र रूप से डेटा तक पहुंच सकते हैं।
हैप्पी कोडिंग :)
#react-js #react #react-hooks #javascript #api
यह सभी देखें:
- कीव: मल्टीपल बैकएंड्स के लिए सपोर्ट के साथ सिंपल की-वैल्यू स्टोरेज
- यूएसबी पोर्ट काम नहीं कर रहे? इसे ठीक करने का तरीका यहां बताया गया है
- सुपरफार्म (सुपर) क्या है | सुपरफार्म टोकन क्या है | सुपर टोकन क्या है
- उदाहरण के साथ TensorFlow चर और प्लेसहोल्डर ट्यूटोरियल
- डेबियन 10 . पर npm के साथ Node.js कैसे स्थापित करें