Třídní komponenty (Class components)
Class komponenty jsou starší (ale dosud místy používaný) způsob, jak vytvářet komponenty.
V Reactu to tedy bude třída, která obsahuje
lifecycle metodya metodurender, která vrací JSX prvek.
Lifecycle metody
Lifecycle metody jsou metody, které se volají v určitých časech životního cyklu komponenty.
componentDidMount- volá se po vytvoření komponenty (v Reactu, ne v reálném DOMu)- Používá se např. pro načtení dat z API nebo pro jiné akce, které se musí stát hned po vytvoření komponenty.
componentDidUpdate- volá se po aktualizaci komponenty- Spouští se pokud se změní stav komponenty, tedy když dochází k re-renderu (znovu vykreslení komponenty), tak se volá tato metoda.
componentWillUnmount- volá se před odstraněním komponenty z React Virtuálního DOMu- Používá se např. pro úklid zdrojů, které jsme vytvořili pro potřebu komponenty (např. odhlášení z API nebo uvolnění připojení k databázi).
componentDidCatch- volá se při zachycení chyby v podstromu komponenty (např.throw new Error('Error'))- Používá se např. pro zachycení chyb v podstromu komponenty, které se nepodaří zachytit v error boundary komponentě.
Vytvoření třídní Komponenty
Určitě si pamatuješ třídy z OOP JavaScriptu.
V Reactu to tedy bude třídní komponenta, dědící vlastnosti a metody z
React.Component, která bude (může) obsahovatlifecycle metody(metody životního cyklu komponenty) a povinnou metodurender, která vrací JSX prvek k vykreslení.
class MyComponent extends React.Component {
componentDidMount() {
console.log('Component was mounted');
}
componentDidUpdate() {
console.log('Component was updated');
}
componentWillUnmount() {
console.log('Component was unmounted');
}
render() {
return <div>Hello, World!</div>;
}
}Tato třídní komponenta dědí vlastnosti z třídy
React.Component, kde jsou definovány užitečné vlastnosti a metody, které nám pomohou s vytvářením komponent a stavu.Např.
this.stateathis.setStatereprezentují stav komponenty a umožní nám ho měnit.
class MyComponent extends React.Component {
constructor(props) {
// spustíme konstruktor třídy React.Component
super(props);
// vložíme prvotní stav komponenty do state - nastaví se při spuštění konstruktoru při inicializaci objektu komponenty
this.state = { count: 0 };
}
render() {
return <button onClick={() => this.setState({ count: this.state.count + 1 })}>Click me</button>;
}
}⚠️ Všimni si, že jsme nezměnili jen hodnotu
count, ale vytvořili jsme nový objekt stavu.React porovnává objekty,resp. jejich adresy v paměti - pokud je adresa stejná, tak se nic nestane.
Proto musíme vždy vytvořit nový objekt stavu, aby React věděl, že se stav změnil a může komponentu znovu vykreslit.
🛑 Pozor: Třídní komponenty jsou v Reactu starší způsob, dnes už se až na výjimky běžně NEpoužívají.
Pro většinu použití doporučujeme funkcionální komponenty (function components) s využitím React Hooks jako
useState,useEffectatd.Třídní komponenty jsou ale stále užitečné. Používáš je při vytvoření tzv.error boundary komponenty (komponenta, která zachytává chyby a zpracovává je - např. zobrazí chybovou hlášku).
React pro error boundary nemá alternativu pro funkcionální komponenty, tj. musíš využít třídní komponentu a lifecycle metodu
componentDidCatch.