परिचय

रिएक्ट का कॉन्टेक्स्ट एपीआई आपको अपने एप्लिकेशन में विश्व स्तर पर डेटा साझा करने की अनुमति देता है, जबकि हुक क्लास घटकों की आवश्यकता के बिना स्थिति और साइड इफेक्ट्स को प्रबंधित करने का एक तरीका प्रदान करता है। साथ में, वे डेटा प्रबंधन को सुव्यवस्थित करते हैं और आपके कोड को अधिक रखरखाव योग्य बनाते हैं। इस लेख में, हम रिएक्ट कॉन्टेक्स्ट और हुक्स के बारे में गहनता से चर्चा करेंगे और एक विस्तृत, चरण-दर-चरण उदाहरण प्रदान करेंगे, जिससे आपको इन सुविधाओं को समझने और अपने प्रोजेक्ट में निर्बाध रूप से लागू करने में मदद मिलेगी।

प्रतिक्रिया प्रसंग क्या है?

रिएक्ट कॉन्टेक्स्ट बिना प्रोप ड्रिलिंग के घटकों के बीच मूल्यों को साझा करने के लिए एक शक्तिशाली सुविधा है। यह प्रत्येक स्तर पर मैन्युअल रूप से प्रॉप्स को पास किए बिना घटक ट्री के माध्यम से डेटा पास करने का एक तरीका प्रदान करता है।

प्रतिक्रिया प्रसंग के मुख्य लाभ

• राज्य प्रबंधन को सरल बनाता है: कई स्तरों से नीचे प्रॉप्स को पारित करने की आवश्यकता नहीं है।
• कोड पठनीयता में सुधार करता है: आपके घटक ट्री को साफ-सुथरा बनाता है।
• पुन: प्रयोज्यता को प्रोत्साहित करता है: संदर्भ मूल्यों को एप्लिकेशन के विभिन्न हिस्सों में आसानी से पुन: उपयोग किया जा सकता है।

रिएक्ट हुक क्या हैं?

रिएक्ट हुक आपको क्लास लिखे बिना राज्य और अन्य रिएक्ट सुविधाओं का उपयोग करने की अनुमति देता है। रिएक्ट 16.8 में प्रस्तुत, हुक उन रिएक्ट अवधारणाओं के लिए अधिक प्रत्यक्ष एपीआई प्रदान करता है जिन्हें आप पहले से जानते हैं।

आमतौर पर प्रयुक्त हुक

• useState: एक कार्यात्मक घटक में राज्य का प्रबंधन करता है।
• useEffect: कार्यात्मक घटकों में दुष्प्रभावों को संभालता है।
• useContext: एक संदर्भ के मूल्य तक पहुँचता है।

एक रिएक्ट प्रोजेक्ट स्थापित करना

कार्यान्वयन में उतरने से पहले, आइए एक रिएक्ट प्रोजेक्ट स्थापित करें। यदि आपने पहले से नहीं बनाया है, तो आप क्रिएट रिएक्ट ऐप का उपयोग करके एक नया रिएक्ट ऐप बना सकते हैं:

npx create-react-app context-hooks-example
cd context-hooks-example
npm start

यह एक नया रिएक्ट एप्लिकेशन स्थापित करेगा और विकास सर्वर शुरू करेगा।

एक प्रसंग बनाना

आइए एक नया संदर्भ बनाकर शुरुआत करें। इस उदाहरण के लिए, हम उपयोगकर्ता की जानकारी प्रबंधित करने के लिए एक सरल संदर्भ बनाएंगे।

// src/UserContext.js
import React, { createContext, useState } from 'react';

export const UserContext = createContext();

export const UserProvider = ({ children }) => {
  const [user, setUser] = useState({ name: 'John Doe', age: 30 });

  return (
    
      {children}
    
  );
};

उपरोक्त कोड में, हम एक UserContext और एक UserProvider घटक बनाते हैं। UserProvider घटक उपयोगकर्ता की जानकारी को प्रबंधित करने के लिए यूज़स्टेट हुक का उपयोग करता है और उपयोगकर्ता स्थिति और सेटयूज़र फ़ंक्शन को संदर्भ मान के रूप में पास करता है।

घटकों में संदर्भ का उपयोग करना

अब जब हमने अपना संदर्भ स्थापित कर लिया है, तो आइए इसे अपने घटकों में उपयोग करें।

एक घटक में संदर्भ तक पहुंच

किसी घटक में संदर्भ तक पहुंचने के लिए, हम यूज़कॉन्टेक्स्ट हुक का उपयोग करते हैं। यहां बताया गया है कि आप यह कैसे कर सकते हैं:

// src/components/UserProfile.js
import React, { useContext } from 'react';
import { UserContext } from '../UserContext';

const UserProfile = () => {
  const { user } = useContext(UserContext);

  return (
    

      
User Profile
      
Name: {user.name}
      
Age: {user.age}
    
  );
};

export default UserProfile;

इस उदाहरण में, यूजरप्रोफाइल घटक संदर्भ से उपयोगकर्ता की जानकारी तक पहुंचता है और उसे प्रदर्शित करता है।

संदर्भ डेटा अपडेट कर रहा है

संदर्भ डेटा को अद्यतन करने के लिए, हम संदर्भ द्वारा प्रदान किए गए सेटयूज़र फ़ंक्शन का उपयोग करते हैं।

// src/components/UpdateUser.js
import React, { useContext } from 'react';
import { UserContext } from '../UserContext';

const UpdateUser = () => {
  const { setUser } = useContext(UserContext);

  const updateUserInfo = () => {
    setUser({ name: 'Jane Doe', age: 25 });
  };

  return (
    

      
Update User
      Update
    
  );
};

export default UpdateUser;

UpdateUser घटक में, हम एक फ़ंक्शन updateUserInfo को परिभाषित करते हैं जो संदर्भ से setUser फ़ंक्शन का उपयोग करके उपयोगकर्ता की जानकारी को अपडेट करता है।

संदर्भ और घटकों को एकीकृत करना

इसके बाद, आइए अपने संदर्भ और घटकों को मुख्य एप्लिकेशन में एकीकृत करें।

// src/App.js
import React from 'react';
import { UserProvider } from './UserContext';
import UserProfile from './components/UserProfile';
import UpdateUser from './components/UpdateUser';

const App = () => {
  return (
    
      

        
React Context and Hooks Example
        
        
      
    
  );
};

export default App;

ऐप घटक में, हम अपने यूजरप्रोफाइल और अपडेटयूजर घटकों को यूजरप्रोवाइडर के साथ लपेटते हैं। यह संदर्भ को UserProvider के सभी घटकों के लिए उपलब्ध कराता है।

अक्सर पूछे जाने वाले प्रश्नों

संदर्भ एपीआई का उपयोग करने के मुख्य लाभ क्या हैं?

कॉन्टेक्स्ट एपीआई का उपयोग प्रोप ड्रिलिंग की आवश्यकता को कम करके राज्य प्रबंधन को सरल बनाता है। यह आपके कोड को साफ-सुथरा और अधिक रखरखाव योग्य बनाता है, जिससे आप कई घटकों में स्थिति को कुशलतापूर्वक साझा कर सकते हैं।

हुक संदर्भ की कार्यक्षमता को कैसे बढ़ाते हैं?

यूज़स्टेट और यूज़कॉन्टेक्स्ट जैसे हुक कार्यात्मक घटकों में संदर्भ मूल्यों को प्रबंधित और एक्सेस करना आसान बनाते हैं। वे वर्ग घटकों की तुलना में स्थिति और दुष्प्रभावों को संभालने के लिए अधिक सहज और सीधा तरीका प्रदान करते हैं।

क्या मैं एक ही घटक में एकाधिक संदर्भों का उपयोग कर सकता हूं?

हां, आप अलग-अलग संदर्भ ऑब्जेक्ट के साथ यूज़कॉन्टेक्स्ट को कॉल करके एक ही घटक में कई संदर्भों का उपयोग कर सकते हैं। यह आपको एक ही घटक के भीतर राज्य के विभिन्न हिस्सों को स्वतंत्र रूप से प्रबंधित करने की अनुमति देता है।

मैं संदर्भ-संबंधित मुद्दों को कैसे डिबग करूं?

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

निष्कर्ष

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