घटकों को शुद्ध रखना रिएक्ट और कार्यात्मक प्रोग्रामिंग में एक मौलिक सिद्धांत है। यहां आपके रिएक्ट घटकों में शुद्धता बनाए रखने के लिए लाभ और रणनीतियों सहित घटकों में शुद्धता की अवधारणा की गहन खोज की गई है।

प्रतिक्रिया में घटकों को शुद्ध रखना

शुद्ध कार्य क्या हैं?

एक शुद्ध फ़ंक्शन एक फ़ंक्शन है जो:

1. नियतात्मक: समान इनपुट को देखते हुए, यह हमेशा एक ही आउटपुट उत्पन्न करता है।
2. कोई साइड इफेक्ट नहीं: इसका कोई साइड इफेक्ट नहीं होता है, जैसे बाहरी स्थिति को संशोधित करना या बाहरी दुनिया के साथ बातचीत करना (उदाहरण के लिए, एपीआई कॉल करना, डीओएम में हेरफेर करना)।

शुद्ध घटकों का उपयोग क्यों करें?

1. पूर्वानुमेयता: शुद्ध घटक लगातार व्यवहार करते हैं। आप उनके आउटपुट पर भरोसा कर सकते हैं, जो एप्लिकेशन के बारे में तर्क को सरल बनाता है।

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

3. प्रदर्शन अनुकूलन: शुद्ध घटक रेंडरिंग को अनुकूलित करने में मदद करते हैं। रिएक्ट कुशलतापूर्वक यह निर्धारित कर सकता है कि किसी घटक को प्रोप परिवर्तनों के आधार पर पुन: प्रस्तुत करने की आवश्यकता है या नहीं।

4. रखरखाव: जैसे-जैसे आपका कोडबेस बढ़ता है, शुद्ध घटकों को बनाए रखना आसान हो जाता है। वे छिपी हुई निर्भरताओं के बिना कार्यक्षमता को समाहित करते हैं, जिससे डिबगिंग और रीफैक्टरिंग आसान हो जाती है।

5. पुन: उपयोग: शुद्ध घटक अत्यधिक पुन: प्रयोज्य होते हैं क्योंकि वे बाहरी स्थितियों पर निर्भर नहीं होते हैं। आप इन्हें विभिन्न संदर्भों में आसानी से उपयोग कर सकते हैं।

घटकों को शुद्ध कैसे रखें

आपके घटक शुद्ध रहें यह सुनिश्चित करने के लिए यहां कुछ रणनीतियां दी गई हैं:

1. साइड इफेक्ट्स से बचें:
   • प्रॉप्स या वैश्विक स्थिति को सीधे संशोधित न करें।
   • रेंडर विधि के अंदर अतुल्यकालिक संचालन से बचें (उदाहरण के लिए, एपीआई कॉल, टाइमर)।

   const PureComponent = ({ count }) => {
     // Pure function: does not cause side effects
     return 
{count}
;
   };

1. React.memo का उपयोग करें:
   • प्रॉप्स नहीं बदले जाने पर अनावश्यक पुन: रेंडर को रोकने के लिए कार्यात्मक घटकों को React.memo के साथ लपेटें।

   const PureGreeting = React.memo(({ name }) => {
     return 
Hello, {name}!
;
   });

1. डिस्ट्रक्चर प्रॉप्स:
   • घटक की संरचना को साफ और केंद्रित रखने के लिए घटक की पैरामीटर सूची में प्रॉप्स को नष्ट करें।

   const PureButton = ({ label, onClick }) => {
     return {label};
   };

1. राज्य को ऊपर उठाएं:
   • मूल घटकों में स्थिति प्रबंधित करें और आवश्यक डेटा और ईवेंट हैंडलर को चाइल्ड घटकों तक पहुंचाएं। यह बाल घटकों को पूरी तरह कार्यात्मक रखता है।

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

     return ;
   };

1. रेंडर में इनलाइन फ़ंक्शंस से बचें:
   • रेंडर विधि में फ़ंक्शन को इनलाइन परिभाषित करने के बजाय, उन्हें बाहर परिभाषित करें। यह प्रत्येक रेंडर पर नए फ़ंक्शन इंस्टेंस को बनने से रोकता है, जिससे अनावश्यक री-रेंडर हो सकता है।

   const PureCounter = React.memo(({ count, setCount }) => {
     return  setCount(count   1)}>Increment;
   });

1. राज्य को सीधे बदलने से बचें:
   • ऐसी विधियों का उपयोग करें जो मौजूदा स्थिति को सीधे बदलने के बजाय नई स्थिति लौटाती हैं। यह अपरिवर्तनीयता सिद्धांतों के अनुरूप है।

   const handleAddItem = (item) => {
     setItems((prevItems) => [...prevItems, item]); // Pure approach
   };

शुद्ध घटक का उदाहरण

यहां एक शुद्ध कार्यात्मक घटक का पूरा उदाहरण दिया गया है जो इन सिद्धांतों का पालन करता है:

import React, { useState } from 'react';

const PureCounter = React.memo(({ count, onIncrement }) => {
  console.log('PureCounter Rendered');
  return Count: {count};
});

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

  const handleIncrement = () => {
    setCount((prevCount) => prevCount   1);
  };

  return (
    

      
Pure Component Example
      
    
  );
};

export default App;

निष्कर्ष

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