ES6 वर्ग आधारित रिएक्ट घटकों बनाम कार्यात्मक ES6 रिएक्ट घटकों का उपयोग कब करें?

Question

प्रतिक्रिया सीखने में कुछ समय बिताने के बाद मैं घटक बनाने के दो मुख्य प्रतिमानों के बीच के अंतर को समझता हूं।

मेरा सवाल यह है कि मुझे कब और किसका उपयोग करना चाहिए? एक के बाद एक दूसरे के लाभ / ट्रेडऑफ क्या हैं?

---

ES6 वर्ग:

import React, { Component } from 'react';

export class MyComponent extends Component {
  render() {
    return (
      <div></div>
    );
  }
}

---

कार्यात्मक:

const MyComponent = (props) => {
    return (
      <div></div>
    );
}

मैं सोच रहा हूं कि जब भी उस घटक द्वारा हेरफेर किए जाने की कोई स्थिति न हो, लेकिन क्या ऐसा है?

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

Comments

ऐसा लगता है कि आप पहले से ही जवाब जानते हैं।

— फेलिक्स क्लिंग

यदि आपके पास केवल रेंडर विधि वाला एक घटक है, तो आप इसे कार्यात्मक रूप में बदल सकते हैं। यदि आपको स्टेटलेस रेंडर फंक्शन से ज्यादा कुछ चाहिए, तो क्लासेस का इस्तेमाल करें

— सिर्फ-बोरिस

इसे और भी संक्षिप्त करने की कोशिश करें:const MyComponent = (props) => <div>...</div>

— विलिअम सिमको

मैं कभी भी कार्यात्मक का उपयोग नहीं करता हूं यदि इसे टाला जा सकता है। क्योंकि मैं अनिवार्य रूप से सड़क के नीचे वर्ग आधारित रिफ्लेक्टर की आवश्यकता को समाप्त करता हूं। और फिर अक्सर उसके बाद वापस कार्यात्मक करने की आवश्यकता होती है।

— कीथजग्रंट

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

— पोलोव्निकोव.फ 7

Answer 1

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

क्योंकि वे हल्के हैं, इन सरल घटकों को कार्यात्मक घटकों के रूप में लिखना बहुत मानक है।

यदि आपके घटकों को अधिक कार्यक्षमता की आवश्यकता होती है, जैसे कि राज्य रखना, इसके बजाय कक्षाओं का उपयोग करें।

और जानकारी: https://facebook.github.io/react/docs/reusable-components.html#es6-classes

---

EDIT : उपरोक्त में से बहुत कुछ सच था, जब तक रिएक्ट हुक की शुरुआत नहीं हुई।

• componentDidUpdateके साथ दोहराया जा सकता है useEffect(fn), जहां fnरेंडरिंग पर चलने के लिए फ़ंक्शन है।

• componentDidMountतरीकों के साथ दोहराया जा सकता है useEffect(fn, []), जहां fnरेंडरिंग पर चलने के लिए फ़ंक्शन है, और []ऑब्जेक्ट की एक सरणी है जिसके लिए घटक रेंडर करेगा, यदि और केवल अगर पिछले रेंडर के बाद से कम से कम एक मूल्य बदल गया है। जैसा कि कोई भी नहीं है, useEffect()पहले माउंट पर एक बार चलता है।

• stateके साथ दोहराया जा सकता है useState(), जिसका वापसी मूल्य राज्य के संदर्भ में नष्ट हो सकता है और एक फ़ंक्शन जो राज्य को सेट कर सकता है (यानी, const [state, setState] = useState(initState))। एक उदाहरण इसे और अधिक स्पष्ट रूप से समझा सकता है:

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

  const increment = () => { 
    setCount(count + 1);
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>+</button>
    </div>
  )
}

default export Counter

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

"इवेंट हैंडलिंग फ़ंक्शंस को कार्यात्मक घटकों में प्रति रेंडर पुनर्निर्धारित किया गया है"

जब तक सच है, कृपया विचार करें कि क्या आपके घटक वास्तव में इतनी गति या वॉल्यूम प्रदान कर रहे हैं कि यह चिंता का विषय होगा।

यदि वे हैं, तो आप हुक useCallbackऔर useMemoहुक के उपयोग को पुनर्परिभाषित कर सकते हैं। हालांकि, ध्यान रखें कि इससे आपका कोड (सूक्ष्म रूप से) प्रदर्शन में खराब हो सकता है ।

लेकिन ईमानदारी से, मैंने रिएक्ट ऐप्स में अड़चनों को कम करने के बारे में कभी नहीं सुना है। समयपूर्व अनुकूलन सभी बुराई की जड़ है - जब यह समस्या होती है तो इस बारे में चिंता करें

Comments

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

— डेनिस

यह प्रतिक्रिया में दो प्रकार के घटकों के बीच के अंतर के बारे में सबसे अच्छा लेख है: code.tutsplus.com/tutorials/…

— एरियन

प्रतिक्रिया के रूप में 16.8, आप useStateहुक के माध्यम से एक कार्यात्मक घटक में राज्य का उपयोग कर सकते हैं ।

— ग्रेग

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

— पॉल्कोवनिकोव .ph

आपको जानकारी कहां मिली है Facebook officially recommends using functional components wherever possible?

— जोहानचोपिन

Answer 2

हमेशा जब भी संभव हो स्टेटलेस फ़ंक्शंस (कार्यात्मक घटकों) का उपयोग करने का प्रयास करें। ऐसे परिदृश्य हैं जहां आपको एक नियमित प्रतिक्रिया वर्ग का उपयोग करने की आवश्यकता होगी:

• घटक को राज्य बनाए रखने की आवश्यकता है
• घटक बहुत अधिक पुन: प्रतिपादन कर रहा है और आपको इसे नियंत्रित करने की आवश्यकता है shouldComponentUpdate
• आपको एक कंटेनर घटक की आवश्यकता है

अपडेट करें

अब एक रिएक्ट क्लास कहा जाता है PureComponentजिसे आप विस्तारित कर सकते हैं (इसके बजाय Component) जो अपने आप को लागू करता है जो shouldComponentUpdateआपके लिए उथले रंगमंच की तुलना का ध्यान रखता है। अधिक पढ़ें

Comments

Always try to use stateless functions (functional components) whenever possible.मैंने पढ़ा है कि दस लोग ऐसा कहते हैं। फिर भी उनमें से किसी ने एक स्पष्टीकरण क्यों नहीं दिया।

— रोटारती

In an ideal world, most of your components would be stateless functions because in the future we’ll also be able to make performance optimizations specific to these components by avoiding unnecessary checks and memory allocations. This is the recommended pattern, when possible.अधिक जानकारी: facebook.github.io/react/docs/…

— Diogo Cardoso

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

— door_number_three

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

— डोबेस वैंडर्मर

ध्यान दें कि उद्धृत फेसबुक अनुशंसा अब अस्तित्व में नहीं है ( ऊपर मेरी टिप्पणी देखें )।

— गरुण

Answer 3

UPDATE मार्च 2019

https://overreacted.io/how-are-function-components-different-from-classes/

अद्यतन फ़रवरी 2019:

रिएक्ट हुक की शुरुआत के साथ , ऐसा लगता है जैसे रिएक्ट टीम चाहती है कि हम जब भी संभव हो कार्यात्मक घटकों का उपयोग करें (जो जावास्क्रिप्ट के कार्यात्मक प्रकृति का बेहतर अनुसरण करता है)।

उनकी प्रेरणा:

1.) It’s hard to reuse stateful logic between components
2.) Complex components become hard to understand
3.) Classes confuse both people and machines

हुक के साथ एक कार्यात्मक घटक कर सकता है लगभग वह सब कुछ जो एक वर्ग घटक कर सकता है, बिना किसी ड्रॉ बैक के उल्लेख के ऊपर।

जैसे ही आप सक्षम होते हैं मैं उनका उपयोग करने की सलाह देता हूं।

मूल उत्तर

कार्यात्मक घटक वर्ग आधारित घटकों की तुलना में अधिक हल्के नहीं हैं, "वे बिल्कुल कक्षाओं के रूप में प्रदर्शन करते हैं।" - https://github.com/facebook/react/issues/5677#issuecomment-241190513

उपरोक्त लिंक थोड़ा दिनांकित है, लेकिन प्रतिक्रिया 16.7.0 के प्रलेखन का कहना है कि कार्यात्मक और वर्ग घटक:

"रिएक्ट के दृष्टिकोण से बराबर हैं।" - https://reactjs.org/docs/compords-and-props.html#stateless-functions

एक कार्यात्मक घटक और एक वर्ग घटक के बीच अनिवार्य रूप से कोई अंतर नहीं है जो सिंटैक्स के अलावा रेंडर विधि को लागू करता है।

भविष्य में (उपरोक्त लिंक को उद्धृत करते हुए) "हम [प्रतिक्रिया] इस तरह के अनुकूलन जोड़ सकते हैं।"

यदि आप अनावश्यक रेंडरर्स को समाप्त करके प्रदर्शन को बढ़ावा देने की कोशिश कर रहे हैं, तो दोनों दृष्टिकोण समर्थन प्रदान करते हैं। memoकार्यात्मक घटकों के लिए औरPureComponent कक्षाओं के लिए।

- https://reactjs.org/docs/react-api.html#reactmemo

- https://reactjs.org/docs/react-api.html#reactpurecomponent

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

Comments

मुझे लगता है कि हर घटक रिएक्ट का विस्तार कर रहा है ।Component कोड को अधिक पठनीय बनाता है, खासकर नए लोगों के लिए। जब आप किसी घटक को हर बार उसी तरह बनाते देखते हैं तो यह अच्छा होता है। जैसे @Galupuf ने कहा, सरल घटकों में "रेंडर ()" नामक एक विधि होती है। सब कुछ React.Component का विस्तार करना भी अच्छा है क्योंकि जब आप "यह" बंधन शुरू करना चाहते हैं, तो राज्य, आदि। आपको हर चीज को रिफैक्ट करने की ज़रूरत नहीं है, आप बस वही जोड़ सकते हैं जो आपको चाहिए।

— jeffski13

Answer 4

16.8 अभिक्रिया के अनुसार स्टेटलेस फंक्शनल घटक भ्रामक होते हैं और उन्हें इस कारण से बचना चाहिए क्योंकि वे अब स्टेटलेस नहीं हैं ( React.SFC पदावनत , Dan Abramov on React.SFC ), उनके पास एक राज्य हो सकता है, उनके पास हुक हो सकते हैं (जैसा कि कार्य जीवनचक्र के तरीके) साथ ही, वे कक्षा के घटकों के साथ अधिक या कम ओवरलैप करते हैं

कक्षा आधारित घटक

• राज्य
• जीवनचक्र के तरीके
• React.PureComponent के साथ संस्मरण

कार्यात्मक घटक:

• राज्य ( उपयोग करें , उपयोग करेंरेडर हुक)
• जीवनचक्र विधियाँ (उपयोग के माध्यम से, उपयोग करें , प्रयोग करें हुक)
• ज्ञापन के माध्यम से ज्ञापन एचओसी

क्यों मैं फंतासी घटक पसंद करते हैं

• प्रतिक्रिया का उपयोग करेंइफ़ेक्ट हुक प्रदान करें जो कि componentDidMount, componentDidUpdateऔर संयोजन के लिए एक बहुत ही स्पष्ट और संक्षिप्त तरीका हैcomponentWillUnmount जीवनचक्र विधियों
• हुक के साथ आप तर्क को निकाल सकते हैं जिसे आसानी से घटकों और परीक्षण योग्य में साझा किया जा सकता है
• स्कूपिंग के बारे में कम भ्रम

हुक (यानी कार्यात्मक घटकों) का उपयोग करने पर प्रतिक्रिया प्रेरणा ।