यदि आपको लेख पसंद आया, तो आप मेरे लिए कॉफ़ी खरीदें के समर्थन में एक कॉफ़ी खरीद सकते हैं

घटकों को शुद्ध रखना

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

पवित्रता

तो हम एक शुद्ध फ़ंक्शन कैसे बना सकते हैं? और किसी फ़ंक्शन के शुद्ध होने के लिए उसमें क्या विशेषताएं होनी चाहिए? एक शुद्ध फ़ंक्शन निम्नलिखित विशेषताओं वाला एक फ़ंक्शन होना चाहिए:

• यह अपने काम से काम रखता है। यह कॉल किए जाने से पहले मौजूद किसी भी ऑब्जेक्ट या वेरिएबल को नहीं बदलता है।

• समान इनपुट, समान आउटपुट। समान इनपुट को देखते हुए, एक शुद्ध फ़ंक्शन को हमेशा एक ही परिणाम देना चाहिए। इसे एक ही इनपुट पर अलग-अलग परिणाम नहीं देने चाहिए।

आइए एक गणितीय सूत्र पर विचार करें : y = 2x

यदि x = 2, y = 4। यह अपरिवर्तनीय हमेशा एक ही परिणाम है।

यदि x = 3, y = 6. यह अपरिवर्तनीय हमेशा एक ही परिणाम है।

यदि x = 3, तो कभी-कभी y 9, -1, या 2.5 नहीं होगा, जो किसी अन्य स्थिति पर निर्भर करता है।

यदि y = 2x और x = 3 है तो y हमेशा 6 होगा।

यदि हमने इसे एक जावास्क्रिप्ट फ़ंक्शन में बनाया है:

function getDouble(number) {
  return 2 * number;
}

getDouble एक शुद्ध फ़ंक्शन है। यदि आप इसे 3 पास करते हैं, तो यह 6 वापस आएगा। हमेशा।

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

आइए उदाहरण देकर शुद्ध यौगिक को समझाएं।

function Member({ user }) {
  return (
    
    
      
 register {user} 
    
  );
}

export default function App() {
  return (
    

      
      
    
  );
}

यह हमेशा उपयोगकर्ता द्वारा दिया गया कोई भी पैरामीटर लौटाता है।एक गणित सूत्र की तरह

निष्कर्ष

एक घटक शुद्ध होना चाहिए, जिसका अर्थ है:

यह अपने काम से काम रखता है। इसे रेंडरिंग से पहले मौजूद किसी भी ऑब्जेक्ट या वेरिएबल को नहीं बदलना चाहिए।

समान इनपुट, समान आउटपुट। समान इनपुट को देखते हुए, एक घटक को हमेशा वही JSX लौटाना चाहिए।