React.Component — sinif komponentləri və onların işləməsi

React.Component nədir?

React.Component — vəziyyət, proplar və komponentin həyat dövrü ilə işləmək üçün daxili metodlar təqdim edən abstrakt sinif. Sinif komponenti yaratmaq üçün React.Component-dən miras alan sinif təyin etməli və render metodunu həyata keçirməlisiniz.

React.Component React-in ilk versiyasında (2013) meydana çıxdı və beş il ərzində komponentlərin yaradılmasının əsas yolu olaraq qaldı. React ekosistemi siniflər ətrafında quruldu: yüksək səviyyəli komponentlər (HOC), render props, kontekst — bütün bu nümunələr sinif sintaksisi ilə həyata keçirildi.

2019-cu ildə React 16.8-in buraxılması ilə React komandası siniflərə alternativ olaraq hookəları təqdim etdi. Hookəlar eyni vəzifələri — vəziyyət, effektlər, kontekst — həll edirdi, lakin miras alma və mürəkkəb kontekst bağlanması olmadan. React.Component tam dəstəklənməyə davam edir, lakin yeni layihələr üçün funksional yanaşma tövsiyə olunur.

Sinif komponentinin yaradılması

Minimal sinif komponenti — React elementini qaytaran tək render metodu olan sinif. render — yeganə məcburi metoddur. O, this.props və this.state-dən təmiz funksiya olmalıdır: eyni proplar və vəziyyət dəsti eyni nəticəni verir.

import React, { Component } from 'react';

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

Konstruktor və vəziyyətin ilkinləşdirilməsi

Konstruktor quraşdırmadan əvvəl icra olunur. Onda propları ana sinifə ötürmək üçün super(props) çağırılır və this.state ilkinləşdirilir. Konstruktordan digər məqsədlər üçün — abunəliklər, API çağırışları — istifadə etmək tövsiyə edilmir: bunun üçün componentDidMount var.

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

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

this.state və this.setState ilə vəziyyətin idarə edilməsi

this.state — komponentin məlumatlarını ehtiva edən obyekt. Onu birbaşa dəyişmək (this.state.count = 1) qadağandır — bu yenidən render etmir və proqnozlaşdırıla bilənliyi pozur. Vəziyyəti this.setState vasitəsilə yeniləmək lazımdır, o yeni vəziyyət obyekti yaradır və təkrar renderi işə salır.

setState obyekt və ya funksiya qəbul edə bilər. Funksional forma yeni vəziyyət əvvəlkindən asılı olduqda üstünlük təşkil edir: this.setState(prev => ({ count: prev.count + 1 })). React performans optimallaşdırması üçün bir neçə setState-i bir batch-də qruplaşdıra bilər.

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-in vacib xüsusiyyəti — onun asinxron olmasıdır. setState çağırıldıqdan sonra vəziyyət dərhal yenilənmir. Yeniləmədən sonra hərəkət etmək lazımdırsa, ikinci arqument kimi callback ötürün: this.setState(newState, () => console.log(this.state)).

Həyat dövrü metodları

Sinif komponentləri React-in müəyyən anlarda çağırdığı əvvəlcədən təyin edilmiş metodlara malikdir. Quraşdırma — constructor → render → componentDidMount. Yeniləmə — render → componentDidUpdate. Sökülmə — componentWillUnmount.

ComponentDidMount — məlumat sorğusu

componentDidMount — ilk renderdən sonra yan təsirlər üçün əsas yerdir. Burada HTTP sorğuları yerinə yetirilir, WebSocket əlaqələri qurulur və taymerlər işə salınır. componentWillUnmount-da abunəliyi təmizləməsəniz, yaddaş sızması baş verir.

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

  componentWillUnmount() {
    // Quraşdırmada sorğunu ləğv et
  }

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

Metodlarda this kontekstinin bağlanması

JavaScript-də sinif metodları susmaya görə instansiyaya bağlı deyil. Metodu callback kimi ötürsəniz — hadisə idarəedicisinə, taymerə — this undefined (strict rejimdə) və ya window (strict rejim olmadan) olacaq. Bağlama olmadan this.setState xəta atacaq.

Bağlamanın üç yolu var: konstruktorda bind, callback-də ox funksiyası və ox funksiyası ilə class field. Birinci yol React-in rəsmi tövsiyəsidir: bind bir dəfə konstruktorda, hər renderdə funksiyanı yenidən yaratmadan.

// Metod 1: konstruktorda bind (tövsiyə olunur)
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 bağlama ilə müasir sintaksis. Sinif xüsusiyyətindəki ox funksiyası this-i konstruktorun görünmə sahəsindən tutur. Çatışmazlıq — metod hər instansiyada yaradılır, prototipdə deyil, bu da eyni tipli yüzlərlə komponent üçün yaddaşı artırır.

Sinif və funksional komponentlərin müqayisəsi

Sinif və funksiya arasında seçim — təkcə sintaksis məsələsi deyil. Hookəları olan funksional komponentlər siniflərə xas olan problemləri həll edir: müxtəlif həyat dövrü metodlarında (componentDidMount + componentDidUpdate) məntiqin təkrarlanması, this ilə mürəkkəblik və əlaqəli məntiqin təkrar istifadə olunan bloka çıxarılmaması.

Funksional komponentləri test etmək daha asandır — onların daxili vəziyyəti yoxdur (hookəlardan əvvəl yalnız siniflərdə idi) və callback-ləri yoxlamaq üçün DOM-da quraşdırma tələb etmir. React bütün yeni layihələr üçün funksional komponentləri tövsiyə edir, sənədlər və nümunələr onlarla yazılır.

Sinif komponentləri köhnə kod ilə işləyərkən ən yaxşı seçim olaraq qalır. Layihə 2019-cu ildən əvvəl başlanıbsa, yəqin ki, minlərlə sinif komponenti var. Onların hamısını bir sprintdə hookəlara köçürmək risklidir. React geriyə uyğunluğa zəmanət verir: sinif komponentləri silinməyəcək.

Siniflərdən hookəlara miqrasiya strategiyası

Tədricən miqrasiya komponentin təhlili ilə başlayır. Vəziyyətsiz sadə komponentlər (stateless) birinci köçürülür — onlar funksiyalarla əvəz olunur. Sonra — bir-iki state sahəsi olan komponentlər, burada useState birbaşa this.state və this.setState-i əvəz edir.

Çoxlu həyat dövrü metodları olan mürəkkəb komponentlər useEffect vasitəsilə köçürülür. componentDidMount + componentDidUpdate-dən olan məntiq müxtəlif asılılıqlarla ayrı-ayrı useEffect-lərə bölünür. componentWillUnmount useEffect daxilində qaytarılan funksiya ilə əvəz olunur. Mürəkkəb vəziyyət məntiqi üçün useReducer istifadə edin.

Avtomatik miqrasiya alətləri — @phenomnomnominal/ts-react-class-to-hook və ya codemod skriptləri — sadə sinifləri avtomatik çevirə bilər. Mürəkkəb hallarda miqrasiya orijinal komponentin məntiqini anlamaq tələb edən əl işi olaraq qalır.