React.Component — třídní komponenty a jak fungují

Co je React.Component?

React.Component — abstraktní třída, která poskytuje vestavěné metody pro práci se stavem, props a životním cyklem komponentu. K vytvoření třídního komponentu je třeba definovat třídu, která dědí z React.Component, a implementovat metodu render.

React.Component se objevil v úplně první verzi Reactu (2013) a zůstal hlavním způsobem vytváření komponent po dobu pěti let. Ekosystém Reactu byl postaven kolem tříd: komponenty vyššího řádu (HOC), render props, kontext — všechny tyto vzory byly implementovány pomocí třídní syntaxe.

S vydáním React 16.8 v roce 2019 představil tým Reactu hooks jako alternativu k třídám. Hooks řešily stejné úkoly — stav, efekty, kontext — ale bez dědičnosti a složitého vázání kontextu. React.Component zůstává plně podporován, ale pro nové projekty se doporučuje funkcionální přístup.

Vytvoření třídního komponentu

Minimální třídní komponent — třída s jedinou metodou render, která vrací React element. render — jediná povinná metoda. Měla by být čistou funkcí this.props a this.state: stejná sada props a stavu dává stejný výsledek.

import React, { Component } from 'react';

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

Konstruktor a inicializace stavu

Konstruktor se provádí před mountováním. V něm se volá super(props) pro předání props rodičovské třídě a inicializuje se this.state. Použití konstruktoru pro jiné účely — odběry, API volání — se nedoporučuje: k tomu slouží componentDidMount.

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

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

Správa stavu přes this.state a this.setState

this.state — objekt obsahující data komponentu. Přímá změna (this.state.count = 1) je zakázána — nezpůsobuje překreslení a narušuje předvídatelnost. Stav je třeba aktualizovat přes this.setState, který vytvoří nový objekt stavu a spustí překreslení.

setState může přijmout objekt nebo funkci. Funkcionální forma je preferována, když nový stav závisí na předchozím: this.setState(prev => ({ count: prev.count + 1 })). React může seskupit několik setState volání do jednoho batch pro optimalizaci výkonu.

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

Důležitá vlastnost setState — je asynchronní. Po zavolání setState se stav neaktualizuje okamžitě. Pokud potřebujete provést akci po aktualizaci, předejte callback jako druhý argument: this.setState(newState, () => console.log(this.state)).

Metody životního cyklu

Třídní komponenty mají předdefinované metody, které React volá v určitých okamžicích. Mountování — constructor → render → componentDidMount. Aktualizace — render → componentDidUpdate. Odmountování — componentWillUnmount.

ComponentDidMount — načtení dat

componentDidMount — hlavní místo pro vedlejší účinky po prvním vykreslení. Zde se provádějí HTTP požadavky, navazují WebSocket spojení a spouštějí časovače. Pokud nevyčistíte odběr v componentWillUnmount, dojde k úniku paměti.

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

  componentWillUnmount() {
    // Zrušit požadavek při odmountování
  }

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

Vázání kontextu this v metodách

V JavaScriptu nejsou metody třídy standardně navázány na instanci. Pokud předáte metodu jako callback — handleru události, časovači — this bude undefined (v přísném režimu) nebo window (bez přísného režimu). Bez vázání vyhodí this.setState chybu.

Existují tři způsoby vázání: bind v konstruktoru, šipková funkce v callbacku a class field se šipkovou funkcí. První způsob — oficiální doporučení Reactu: bind jednou v konstruktoru, bez opětovného vytváření funkce při každém vykreslení.

// Metoda 1: bind v konstruktoru (doporučeno)
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í syntaxe s automatickým vázáním. Šipková funkce ve vlastnosti třídy zachycuje this z rozsahu viditelnosti konstruktoru. Nevýhoda — metoda se vytváří na každé instanci, nikoli na prototypu, což zvyšuje paměť pro stovky komponent stejného typu.

Srovnání třídních a funkcionálních komponent

Volba mezi třídou a funkcí — není jen otázka syntaxe. Funkcionální komponenty s hooks řeší problémy vlastní třídám: duplikace logiky v různých metodách životního cyklu (componentDidMount + componentDidUpdate), složitost s this a nemožnost extrahovat související logiku do znovupoužitelného bloku.

Funkcionální komponenty se snáze testují — nemají vnitřní stav (který byl před hooks jen v třídách) a nevyžadují mountování v DOM pro kontrolu callbacků. React doporučuje funkcionální komponenty pro všechny nové projekty, dokumentace a příklady se píší na nich.

Třídní komponenty zůstávají nejlepší volbou při práci se starším kódem. Pokud byl projekt zahájen před rokem 2019, pravděpodobně obsahuje tisíce třídních komponent. Přepisování všech na hooks v jednom sprintu je riskantní. React zaručuje zpětnou kompatibilitu: třídní komponenty nebudou odstraněny.

Strategie migrace z tříd na hooks

Postupná migrace začíná analýzou komponentu. Jednoduché komponenty bez stavu (stateless) se překládají první — snadno se nahrazují funkcemi. Poté — komponenty s jedním až dvěma stavovými poli, kde useState přímo nahrazuje this.state a this.setState.

Složité komponenty s mnoha metodami životního cyklu se překládají přes useEffect. Logika z componentDidMount + componentDidUpdate se rozděluje do samostatných useEffect s různými závislostmi. componentWillUnmount se nahrazuje návratovou funkcí uvnitř useEffect. Pro složitou stavovou logiku použijte useReducer.

Nástroje automatické migrace — @phenomnomnominal/ts-react-class-to-hook nebo codemod skripty — mohou automaticky konvertovat jednoduché třídy. Pro složité případy zůstává migrace ruční prací, která vyžaduje pochopení logiky původního komponentu.