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

घटक आपके उपयोगकर्ता इंटरफ़ेस (यूआई) के निर्माण खंड हैं।

उन्हें लेगो ईंटों के रूप में सोचें - जटिल संरचनाएं बनाने के लिए आप उन्हें विभिन्न तरीकों से जोड़ सकते हैं। वे कोड के स्वतंत्र और पुन: प्रयोज्य टुकड़े हैं जो यूआई और तर्क को समाहित करते हैं।

एक घटक को दूसरे घटक के भीतर पुन: उपयोग करना आम तौर पर इस तरह दिखता है:

import MyComponent from './MyComponent';

function ParentComponent() {
  return (
    

      
  );
}

क्लास कंपोनेंट्स और फंक्शनल कंपोनेंट्स रिएक्ट में कंपोनेंट्स बनाने के दो प्राथमिक तरीके हैं।

import React, { Component } from 'react';

class Counter extends Component {
 constructor(props) {
  super(props);
  this.state = { count: 0 };
 }

 handleClick = () => {
  this.setState({  
 count: this.state.count   1 });
 };

 render() {
  return  
 (
   

    
You clicked {this.state.count} times
    Click me
   
  );
 }
}

export default Counter;

यह एक क्लास घटक है, जो जावास्क्रिप्ट कक्षाओं का उपयोग करके बनाया गया है जो रिएक्ट.कंपोनेंट क्लास का विस्तार करता है।

import React, { useState } from 'react';

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

  const handleClick = () => {
    setCount(count   1);
  };

  return (
    

      
You clicked {count} times
      Click me
    
  );
}

export default Counter;

दूसरी ओर, यह एक कार्यात्मक घटक है, जिसे एक सरल जावास्क्रिप्ट फ़ंक्शन के रूप में लिखा गया है।

राज्य प्रबंधन: मुख्य अंतर।

क्लास घटक इस.स्टेट का उपयोग करके अपनी आंतरिक स्थिति का प्रबंधन करते हैं। इसे आम तौर पर कंस्ट्रक्टर में आरंभ किया जाता है, this.state ऑब्जेक्ट का उपयोग करके एक्सेस किया जाता है, और this.setState पद्धति का उपयोग करके अपडेट किया जाता है, जैसा कि ऊपर दिए गए कोड ब्लॉक में देखा गया है।

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

import React, { useReducer } from 'react';

const initialState = {
  count: 0,
  step: 1,
};

const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return { ...state, count: state.count   state.step };
    case 'decrement':   

      return { ...state, count: state.count - state.step };
    case 'setStep':
      return { ...state, step: action.payload   
 };
    default:
      throw new Error();
  }
};

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

  const increment = () => dispatch({ type: 'increment' });
  const decrement = () => dispatch({ type: 'decrement'   
 });
  const setStep = (newStep) => dispatch({ type: 'setStep', payload: newStep });

  return (
    

      
Count: {state.count}
      
Step: {state.step}
       
      -
       setStep(Number(e.target.value))} />
    
  );
}

export default Counter;

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

दोनों घटकों में राज्य वस्तु के सीधे हेरफेर से बचें।

घटक प्रकार की परवाह किए बिना, कभी भी राज्य ऑब्जेक्ट को सीधे संशोधित या परिवर्तित न करें। इसके बजाय, अद्यतन मानों के साथ एक नया ऑब्जेक्ट बनाएं। यह दृष्टिकोण रिएक्ट को परिवर्तनों को कुशलतापूर्वक ट्रैक करने और पुन: रेंडरर्स को अनुकूलित करने में मदद करता है।

कार्यात्मक घटक उदाहरण:

import React, { useState } from 'react';

function UserProfile() {
  const [user, setUser] = useState({ name: 'Jane Doe', age: 30 });

  const handleNameChange = (newName) => {
    setUser({ ...user, name: newName }); // Create a new object with updated name
  };

  return (
    

      
Name: {user.name}
      
Age: {user.age}
       handleNameChange(e.target.value)} />
    
  );
}

export default UserProfile;

वर्ग घटक उदाहरण:

import React, { Component } from 'react';

class UserProfile extends Component {
  state = { user: { name: 'Jane Doe', age: 30 } };

  handleNameChange = (newName) => {
    this.setState(prevState => ({
      user: { ...prevState.user, name: newName } // Create a new object with updated name
    }));
  };

  render() {
    return (
      

        
Name: {this.state.user.name}
        
Age: {this.state.user.age}
         this.handleNameChange(e.target.value)} />
      
    );
  }
}

export default UserProfile;

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

वर्ग घटक जटिल तर्क के लिए हैं।

• जटिल राज्य प्रबंधन: जटिल राज्य तर्क से निपटने के लिए जिसके लिए सूक्ष्म नियंत्रण की आवश्यकता होती है, this.state और this.setState के साथ वर्ग घटक अधिक लचीलापन प्रदान कर सकते हैं।
• जीवनचक्र विधियां: उन घटकों के लिए जो कंपोनेंटडिडमाउंट, कंपोनेंटडिडअपडेट, या कंपोनेंटविलअनमाउंट जैसे जीवनचक्र विधियों पर बहुत अधिक निर्भर हैं, वर्ग घटक पारंपरिक विकल्प हैं।
• त्रुटि सीमाएँ: एक घटक वृक्ष के भीतर त्रुटियों को संभालने और दुर्घटनाओं को रोकने के लिए, कंपोनेंटडिडकैच के साथ वर्ग घटक आवश्यक हैं।
• प्रदर्शन अनुकूलन: विशिष्ट प्रदर्शन-महत्वपूर्ण परिदृश्यों में, क्लास घटकों के भीतर प्योरकंपोनेंट या शोकंपोनेंटअपडेट का लाभ उठाया जा सकता है।
• विरासत कोडबेस: यदि आप किसी मौजूदा प्रोजेक्ट पर काम कर रहे हैं जो क्लास घटकों पर बहुत अधिक निर्भर करता है, तो नए घटकों के लिए उनका उपयोग करके स्थिरता बनाए रखना आसान हो सकता है।

कार्यात्मक घटक सरल दृश्यों के लिए हैं।

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

अपने घटक की आवश्यकताओं को अपने निर्णय का मार्गदर्शन करने दें।

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

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

आपको किस घटक के साथ काम करने में अधिक आनंद आता है?