प्रतिक्रिया में वर्ग घटकों और कार्यात्मक घटकों के बीच चयन करना

प्लेटो द्वारा पुनर्प्रकाशित

अनुयायियों: 0

रिएक्ट प्लेटोब्लॉकचेन डेटा इंटेलिजेंस में क्लास घटकों और कार्यात्मक घटकों के बीच चयन करना। लंबवत खोज. ऐ.

कोर मतभेद

प्रतिक्रिया में, एक घटक कोड का एक टुकड़ा है जो उपयोगकर्ता इंटरफ़ेस के एक भाग का प्रतिनिधित्व करता है। रिएक्ट में दो मुख्य प्रकार के घटक होते हैं: वर्ग घटक और कार्यात्मक घटक।

वर्ग घटकों को एक ऐसे वर्ग का उपयोग करके परिभाषित किया जाता है जो React.Component वर्ग का विस्तार करता है। वे अधिक सुविधा-संपन्न हैं और उनके पास राज्य और जीवनचक्र की घटनाओं को संभालने के लिए अधिक विकल्प हैं। यह एक वर्ग घटक कैसा दिखता है:

class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; }
}

कार्यात्मक घटक केवल जावास्क्रिप्ट फ़ंक्शन हैं जो एक प्रतिक्रिया तत्व लौटाते हैं। वे वर्ग घटकों की तुलना में सरल होते हैं और पढ़ने और लिखने में आसान होते हैं। यहाँ उपरोक्त जैसा ही घटक है, जिसे कार्यात्मक घटक के रूप में लिखा गया है:

function Welcome(props) { return <h1>Hello, {props.name}</h1>;
}

कब उपयोग करें क्या

सामान्य तौर पर, आपको कार्यात्मक घटकों का उपयोग तब तक करना चाहिए जब तक कि आपको ऐसी सुविधा का उपयोग करने की आवश्यकता न हो जो केवल वर्ग घटकों में उपलब्ध हो, जैसे कि राज्य या जीवनचक्र विधियाँ।
कुछ और है कारण आप क्यों पसंद कर सकते हैं कार्यात्मक घटकों पर वर्ग घटकों का उपयोग करना:

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

कुछ ऐसे कारण भी हैं जिनकी वजह से आप लिखना पसंद कर सकते हैं कार्यात्मक घटक:

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

सामान्य तौर पर, आपको कार्यात्मक घटकों का उपयोग तब तक करना चाहिए जब तक कि आपकी कोई विशिष्ट आवश्यकता न हो जिसे केवल एक वर्ग घटक के साथ पूरा किया जा सके।

प्रभाव और उपयोग स्थिति

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

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

इस तरह आप अमल करेंगे उपयोग करें और उपयोग करें आपके कार्यात्मक घटकों के अंदर

import { useState, useEffect } from 'react'; function Example() { // Declare a new state variable, which we'll call "count" const [count, setCount] = useState(0); // Similar to componentDidMount and componentDidUpdate: useEffect(() => { // Update the document title using the browser API document.title = `Number of clicks: ${count}`; }); return ( <div> <p>Number of clicks: {count}</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> );
}

यहां, हमारे पास एक घटक है जो गिनती का ट्रैक रखता है, और उपयोगकर्ता को वर्तमान गणना प्रदर्शित करता है। घटक का उपयोग करता है उपयोग करें कार्यात्मक घटक में राज्य जोड़ने के लिए हुक, और उपयोग करें गिनती बदलने पर क्रिया करने के लिए हुक (दस्तावेज़ शीर्षक को अद्यतन करना)।

चाबी छीन लेना

जब रिएक्ट में वर्ग घटकों और कार्यात्मक घटकों के बीच चयन करने की बात आती है तो ये मुख्य रास्ते हैं:

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

मुझे उम्मीद है कि यह संक्षिप्त व्याख्या आपकी मदद करेगी। यदि आप सामान्य रूप से जावास्क्रिप्ट, प्रतिक्रिया या वेब विकास सीखने के लिए सलाह या अपने पथ पर कोई मार्गदर्शन चाहते हैं, तो कृपया 1:1 सत्र के लिए मुझसे बेझिझक संपर्क करें।