React.Component — klass komponentlari va ularning ishlashi

React.Component nima?

React.Component — holat, proplar va komponentning hayot sikli bilan ishlash uchun o'rnatilgan metodlarni taqdim etuvchi abstrakt klass. Klass komponentini yaratish uchun React.Component dan meros oladigan klassni belgilash va render metodini amalga oshirish kerak.

React.Component React-ning birinchi versiyasida (2013) paydo bo'ldi va besh yil davomida komponentlar yaratishning asosiy usuli bo'lib qoldi. React ekotizimi klasslar atrofida qurildi: yuqori darajali komponentlar (HOC), render props, kontekst — barcha bu naqshlar klass sintaksisi orqali amalga oshirildi.

2019 yilda React 16.8 ning chiqarilishi bilan React jamoasi klasslarga alternativa sifatida hook-larni taqdim etdi. Hook-lar bir xil vazifalarni — holat, effektlar, kontekst — hal qilardi, lekin meros olish va murakkab kontekst bog'lashsiz. React.Component to'liq qo'llab-quvvatlanmoqda, ammo yangi loyihalar uchun funksional yondashuv tavsiya etiladi.

Klass komponentini yaratish

Minimal klass komponenti — React elementini qaytaradigan yagona render metodi bo'lgan klass. render — yagona majburiy metod. U this.props va this.state dan sof funksiya bo'lishi kerak: bir xil proplar va holat to'plami bir xil natijani beradi.

import React, { Component } from 'react';

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

Konstruktor va holatni boshlang'ich qiymatlash

Konstruktor montajdan oldin bajariladi. Unda proplarni ota-ona klassiga uzatish uchun super(props) chaqiriladi va this.state boshlang'ich qiymatlanadi. Konstruktordan boshqa maqsadlarda — obunalar, API chaqiruvlari — foydalanish tavsiya etilmaydi: buning uchun componentDidMount mavjud.

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

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

this.state va this.setState orqali holatni boshqarish

this.state — komponent ma'lumotlarini o'z ichiga olgan obyekt. Uni to'g'ridan-to'g'ri o'zgartirish (this.state.count = 1) taqiqlangan — bu qayta renderlashni keltirib chiqarmaydi va bashorat qilishni buzadi. Holatni this.setState orqali yangilash kerak, u yangi holat obyektini yaratadi va qayta renderlashni ishga tushiradi.

setState obyekt yoki funksiyani qabul qilishi mumkin. Funksional shakl yangi holat oldingisiga bog'liq bo'lganda afzal: this.setState(prev => ({ count: prev.count + 1 })). React ishlab chiqarishni optimallashtirish uchun bir nechta setState-ni bitta batch-da guruhlashi mumkin.

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-ning muhim xususiyati — u asinxron. setState chaqirilgandan so'ng holat darhol yangilanmaydi. Yangilashdan keyin harakat qilish kerak bo'lsa, ikkinchi argument sifatida callback-ni uzating: this.setState(newState, () => console.log(this.state)).

Hayot sikli metodlari

Klass komponentlari React ma'lum momentlarda chaqiradigan oldindan belgilangan metodlarga ega. Montaj — constructor → render → componentDidMount. Yangilash — render → componentDidUpdate. Demontaj — componentWillUnmount.

ComponentDidMount — ma'lumot so'rovi

componentDidMount — birinchi renderdan keyin nojo'ya ta'sirlar uchun asosiy joy. Bu yerda HTTP so'rovlari bajariladi, WebSocket ulanishlari o'rnatiladi va taymerlar ishga tushiriladi. Agar componentWillUnmount-da obunani tozalamasangiz, xotira sizib ketishi yuz beradi.

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

  componentWillUnmount() {
    // Montajda so'rovni bekor qilish
  }

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

Metodlarda this kontekstini bog'lash

JavaScript-da klass metodlari sukut bo'yicha instansiyaga bog'lanmagan. Agar metodni callback sifatida uzatsangiz — hodisa boshqaruvchisiga, taymerga — this undefined (strict rejimda) yoki window (strict rejimsiz) bo'ladi. Bog'lashsiz this.setState xato chiqaradi.

Bog'lashning uchta usuli bor: konstruktorda bind, callback-da strelka funksiyasi va strelka funksiyasi bilan class field. Birinchi usul — React-ning rasmiy tavsiyasi: bind bir marta konstruktorda, har bir renderda funksiyani qayta yaratmasdan.

// 1-usul: konstruktorda bind (tavsiya etiladi)
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 field — avtomatik bog'lash bilan zamonaviy sintaksis. Klass xususiyatidagi strelka funksiyasi this-ni konstruktorning ko'rinish doirasidan oladi. Kamchiligi — metod har bir instansiyada yaratiladi, prototipda emas, bu esa bir turdagi yuzlab komponentlar uchun xotirani oshiradi.

Klass va funksional komponentlarni taqqoslash

Klass va funksiya o'rtasidagi tanlov — faqat sintaksis masalasi emas. Hook-lari bo'lgan funksional komponentlar klasslarga xos muammolarni hal qiladi: turli hayot sikli metodlarida (componentDidMount + componentDidUpdate) mantiqning takrorlanishi, this bilan murakkablik va bog'liq mantiqni qayta ishlatiladigan blokga ajratib bo'lmasligi.

Funksional komponentlarni sinash osonroq — ular ichki holatga ega emas (hook-lardan oldin faqat klasslarda edi) va callback-larni tekshirish uchun DOM-da montaj talab qilmaydi. React barcha yangi loyihalar uchun funksional komponentlarni tavsiya qiladi, hujjatlar va misollar ular bilan yoziladi.

Klass komponentlari eski kod bilan ishlashda eng yaxshi tanlov bo'lib qoladi. Agar loyiha 2019 yildan oldin boshlangan bo'lsa, unda minglab klass komponentlari bo'lishi mumkin. Ularning hammasini bir sprintda hook-larga qayta yozish xavfli. React orqaga qarab moslikni kafolatlaydi: klass komponentlari olib tashlanmaydi.

Klasslardan hook-larga migratsiya strategiyasi

Bosqichma-bosqich migratsiya komponentni tahlil qilish bilan boshlanadi. Holatsiz sodda komponentlar (stateless) birinchi bo'lib o'tkaziladi — ular funksiyalar bilan bemalol almashtiriladi. Keyin — bir-ikki holat maydoni bo'lgan komponentlar, bunda useState to'g'ridan-to'g'ri this.state va this.setState ni almashtiradi.

Ko'p hayot sikli metodlari bo'lgan murakkab komponentlar useEffect orqali o'tkaziladi. componentDidMount + componentDidUpdate dan mantiq turli bog'liqliklar bilan alohida useEffect-larga bo'linadi. componentWillUnmount useEffect ichidagi qaytariladigan funksiya bilan almashtiriladi. Murakkab holat mantiqi uchun useReducer dan foydalaning.

Avtomatik migratsiya vositalari — @phenomnomnominal/ts-react-class-to-hook yoki codemod skriptlari — sodda klasslarni avtomatik konvertatsiya qilishi mumkin. Murakkab holatlarda migratsiya asl komponent mantiqini tushunishni talab qiladigan qo'l mehnati bo'lib qoladi.