React.Component — osztálykomponensek és hogyan működnek

Mi az a React.Component?

React.Component — egy absztrakt osztály, amely beépített metódusokat biztosít az állapottal, props-okkal és a komponens életciklusával való munkához. Egy osztálykomponens létrehozásához meg kell határoznia egy osztályt, amely örököl a React.Component-től, és implementálnia kell a render metódust.

A React.Component a React első verziójában (2013) jelent meg, és öt évig a fő módja maradt a komponensek létrehozásának. A React ökoszisztéma az osztályok köré épült: magasabb rendű komponensek (HOC), render props, kontextus — ezek a minták mind osztály szintaxissal lettek implementálva.

A React 16.8 2019-es kiadásával a React csapat bemutatta a hook-okat az osztályok alternatívájaként. A hook-ok ugyanazokat a feladatokat oldották meg — állapot, effektusok, kontextus — de öröklődés és bonyolult kontextus kötés nélkül. A React.Component továbbra is teljes mértékben támogatott, de új projektekhez a funkcionális megközelítés ajánlott.

Osztálykomponens létrehozása

Minimális osztálykomponens — egy osztály egyetlen render metódussal, amely egy React elemet ad vissza. render — az egyetlen kötelező metódus. Tiszta függvénynek kell lennie a this.props és this.state alapján: ugyanaz a props és állapot készlet ugyanazt az eredményt adja.

import React, { Component } from 'react';

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

Konstruktor és állapot inicializálása

A konstruktor a csatlakoztatás előtt fut le. Benne a super(props) meghívásra kerül a props-ok szülőosztálynak való átadásához, és inicializálásra kerül a this.state. A konstruktor más célokra való használata — feliratkozások, API hívások — nem ajánlott: erre van a componentDidMount.

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

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

Állapotkezelés a this.state és this.setState segítségével

this.state — a komponens adatait tartalmazó objektum. Közvetlen módosítása (this.state.count = 1) tilos — nem vált ki újrarenderelést és megtöri a kiszámíthatóságot. Az állapotot a this.setState segítségével kell frissíteni, amely létrehoz egy új állapot objektumot és elindítja az újrarenderelést.

A setState fogadhat objektumot vagy függvényt. A funkcionális forma előnyösebb, ha az új állapot függ az előzőtől: this.setState(prev => ({ count: prev.count + 1 })). A React csoportosíthat több setState hívást egy batch-be a teljesítmény optimalizálása érdekében.

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>
    );
  }
}

A setState fontos tulajdonsága — aszinkron. A setState meghívása után az állapot nem frissül azonnal. Ha egy műveletet kell végrehajtani a frissítés után, adjon meg egy callback-t második argumentumként: this.setState(newState, () => console.log(this.state)).

Életciklus metódusok

Az osztálykomponensek előre meghatározott metódusokkal rendelkeznek, amelyeket a React meghatározott pillanatokban hív meg. Csatlakoztatás — constructor → render → componentDidMount. Frissítés — render → componentDidUpdate. Leválasztás — componentWillUnmount.

ComponentDidMount — adatok lekérése

componentDidMount — a fő hely a mellékhatások számára az első renderelés után. Itt HTTP kérések hajtódnak végre, WebSocket kapcsolatok jönnek létre és időzítők indulnak el. Ha nem tisztítja meg a feliratkozást a componentWillUnmount-ban, memóriaszivárgás lép fel.

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

  componentWillUnmount() {
    // Kérés megszakítása leválasztáskor
  }

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

This kontextus kötése a metódusokban

JavaScript-ben az osztály metódusai alapértelmezetten nincsenek a példányhoz kötve. Ha egy metódust callback-ként ad át — eseménykezelőnek, időzítőnek — a this undefined lesz (szigorú módban) vagy window (szigorú mód nélkül). Kötés nélkül a this.setState hibát dob.

Háromféle kötési mód létezik: bind a konstruktorban, nyílfüggvény a callback-ben és class field nyílfüggvénnyel. Az első mód a React hivatalos ajánlása: bind egyszer a konstruktorban, anélkül hogy minden rendereléskor újra létrehozná a függvényt.

// 1. módszer: bind a konstruktorban (ajánlott)
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 — modern szintaxis automatikus kötéssel. Az osztály tulajdonságában lévő nyílfüggvény a this-t a konstruktor láthatósági tartományából fogja meg. Hátránya — a metódus minden példányon létrejön, nem a prototípuson, ami növeli a memóriát több száz azonos típusú komponens esetén.

Osztály- és funkcionális komponensek összehasonlítása

A választás osztály és függvény között — nem csak szintaxis kérdése. A hook-kal rendelkező funkcionális komponensek megoldják az osztályokban rejlő problémákat: logika duplikálása különböző életciklus metódusokban (componentDidMount + componentDidUpdate), bonyolultság a this-szel, és a kapcsolódó logika kivonatának képtelensége egy újrahasznosítható blokkba.

A funkcionális komponenseket könnyebb tesztelni — nincs belső állapotuk (ami a hook-ok előtt csak osztályokban volt), és nem igényelnek csatlakoztatást a DOM-hoz a callback-ek ellenőrzéséhez. A React funkcionális komponenseket ajánl minden új projekthez, a dokumentáció és példák is ezekkel íródnak.

Az osztálykomponensek továbbra is a legjobb választást jelentik öröklött kóddal való munka során. Ha a projekt 2019 előtt indult, valószínűleg több ezer osztálykomponenst tartalmaz. Mindegyik átírása hook-okra egy sprint alatt kockázatos. A React garantálja a visszafelé kompatibilitást: az osztálykomponenseket nem távolítják el.

Migrációs stratégia osztályokról hook-okra

A fokozatos migráció a komponens elemzésével kezdődik. Az állapot nélküli egyszerű komponensek (stateless) kerülnek át elsőként — ezek triviálisan helyettesíthetők függvényekkel. Ezután — az egy-két állapot mezővel rendelkező komponensek, ahol a useState közvetlenül helyettesíti a this.state és this.setState-t.

Az összetett, több életciklus metódussal rendelkező komponensek a useEffect segítségével kerülnek át. A componentDidMount + componentDidUpdate logikája különálló useEffect-ekre van bontva különböző függőségekkel. A componentWillUnmount egy visszatérési függvénnyel van helyettesítve a useEffect-en belül. Az összetett állapot logikához használja a useReducer-t.

Az automatikus migrációs eszközök — @phenomnomnominal/ts-react-class-to-hook vagy codemod szkriptek — automatikusan konvertálhatják az egyszerű osztályokat. Összetett esetekben a migráció kézi munkát igényel, amely megköveteli az eredeti komponens logikájának megértését.