अध्याय 3: एडवांस्ड कम्पोनेंट्स (Advanced Components)

इस अध्याय में, हम रिएक्ट.js की एडवांस्ड कम्पोनेंट्स को कवर करेंगे। एडवांस्ड कम्पोनेंट्स की समझ से आप रिएक्ट एप्लिकेशन को और अधिक शक्तिशाली और प्रभावी बना सकेंगे। इस अध्याय में निम्नलिखित विषयों को शामिल किया गया है:

• कम्पोनेंट लाइफसाइकल: कम्पोनेंट्स के जीवन चक्र के विभिन्न चरण और उनके उपयोग।
• रिएक्ट हुक्स का परिचय: हुक्स का उपयोग करके फंक्शनल कम्पोनेंट्स में स्टेट और अन्य रिएक्ट फीचर्स का उपयोग करना।
• useState और useEffect: हुक्स का उपयोग करके स्टेट और साइड इफेक्ट्स को प्रबंधित करना।
• कस्टम हुक्स: पुन: उपयोग योग्य लॉजिक को कम्पोनेंट्स के बीच साझा करने के लिए अपने हुक्स बनाना।
• Context API: एप्लिकेशन के विभिन्न हिस्सों के बीच डेटा साझा करने का एक तरीका।

इन एडवांस्ड अवधारणाओं को सीखकर, आप अपने रिएक्ट एप्लिकेशन को अधिक संगठित, कुशल और प्रबंधनीय बना सकते हैं। यह अध्याय आपके रिएक्ट कौशल को एक नई ऊँचाई पर ले जाएगा और आपको उन्नत यूजर इंटरफेस और एप्लिकेशन बनाने में सक्षम बनाएगा।

कंपोनेंट लाइफसाइकल (Component Lifecycle)

रिएक्ट.js में, प्रत्येक कंपोनेंट का एक जीवन चक्र होता है जो इसके निर्माण, अद्यतन, और हटाने की प्रक्रियाओं को परिभाषित करता है। इस जीवन चक्र के माध्यम से, आप अपने कंपोनेंट्स के व्यवहार को विभिन्न चरणों में नियंत्रित और अनुकूलित कर सकते हैं। कंपोनेंट लाइफसाइकल को समझना और उपयोग करना रिएक्ट एप्लिकेशन के प्रदर्शन और कार्यक्षमता को बेहतर बनाने के लिए महत्वपूर्ण है।

लाइफसाइकल के चरण (Phases of the Lifecycle)

रिएक्ट कंपोनेंट्स के जीवन चक्र को तीन मुख्य चरणों में विभाजित किया जा सकता है:

1. माउंटिंग (Mounting): इस चरण में कंपोनेंट का निर्माण और DOM में सम्मिलित किया जाता है।
2. अपडेटिंग (Updating): जब कंपोनेंट के प्रॉप्स या स्टेट में बदलाव होता है, तो यह चरण सक्रिय होता है और कंपोनेंट री-रेंडर होता है।
3. अनमाउंटिंग (Unmounting): इस चरण में कंपोनेंट को DOM से हटाया जाता है।

माउंटिंग (Mounting)

माउंटिंग चरण में निम्नलिखित लाइफसाइकल मेथड्स शामिल होते हैं:

• constructor(): यह मेथड कंपोनेंट के निर्माण के समय सबसे पहले कॉल होता है। इसका उपयोग प्रारंभिक स्टेट सेट करने और प्रॉप्स को प्रारंभ करने के लिए किया जाता है।

  constructor(props) {
    super(props);
    this.state = { counter: 0 };
  }
  

   

• componentWillMount() (Deprecated): यह मेथड कंपोनेंट के माउंट होने से पहले कॉल होता है। इसे अब रिएक्ट के नए वर्शन में उपयोग नहीं किया जाता है।
• render(): यह मेथड अनिवार्य है और JSX रिटर्न करता है जो DOM में रेंडर होता है।

  render() {
    return <h1>Hello, world!</h1>;
  }
  

   

• componentDidMount(): यह मेथड कंपोनेंट के माउंट होने के बाद कॉल होता है। इसका उपयोग एपीआई कॉल्स, सब्सक्रिप्शन्स, या किसी अन्य साइड-इफेक्ट्स के लिए किया जा सकता है।

  componentDidMount() {
    // एपीआई कॉल या अन्य साइड-इफेक्ट्स
  }
  

   

अपडेटिंग (Updating)

अपडेटिंग चरण में निम्नलिखित लाइफसाइकल मेथड्स शामिल होते हैं:

• • componentWillReceiveProps() (Deprecated): जब कंपोनेंट को नए प्रॉप्स प्राप्त होते हैं, तो यह मेथड कॉल होता है। इसे भी अब रिएक्ट के नए वर्शन में उपयोग नहीं किया जाता है।
  • shouldComponentUpdate(): यह मेथड निर्धारित करता है कि कंपोनेंट को फिर से रेंडर होना चाहिए या नहीं। यह प्रदर्शन अनुकूलन के लिए उपयोगी है।

    shouldComponentUpdate(nextProps, nextState) {
      return nextProps.value !== this.props.value;
    }
    

     

  • componentWillUpdate() (Deprecated): यह मेथड कंपोनेंट के अपडेट होने से पहले कॉल होता है। इसे भी अब रिएक्ट के नए वर्शन में उपयोग नहीं किया जाता है।
  • render(): यह मेथड फिर से कॉल होता है जब प्रॉप्स या स्टेट बदलते हैं।
  • componentDidUpdate(): यह मेथड कंपोनेंट के अपडेट होने के बाद कॉल होता है। इसका उपयोग DOM ऑपरेशन के लिए किया जा सकता है।

componentDidUpdate(prevProps, prevState) {
  // DOM ऑपरेशन
}

अनमाउंटिंग (Unmounting)

अनमाउंटिंग चरण में निम्नलिखित लाइफसाइकल मेथड्स शामिल होते हैं:

• componentWillUnmount(): यह मेथड कंपोनेंट के DOM से हटाए जाने से पहले कॉल होता है। इसका उपयोग क्लीनअप के लिए किया जाता है, जैसे सब्सक्रिप्शन हटाना, टाइमर्स को क्लियर करना आदि।

  componentWillUnmount() {
    // क्लीनअप ऑपरेशन
  }
  

   

रिएक्ट हुक्स का परिचय (Introduction to React Hooks)

रिएक्ट हुक्स (React Hooks) रिएक्ट 16.8 वर्शन में पेश की गई एक महत्वपूर्ण सुविधा है जिसने रिएक्ट कम्पोनेंट्स को बनाने और प्रबंधित करने के तरीके को बदल दिया है। हुक्स के माध्यम से, आप फंक्शनल कम्पोनेंट्स में स्टेट और अन्य रिएक्ट फीचर्स का उपयोग कर सकते हैं, जो पहले केवल क्लास कम्पोनेंट्स में उपलब्ध थे। हुक्स ने रिएक्ट डेवलपमेंट को और भी सरल और शक्तिशाली बना दिया है।

हुक्स क्या हैं? (What are Hooks?)

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

प्रमुख हुक्स (Key Hooks)

1. useState: यह हुक स्टेट वेरिएबल्स को फंक्शनल कम्पोनेंट्स में उपयोग करने की अनुमति देता है।

   const [count, setCount] = useState(0);
   

    

2. useEffect: यह हुक साइड इफेक्ट्स को हैंडल करने के लिए उपयोग किया जाता है, जैसे कि डेटा फेचिंग, सब्सक्रिप्शन्स, और मैन्युअल DOM अपडेट्स।

   useEffect(() => {
     document.title = `You clicked ${count} times`;
   }, [count]);
   

    

3. useContext: यह हुक आपको Context API का उपयोग करने की अनुमति देता है, जिससे आप एप्लिकेशन के विभिन्न हिस्सों के बीच डेटा साझा कर सकते हैं।

   const value = useContext(MyContext);
   

    

4. useReducer: यह हुक स्टेट प्रबंधन के लिए उपयोग किया जाता है, खासकर जब स्टेट लॉजिक जटिल होता है और उसमें कई सब-वैल्यूज होते हैं।

   const [state, dispatch] = useReducer(reducer, initialState);
   

    

5. useMemo: यह हुक प्रदर्शन अनुकूलन के लिए उपयोग किया जाता है, जिससे आप महंगे कैलकुलेशन को केवल तब ही दोबारा कर सकते हैं जब इसके डिपेंडेंसीज़ बदलें।

   const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
   

    

हुक्स के लाभ (Benefits of Hooks)

• सरलता (Simplicity): हुक्स का उपयोग करके, आप क्लासेस के बिना स्टेट और लाइफसाइकल मेथड्स का उपयोग कर सकते हैं, जिससे कोड सरल और पठनीय बनता है।
• पुन: उपयोग योग्यता (Reusability): हुक्स के माध्यम से, आप कस्टम हुक्स बना सकते हैं जो पुन: उपयोग योग्य लॉजिक को विभिन्न कम्पोनेंट्स में साझा कर सकते हैं।
• पारदर्शिता (Transparency): हुक्स का उपयोग करते समय, कोड अधिक पारदर्शी होता है और आप आसानी से देख सकते हैं कि स्टेट और साइड इफेक्ट्स कैसे प्रबंधित हो रहे हैं।
• प्रदर्शन (Performance): हुक्स के माध्यम से, आप प्रदर्शन अनुकूलन तकनीकों का उपयोग कर सकते हैं, जैसे कि useMemo और useCallback।

कस्टम हुक्स (Custom Hooks)

रिएक्ट में कस्टम हुक्स (Custom Hooks) का उपयोग करके, आप अपने स्वयं के हुक्स बना सकते हैं जो रिएक्ट के बिल्ट-इन हुक्स की शक्ति और लचीलापन को बढ़ाते हैं। कस्टम हुक्स आपको पुन: उपयोग योग्य लॉजिक को एक ही स्थान पर केंद्रीकृत करने की अनुमति देते हैं, जिससे कोड साफ, संगठित, और अधिक पठनीय होता है।

कस्टम हुक्स क्या हैं? (What are Custom Hooks?)

कस्टम हुक्स जावास्क्रिप्ट फंक्शन्स होते हैं जिनका नाम “use” से शुरू होता है और वे अन्य हुक्स का उपयोग कर सकते हैं। ये हुक्स आपके एप्लिकेशन के विशेष लॉजिक को एक स्थान पर रखने और विभिन्न कम्पोनेंट्स में इस लॉजिक को साझा करने के लिए डिज़ाइन किए गए हैं। कस्टम हुक्स का उपयोग करके, आप कोड को अधिक पुन: उपयोग योग्य और मॉड्यूलर बना सकते हैं।

कस्टम हुक्स बनाने के लाभ (Benefits of Creating Custom Hooks)

• पुन: उपयोग योग्यता: कस्टम हुक्स का उपयोग करके, आप समान लॉजिक को कई कम्पोनेंट्स में पुन: उपयोग कर सकते हैं, जिससे कोड की पुनरावृत्ति कम होती है।
• संगठित कोड: कस्टम हुक्स के माध्यम से, आप लॉजिक को स्पष्ट और समझने में आसान बना सकते हैं, जिससे कोडबेस अधिक प्रबंधनीय होता है।
• पठनीयता: कस्टम हुक्स जटिल लॉजिक को छोटे, सरल फंक्शन्स में विभाजित करते हैं, जिससे कोड अधिक पठनीय होता है।

कस्टम हुक बनाने का तरीका (How to Create a Custom Hook)

कस्टम हुक बनाने के लिए, आप एक नया जावास्क्रिप्ट फंक्शन परिभाषित करते हैं जो रिएक्ट के बिल्ट-इन हुक्स का उपयोग करता है। कस्टम हुक्स का नाम “use” से शुरू होना चाहिए। उदाहरण के लिए, एक सरल कस्टम हुक जो किसी इनपुट फील्ड के मूल्य को प्रबंधित करता है:

import { useState } from 'react';

function useInput(initialValue) {
  const [value, setValue] = useState(initialValue);

  function handleChange(event) {
    setValue(event.target.value);
  }

  return {
    value,
    onChange: handleChange
  };
}

export default useInput;

कस्टम हुक्स का उपयोग (Using Custom Hooks)

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

import React from 'react';
import useInput from './useInput';

function MyComponent() {
  const name = useInput('John Doe');

  return (
    <div>
      <input type="text" {...name} />
      <p>Hello, {name.value}!</p>
    </div>
  );
}

export default MyComponent;

कस्टम हुक्स के उदाहरण (Examples of Custom Hooks)

1. डेटा फेचिंग हुक (Data Fetching Hook): डेटा को एपीआई से फेच करने के लिए एक कस्टम हुक।

   import { useState, useEffect } from 'react';
   import axios from 'axios';
   
   function useFetch(url) {
     const [data, setData] = useState(null);
     const [loading, setLoading] = useState(true);
   
     useEffect(() => {
       axios.get(url).then(response => {
         setData(response.data);
         setLoading(false);
       });
     }, [url]);
   
     return { data, loading };
   }
   
   export default useFetch;
   

    

2. फॉर्म हैंडलिंग हुक (Form Handling Hook): फॉर्म डेटा को प्रबंधित करने के लिए एक कस्टम हुक।

   import { useState } from 'react';
   
   function useForm(initialValues) {
     const [values, setValues] = useState(initialValues);
   
     const handleChange = (event) => {
       const { name, value } = event.target;
       setValues({
         ...values,
         [name]: value
       });
     };
   
     return [values, handleChange];
   }
   
   export default useForm;
   

    

Context API (Context API)

रिएक्ट का Context API एक शक्तिशाली टूल है जो आपको एप्लिकेशन के विभिन्न हिस्सों के बीच डेटा साझा करने की अनुमति देता है, बिना प्रॉप्स ड्रिलिंग (props drilling) के झंझट के। प्रॉप्स ड्रिलिंग तब होता है जब आप डेटा को एक गहरे नेस्टेड कम्पोनेंट्स ट्री में हर स्तर पर पास करते हैं। Context API का उपयोग करके, आप डेटा को ग्लोबल रूप से उपलब्ध करा सकते हैं और इसे सीधे किसी भी कंपोनेंट में एक्सेस कर सकते हैं।

Context API क्या है? (What is Context API?)

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

Context API का उपयोग (Using Context API)

Context API का उपयोग करने के लिए, आपको निम्नलिखित चरणों का पालन करना होगा:

1. Context बनाना (Creating Context):

   import React, { createContext } from 'react';
   
   const MyContext = createContext();
   

    

2. Context Provider बनाना (Creating a Context Provider): Provider वह कम्पोनेंट होता है जो Context को अपने चाइल्ड कम्पोनेंट्स के लिए उपलब्ध कराता है।

   import React, { createContext, useState } from 'react';
   
   const MyContext = createContext();
   
   function MyProvider({ children }) {
     const [value, setValue] = useState('Hello, world!');
   
     return (
       <MyContext.Provider value={{ value, setValue }}>
         {children}
       </MyContext.Provider>
     );
   }
   
   export { MyContext, MyProvider };
   

    

3. Context का उपभोग करना (Consuming Context): Context को उपभोग करने के लिए, आप useContext हुक का उपयोग कर सकते हैं।

   import React, { useContext } from 'react';
   import { MyContext } from './MyProvider';
   
   function MyComponent() {
     const { value, setValue } = useContext(MyContext);
   
     return (
       <div>
         <p>{value}</p>
         <button onClick={() => setValue('Hello, React!')}>Change Value</button>
       </div>
     );
   }
   
   export default MyComponent;
   

    

4. Context को रेंडर ट्री में जोड़ना (Adding Context to the Render Tree): Provider को अपने एप्लिकेशन के रेंडर ट्री में लपेटें ताकि Context डेटा को सभी चाइल्ड कम्पोनेंट्स में उपलब्ध कराया जा सके।

   import React from 'react';
   import ReactDOM from 'react-dom';
   import App from './App';
   import { MyProvider } from './MyProvider';
   
   ReactDOM.render(
     <MyProvider>
       <App />
     </MyProvider>,
     document.getElementById('root')
   );
   

    

Context API के लाभ (Benefits of Context API)

• प्रॉप्स ड्रिलिंग से मुक्ति (Avoiding Props Drilling): Context API आपको गहरे नेस्टेड कम्पोनेंट्स ट्री में डेटा पास करने की आवश्यकता को समाप्त करता है।
• ग्लोबल स्टेट प्रबंधन (Global State Management): आप आसानी से ग्लोबल स्टेट को प्रबंधित और उपयोग कर सकते हैं।
• सरलता और स्पष्टता (Simplicity and Clarity): Context API का उपयोग कोड को अधिक पठनीय और प्रबंधनीय बनाता है।

Context API के नुकसान (Drawbacks of Context API)

• जटिलता (Complexity): छोटे प्रोजेक्ट्स के लिए Context API का उपयोग अत्यधिक जटिल हो सकता है।
• प्रदर्शन समस्याएँ (Performance Issues): यदि ठीक से उपयोग नहीं किया गया, तो Context API के अत्यधिक उपयोग से रेंडरिंग समस्याएँ उत्पन्न हो सकती हैं।