Jaká je klíčová vlastnost renderování v Reactu?

Hlavní vlastností renderování v Reactu je použití Virtual DOM a algoritmu reconciliation pro efektivní aktualizaci uživatelského rozhraní.

Virtual DOM je lehká reprezentace skutečného DOM v paměti. React vytváří strom prvků Virtual DOM, který představuje aktuální stav uživatelského rozhraní.

Když se změní stav nebo props komponenty, React vytvoří nový strom Virtual DOM. Poté tento strom porovná s předchozím (proces nazývaný "diffing") pomocí algoritmu reconciliation.

Algoritmus reconciliation určuje minimální sadu změn potřebných k synchronizaci skutečného DOM s novým Virtual DOM. Místo kompletního překreslení DOM aktualizuje React pouze ty části, které se skutečně změnily.

Tento přístup výrazně zvyšuje výkon minimalizací přímých manipulací se zpomaleným skutečným DOM.

Příklad procesu:

1. Počáteční renderování: React vytvoří Virtual DOM a postaví skutečné DOM.
2. Změna stavu: Komponenta obdrží nové data nebo props.
3. Vytvoření nového Virtual DOM: React vytvoří nový strom Virtual DOM.
4. Diffing: Porovnání nového Virtual DOM s předchozím.
5. Aplikace změn: React aktualizuje pouze změněné uzly ve skutečném DOM.

// Příklad komponenty se stavem
function Counter() {
  const [count, setCount] = React.useState(0);

  // Tato funkce způsobí rerender při změně stavu
  function handleClick() {
    setCount(count + 1);
  }

  return (
    // Při kliknutí na tlačítko bude volána funkce handleClick
    <button onClick={handleClick}>
      Počet kliknutí: {count}
    </button>
  );
}

V tomto příkladu, při každém kliknutí na tlačítko, setCount aktualizuje stav. React vytvoří nový strom Virtual DOM s aktualizovanou hodnotou count. Algoritmus reconciliation zjistí, že změnil pouze textový uzel uvnitř tlačítka, a aktualizuje pouze tento uzel v reálném DOM.