Co je komponenta
Komponenta v kontextu moderního webu je jednoduchá funkce, která vrací HTML (resp. JSX) prvek, který tvoří kousek stránky.
V Reactu to tedy bude funkce, která vrací JSX prvek. V lekci Typescriptu se o tom pobavíme podrobněji.
📦 DOM (Document Object Model)
DOM (Document Object Model) je stromová (hierarchická) struktura, která představuje HTML stránku v paměti prohlížeče – včetně stylů a interakcí jednotlivých prvků.
Každá změna v DOMu je náročná na výkon, protože prohlížeč musí přepočítat a překreslit část stránky.
🥽 Virtual DOM
Virtual DOM je „virtuální“ (paměťová) kopie skutečného DOMu – představ si to jako speciální brýle virtuální reality, které ukazují aktuální podobu stránky v Reactu, aniž by měnily skutečný DOM v prohlížeči.
React spravuje Virtual DOM sám a změny na stránce nejprve promítne do těchto „brýlí“ (do paměti). Poté porovná „obrázek přes brýle“ se skutečným DOMem a do živé stránky zanese jen to, co je opravdu nutné změnit.
Tohle výrazně urychluje a zefektivňuje aktualizaci stránky, protože neděláme zbytečné změny v reálném DOMu.
⚡️ Výhody Virtual DOM
Rychlost aktualizace UI
React nejprve upravuje Virtual DOM v paměti a teprve poté vypočítá změny, které musí provést v reálném DOMu. Tento postup je mnohem rychlejší než okamžité provádění změn přímo v DOM při každé interakci nebo změně dat, protože DOM je pomalý na manipulaci.
Efektivní vykreslování
Virtual DOM umožňuje Reactu provádět tzv. „diffing“ – zjistí rozdíly mezi stavem před a po změně, a do reálného DOMu přenese jen skutečně nutné změny. Díky tomu je UI plynulé a optimalizované.
Minimalizace přímé manipulace s DOM
Není nutné ručně upravovat DOM pomocí JavaScriptu (document.createElement, .appendChild apod.), protože to za nás řeší React automaticky. To snižuje riziko vzniku chyb a vede k jednoduššímu vývoji.
Komponentní architektura
Umožňuje snadnou správu stavu komponenty uložením na jednom místě. To zjednodušuje opakované použití komponent i stavů. Změny stavu ovlivňují jen konkrétní komponentu – ne celou stránku.
Jednodušší ladění a testování
Díky deklarativnímu přístupu, kde popíšeš chování a vzhled podle stavu dat, a jednosměrnému toku dat z rodičovského (
parent) na podřízené (children) prvky, je snazší testovat chování komponent a jejich reakce na změny stavu.
Můžu získat přístup přímo k HTML prvkům?
V Reactu standardně pracuješ deklarativně s komponentami a jejich stavem.
Někdy ale potřebuješ přímý přístup k jednotlivým HTML prvkům (například pro nastavení fokusu, měření rozměrů, nebo integraci s knihovnami, které vyžadují manipulaci s DOM), použiješ tzv.
REFy.
**Ref si vytvoříš dříve (například pomocí useRef) a následně ho přiřadíš (přidělíš) konkrétnímu HTML prvku přes atribut ref.
Tím získáš přímý odkaz na tento prvek v reálném DOMu, ke kterému lze přistupovat.
Příklad vytvoření refu ve funkční komponentě:
import { useRef } from 'react';
export default function Form() {
const inputRef = useRef(null);
const handleClick = (event) => {
// Focusujeme konkrétní input element
inputRef.current.focus();
}
return (
<>
<input ref={inputRef} />
<button onClick={handleClick}>
Focus the input
</button>
</>
);
}Důležité je, že REF je odkaz na skutečný DOM prvek, ne na Virtual DOM, protože Virtual DOM je jen vnitřní paměťová reprezentace řízená Reactem. Pokud potřebuješ manipulovat s DOM mimo declarativní React model, musíš využít REFy.