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 اسکرپٹ — سادہ کلاسز کو خودکار طور پر تبدیل کر سکتے ہیں۔ پیچیدہ معاملات میں، منتقلی دستی کام رہتی ہے جس کے لیے ماخذ کمپوننٹ کی منطق کو سمجھنا ضروری ہوتا ہے۔