React में कॉन्टेक्स्ट

अगले हुक का अध्ययन शुरू करने से पहले, हमें React में कॉन्टेक्स्ट की अवधारणा पर विचार करना होगा।

आमतौर पर, हम प्रॉप्स का उपयोग करके पैरेंट कंपोनेंट्स से चाइल्ड कंपोनेंट्स में डेटा पास करते थे। यह विधि तब अच्छी होती है जब आपके पास कम कंपोनेंट्स होते हैं और आपको प्रॉप्स को पैरेंट से आवश्यक कंपोनेंट तक चाइल्ड कंपोनेंट्स के माध्यम से 2-3 से अधिक बार पास नहीं करना पड़ता।

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

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

कॉन्टेक्स्ट का उपयोग करने के लिए, इसे बनाना आवश्यक है। सबसे पहले, MyContext.js फ़ाइल बनाएं और इसमें createContext फ़ंक्शन इम्पोर्ट करें:

MyContext.jsximport { createContext } from 'react';

अब कॉन्टेक्स्ट ऑब्जेक्ट बनाएं, इसे MyContext वेरिएबल में लिखें, जिसे एक्सपोर्ट करना न भूलें। हमारे मामले में, हमने createContext में प्रारंभिक मान null सेट किया है, क्योंकि यह हमारे लिए मायने नहीं रखता (बस खाली कोष्ठक छोड़े भी जा सकते थे)। डिफ़ॉल्ट मान तब दिखाई देगा जब कॉन्टेक्स्ट को पढ़ा जाएगा और कोई अन्य मान नहीं मिलेगा। यह मान किसी भी प्रकार का हो सकता है:

MyContext.jsxexport const MyContext = createContext(null);

अगले पाठ में, हम अलग-अलग फ़ाइलों में स्थित कई कंपोनेंट्स से युक्त एक एप्लिकेशन बनाएंगे। यदि सभी कंपोनेंट्स एक ही फ़ाइल में होते, तो हम कॉन्टेक्स्ट बनाने के लिए अलग फ़ाइल नहीं बनाते और न ही इसे एक्सपोर्ट करते।

आइए अब MyContext.js को खाली कंपोनेंट App में इम्पोर्ट करें - उस कंपोनेंट में, जहाँ से हम डेटा ट्रांसमिट करना चाहते हैं:

App.jsximport { MyContext } from './MyContext.js';