वापस स्वागत है दोस्तों!


आज हम यूज़कॉन्टेक्स्ट नामक रिएक्ट हुक की बुनियादी बातों पर चर्चा कर रहे हैं। यूज़कॉन्टेक्स्ट एक शक्तिशाली उपकरण है जो यूज़स्टेट से एक कदम आगे बढ़कर एक वैश्विक-जैसा राज्य बनाता है जो सीधे प्रॉप्स पास किए बिना बच्चों और पोते-पोतियों के घटकों तक जानकारी पहुंचा सकता है।

लेकिन मैं खुद से आगे निकल रहा हूं।
यदि आप यूज़स्टेट से परिचित नहीं हैं, तो आगे बढ़ें और पहले मेरा पिछला लेख पढ़ें, फिर वापस आएं और चकित होने के लिए तैयार हो जाएं!


'useState' का उपयोग कैसे करें: https://dev.to/deborah/how-to-use-state-in-react-2pah

अब जब आप 'यूजस्टेट' पर गति प्राप्त कर चुके हैं, तो आइए 'यूजकॉन्टेक्स्ट' पर ध्यान दें!

यूज़ कॉन्टेक्स्ट क्या है?:

useContext उस डेटा के लिए आदर्श है जिसे वैश्विक दायरे में रखने की आवश्यकता है (जैसे कि एक उपयोगकर्ता नाम जो किसी को एप्लिकेशन की संपूर्णता में लॉग इन रखेगा) लेकिन यह सभी के लिए अंतिम शॉर्टकट नहीं है बच्चों के घटकों को प्रॉप्स पास करना।
हालाँकि, यूज़कॉन्टेक्स्ट हमें सीधे प्रॉप्स पास किए बिना डेटा पास करने की अनुमति देता है और इसलिए यह बेहद मददगार होता है जब हमें ऐसे डेटा का सामना करना पड़ता है जिसे कई बच्चों के घटकों द्वारा एक्सेस करने की आवश्यकता होती है या संपूर्ण एप्लिकेशन में उपलब्ध कराया जाता है।

useContext को चालू करने के लिए, हमें दो कदम उठाने होंगे: सबसे पहले, हमें एक संदर्भ ऑब्जेक्ट ('createContext') बनाने की आवश्यकता है, फिर हमें हुक 'useContext' का उपयोग करके प्रदाता के माध्यम से मूल्य तक पहुंचने की आवश्यकता है .

आपको बेहतर जानकारी देने के लिए कि यूज़कॉन्टेक्स्ट क्या है और इसका उपयोग कैसे करना है, निम्नलिखित उदाहरणों को सरल बनाया गया है, लेकिन आपको पता होना चाहिए कि createContext को अक्सर अपनी स्वयं की एक अलग फ़ाइल में घोषित किया जाता है। हालाँकि, मैं 'Parent.js' की तुलना एक विशिष्ट 'App.js' फ़ाइल (घटक पदानुक्रम के शीर्ष पर एक घटक) से कर रहा हूँ। Parent.js वह जगह है जहां मैंने अपने सभी स्टेट वेरिएबल्स, उन फंक्शन्स को परिभाषित किया है जो उन स्टेट वेरिएबल्स को अपडेट करते हैं, और यूज़इफेक्ट का उपयोग करके डेटाबेस में लाते हैं। मैंने इस स्पष्टीकरण को सरल बनाने के लिए अपनी स्वयं की फ़ाइल बनाने के बजाय अपने शीर्ष-स्तरीय घटक में createContext घोषित करने का विकल्प चुना ताकि आप Context की मूल अवधारणाओं को बेहतर ढंग से समझ सकें।

इतना सब कहने के बाद, आइए बिल्कुल शुरुआत से शुरू करें: createContext!

1. पहली चीज़ जो हमें करने की ज़रूरत है वह है 'संदर्भ' नामक एक वेरिएबल को घोषित करना और निर्यात करना जिसे हम बाद में अपने चाइल्ड घटकों में उपयोग करेंगे [हम अपने कोड को और अधिक सरल बनाने के लिए अब एक वेरिएबल बना रहे हैं और इसलिए हम रख सकते हैं इसके अंदर एक मान (डेटा) जिसे बाद में एक्सेस किया जा सकता है]:

export Context = React.createContext();

'संदर्भ' एक संदर्भ वस्तु है जो 'createContext' को कॉल करके बनाई गई है। संदर्भ ऑब्जेक्ट में प्रदाता नामक एक घटक होता है जिसे अब हम कॉल करने में सक्षम होंगे और फिर उन चर और कार्यों को पास कर सकेंगे जिन्हें हम अपने 'वैश्विक' स्तर पर रखना चाहते हैं।

2. हमारे 'संदर्भ' वेरिएबल के साथ, आइए अब रिटर्न स्टेटमेंट में हमारे JSX पर जाएं। यहां हम 'संदर्भ' को कॉल करेंगे और इसे शुरुआती टैग (कोण कोष्ठक) में लपेटेंगे, और प्रदाता को भी इस प्रकार कॉल करेंगे:

return(
    
        // Other JSX & the child components we want to hand Context to.

    
);

'Context.Provider' को पूरा करने के लिए, हमें 'Provider' को एक मान भी प्रदान करना होगा। यह वह जगह है जहां हम किसी भी और सभी वेरिएबल्स और फ़ंक्शंस के साथ एक ऑब्जेक्ट पास करेंगे जिन्हें हम चाइल्ड घटकों में 'संदर्भ' के साथ कॉल करेंगे:

return(
    
        // Other JSX & the child components we want to hand Context to.

    
);

यह ध्यान रखना बहुत महत्वपूर्ण है कि हमें उन सभी चाइल्ड घटकों को टैग के बीच में रखना होगा जो वेरिएबल्स और फ़ंक्शंस का उपयोग करेंगे। उदाहरण के लिए:

return(
    
);

ध्यान दें कि जब तक हम प्रॉप्स को 'वैल्यू' के अंदर रखते हैं, तब तक हमें किसी भी प्रॉप्स को सीधे चाइल्ड घटकों (जैसे हम 'यूजस्टेट' के साथ करेंगे) में पास करने की आवश्यकता नहीं है।

अब जब हमने createContext का उपयोग कर लिया है और अपने सभी वैश्विक-आइटम को 'Context.Provider' को भेज दिया है, तो हम चाइल्ड घटकों पर आगे बढ़ने और यह देखने के लिए तैयार हैं कि 'Context' का उपयोग कैसे करें।

3. चलिए एक चाइल्ड घटक पर चलते हैं जो (इस उदाहरण के लिए) फ़ाइल "Child.js" में स्थित है। जैसा कि जीवन कोडिंग के साथ है: यदि आप किसी चीज़ का उपयोग करना चाहते हैं, तो आपको इसे आयात करने की आवश्यकता है। आइए आगे बढ़ें और 'संदर्भ' प्राप्त करें जहां से हमने इसे 'पेरेंट.जेएस' में घोषित किया था ताकि हम इसे इस चाइल्ड घटक ('चाइल्ड.जेएस') में उपयोग कर सकें:

import Context from ‘./Parent.js’;

4. अब जबकि हमारे पास चाइल्ड कंपोनेंट में 'कॉन्टेक्स्ट' तक पहुंच है, अब हमें 'यूजकॉन्टेक्स्ट' को फ़ाइल में आयात करने की आवश्यकता है ताकि हम इसमें 'कॉन्टेक्स्ट' पास कर सकें (उस पर शीघ्र ही अधिक जानकारी):

import React, { useContext } from ‘react’;
import Context from ‘./Parent.js’;

5. बढ़िया! अब 'useContext' का उपयोग करें। सबसे पहले हमें 'useContext' का उपयोग करने के लिए एक वेरिएबल घोषित करने की आवश्यकता है। हम इसे घटक के अंदर उसी तरह से करेंगे जैसे हम यूज़स्टेट की घोषणा करते हैं:

import React, { useContext } from ‘react’;
import Context from ‘./Parent.js’;

function Child(){
    const { example, setExample } = useContext(Context)

    // The rest of our code

इस कोड में हम डिस्ट्रक्चरिंग असाइनमेंट को दर्शाने के लिए घुंघराले ब्रेसिज़ {} का उपयोग कर रहे हैं। यह कहने का एक शानदार तरीका है कि हम कॉन्टेक्स्ट में संग्रहीत कई वेरिएबल्स और फ़ंक्शंस को कॉल करने में सक्षम हैं। हम 'Context' को 'useContext' में भी पास कर रहे हैं ताकि हम Context.Provider (जिसे हमने 'Parent.js' में घोषित किया है) में परिभाषित मानों तक पहुंच सकें।



6. विश्वास करें या न करें, आप पूरी तरह तैयार हैं! अब आप अपने कोड में संदर्भ मानों का उपयोग वैसे ही कर सकते हैं जैसे आप सामान्य रूप से स्टेट का उपयोग करते हैं। उदाहरण के लिए:

const expId = example.id;

या

setExample(newExample);

आओ पूर्वावलोकन कर लें:

बधाई हो! अब आपके पास createContext और useContext के साथ आरंभ करने के लिए सभी उपकरण हैं। आप समझते हैं कि यूज़कॉन्टेक्स्ट आपको कुछ 'वैश्विक स्थिति' बनाने की अनुमति देता है जो सीधे चाइल्ड घटकों के माध्यम से प्रॉप्स पास किए बिना घटकों में चर और फ़ंक्शन पास कर सकता है।

हमने आपके अनुप्रयोगों में संदर्भ को कार्यान्वित करने के लिए आवश्यक छह चरणों पर भी गौर किया। अब आप createContext और useContext के साथ कोडिंग शुरू करने के लिए तैयार हैं, लेकिन यदि आपको कभी भी त्वरित-प्रारंभ मार्गदर्शिका की आवश्यकता हो, तो यहां जाएं:

अपने मूल घटक में, 'createContext' का उपयोग करके 'Context' नामक एक वेरिएबल घोषित करें और निर्यात करें:

export const Context = React.createContext();

मूल घटक के JSX में, उन सभी चाइल्ड घटकों को लपेटें जिन्हें Context.Proivder में संदर्भ तक पहुंच की आवश्यकता है, और किसी ऑब्जेक्ट के अंदर किसी भी चर/फ़ंक्शन को पास करें:

   //Child components

अपने चाइल्ड घटक में, 'useContext' आयात करें:

import React, { useContext } from ‘react’;

मूल घटक से 'संदर्भ' भी आयात करें:

import Context from “./Parent.js’;

फिर यूज़कॉन्टेक्स्ट का उपयोग करें और इसे अपना 'कॉन्टेक्स्ट' वेरिएबल पास करें:

const { example, handleExample } = useContext(Context);

अंत में, उस संदर्भ का उपयोग करें जिस तक अब आपकी पहुंच है (उपरोक्त हमारे उदाहरणों में यह 'उदाहरण' और 'हैंडल उदाहरण' होगा) हालांकि आपको चाइल्ड घटक में इसकी आवश्यकता है।

बहुत अच्छा! और अगली बार तक, खुश कोडिंग!

एक आखिरी नोट, यदि आप इस विषय में गहराई से जाना चाहते हैं, तो यहां आधिकारिक दस्तावेज़ीकरण संसाधन हैं जिनका मैंने उपयोगकॉन्टेक्स्ट सीखने और इस ब्लॉग को लिखने के दौरान भी संदर्भित किया था:

आधिकारिक दस्तावेज़ीकरण:
https://react.dev/reference/react/createContext

विरासत आधिकारिक दस्तावेज़ीकरण, उपयोग संदर्भ को समझने के लिए अभी भी कुछ हद तक उपयोगी है:https://legacy.reactjs.org/docs/context.html