React.Component — क्लास कम्पोनेंट और वे कैसे काम करते हैं

React.Component क्या है?

React.Component एक एब्सट्रैक्ट क्लास है जो स्थिति, प्रॉप्स और कम्पोनेंट जीवनचक्र के साथ काम करने के लिए अंतर्निहित विधियाँ प्रदान करता है। क्लास कम्पोनेंट बनाने के लिए, आपको React.Component से विस्तारित एक क्लास परिभाषित करनी होगी और render विधि को लागू करना होगा।

React.Component पहले React संस्करण (2013) में दिखाई दिया और पाँच वर्षों तक कम्पोनेंट बनाने का मुख्य तरीका बना रहा। React का पारिस्थितिकी तंत्र क्लास के चारों ओर बना था: उच्च-क्रम कम्पोनेंट (HOC), render props, संदर्भ — ये सभी पैटर्न क्लास सिंटैक्स के माध्यम से लागू किए गए थे।

2019 में React 16.8 के रिलीज़ के साथ, React टीम ने क्लास के विकल्प के रूप में हुक्स पेश किए। हुक्स ने समान समस्याओं — स्थिति, प्रभाव, संदर्भ — को हल किया, लेकिन इनहेरिटेंस और जटिल संदर्भ बाइंडिंग के बिना। React.Component पूरी तरह से समर्थित बना हुआ है, लेकिन नए प्रोजेक्ट्स के लिए फंक्शनल दृष्टिकोण अनुशंसित है।

क्लास कम्पोनेंट बनाना

न्यूनतम क्लास कम्पोनेंट एक क्लास है जिसमें एकमात्र render विधि होती है जो React एलिमेंट लौटाती है। render एकमात्र अनिवार्य विधि है। इसे this.props और this.state का एक शुद्ध फंक्शन होना चाहिए: प्रॉप्स और स्थिति का समान सेट समान परिणाम देता है।

import React, { Component } from 'react';

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

कंस्ट्रक्टर और स्थिति आरंभीकरण

कंस्ट्रक्टर माउंटिंग से पहले निष्पादित होता है। यह प्रॉप्स को पैरेंट क्लास में पास करने के लिए super(props) को कॉल करता है और this.state को आरंभ करता है। कंस्ट्रक्टर का उपयोग अन्य उद्देश्यों — सब्सक्रिप्शन, API कॉल — के लिए अनुशंसित नहीं है; इसके लिए componentDidMount मौजूद है।

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

  render() {
    return <p>Count: {this.state.count}</p>;
  }
}

this.state और this.setState से स्थिति प्रबंधन

this.state एक ऑब्जेक्ट है जिसमें कम्पोनेंट का डेटा होता है। इसे सीधे बदलना (this.state.count = 1) निषिद्ध है — इससे पुनः रेंडर नहीं होता और पूर्वानुमानशीलता टूट जाती है। स्थिति को this.setState के माध्यम से अपडेट किया जाना चाहिए, जो एक नई स्थिति ऑब्जेक्ट बनाता है और पुनः रेंडर को ट्रिगर करता है।

setState एक ऑब्जेक्ट या फंक्शन स्वीकार कर सकता है। फंक्शनल रूप तब पसंद किया जाता है जब नई स्थिति पिछली पर निर्भर करती है: this.setState(prev => ({ count: prev.count + 1 }))। React प्रदर्शन अनुकूलन के लिए कई setState कॉल्स को एक बैच में समूहित कर सकता है।

class Toggle extends Component {
  constructor(props) {
    super(props);
    this.state = { isOn: false };
  }

  handleClick() {
    this.setState(prev => ({ isOn: !prev.isOn }));
  }

  render() {
    return (
      <button onClick={() => this.handleClick()}>
        {this.state.isOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

setState की एक महत्वपूर्ण विशेषता यह है कि यह अतुल्यकालिक है। setState को कॉल करने के बाद, स्थिति तुरंत अपडेट नहीं होती। यदि आपको अपडेट के बाद कोई कार्रवाई करने की आवश्यकता है, तो दूसरे तर्क के रूप में एक कॉलबैक पास करें: this.setState(newState, () => console.log(this.state))।

जीवनचक्र विधियाँ

क्लास कम्पोनेंट में पूर्वनिर्धारित विधियाँ होती हैं जिन्हें React विशिष्ट क्षणों पर कॉल करता है। माउंटिंग — constructor → render → componentDidMount। अपडेट — render → componentDidUpdate। अनमाउंटिंग — componentWillUnmount।

ComponentDidMount — डेटा प्राप्त करना

componentDidMount पहले रेंडर के बाद साइड इफेक्ट्स के लिए मुख्य स्थान है। यहाँ HTTP अनुरोध किए जाते हैं, WebSocket कनेक्शन स्थापित किए जाते हैं और टाइमर शुरू किए जाते हैं। यदि आप componentWillUnmount में सब्सक्रिप्शन साफ़ नहीं करते, तो मेमोरी लीक होती है।

class UserProfile extends Component {
  componentDidMount() {
    fetch(`/api/users/${this.props.userId}`)
      .then(res => res.json())
      .then(data => this.setState({ user: data }));
  }

  componentWillUnmount() {
    // Cancel request on unmount
  }

  render() {
    return <div>{this.state.user?.name}</div>;
  }
}

विधियों में this संदर्भ बाइंडिंग

JavaScript में, क्लास विधियाँ डिफ़ॉल्ट रूप से इंस्टेंस से बाइंड नहीं होतीं। यदि आप किसी विधि को कॉलबैक के रूप में पास करते हैं — किसी इवेंट हैंडलर में, टाइमर में — तो this undefined (सख्त मोड में) या window (सख्त मोड के बिना) होगा। बाइंडिंग के बिना, this.setState त्रुटि फेंकेगा।

बाइंड करने के तीन तरीके हैं: कंस्ट्रक्टर में bind, कॉलबैक में एरो फंक्शन, और एरो फंक्शन के साथ class field। पहला तरीका React की आधिकारिक अनुशंसा है: कंस्ट्रक्टर में एक बार बाइंड करें, हर रेंडर पर फंक्शन को पुनः बनाए बिना।

// Method 1: bind in constructor (recommended)
class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState({ clicked: true });
  }

  render() {
    return <button onClick={this.handleClick}>Click</button>;
  }
}

Class fields — स्वचालित बाइंडिंग के साथ आधुनिक सिंटैक्स। क्लास प्रॉपर्टी में एरो फंक्शन कंस्ट्रक्टर के दायरे से this को कैप्चर करता है। कमी यह है कि विधि प्रोटोटाइप पर नहीं, बल्कि प्रत्येक इंस्टेंस पर बनाई जाती है, जो एक ही प्रकार के सैकड़ों कम्पोनेंट्स के लिए मेमोरी उपयोग बढ़ाती है।

क्लास बनाम फंक्शनल कम्पोनेंट

क्लास और फंक्शन के बीच चुनाव केवल सिंटैक्स का मामला नहीं है। हुक्स वाले फंक्शनल कम्पोनेंट क्लास में निहित समस्याओं को हल करते हैं: विभिन्न जीवनचक्र विधियों (componentDidMount + componentDidUpdate) में तर्क का दोहराव, this के साथ जटिलता, और संबंधित तर्क को पुनः प्रयोज्य ब्लॉक में निकालने में असमर्थता।

फंक्शनल कम्पोनेंट परीक्षण करने में आसान होते हैं — उनके पास कोई आंतरिक स्थिति नहीं होती (जो हुक्स से पहले केवल क्लास में उपलब्ध थी) और कॉलबैक सत्यापित करने के लिए DOM माउंटिंग की आवश्यकता नहीं होती। React सभी नए प्रोजेक्ट्स के लिए फंक्शनल कम्पोनेंट की अनुशंसा करता है; दस्तावेज़ीकरण और उदाहरण उनके साथ लिखे जाते हैं।

क्लास कम्पोनेंट पुराने कोड के साथ काम करते समय सबसे अच्छा विकल्प बने हुए हैं। यदि कोई प्रोजेक्ट 2019 से पहले शुरू हुआ था, तो इसमें संभवतः हज़ारों क्लास कम्पोनेंट हैं। उन सभी को एक स्प्रिंट में हुक्स में फिर से लिखना जोखिम भरा है। React पश्चगामी संगतता की गारंटी देता है: क्लास कम्पोनेंट हटाए नहीं जाएँगे।

क्लास से हुक्स में प्रवासन रणनीति

क्रमिक प्रवासन कम्पोनेंट के विश्लेषण से शुरू होता है। बिना स्थिति वाले सरल कम्पोनेंट पहले अनुवादित किए जाते हैं — वे आसानी से फंक्शन से बदल दिए जाते हैं। फिर — एक या दो स्थिति फ़ील्ड वाले कम्पोनेंट, जहाँ useState सीधे this.state और this.setState को बदल देता है।

कई जीवनचक्र विधियों वाले जटिल कम्पोनेंट useEffect के माध्यम से अनुवादित किए जाते हैं। componentDidMount + componentDidUpdate का तर्क विभिन्न निर्भरताओं के साथ अलग-अलग useEffect कॉल्स में विभाजित किया जाता है। componentWillUnmount को useEffect के अंदर रिटर्न फंक्शन से बदल दिया जाता है। जटिल स्थिति तर्क के लिए, useReducer का उपयोग करें।

स्वचालित प्रवासन उपकरण — @phenomnomnominal/ts-react-class-to-hook या codemod स्क्रिप्ट — सरल क्लास को स्वचालित रूप से परिवर्तित कर सकते हैं। जटिल मामलों के लिए, प्रवासन मैन्युअल काम बना रहता है जिसमें मूल कम्पोनेंट के तर्क की समझ आवश्यक होती है।