Aká je kľúčová vlastnosť renderovania v Reacte?

Hlavnou vlastnosťou renderovania v React je použitie Virtual DOM a algoritmu reconciliation na efektívnu aktualizáciu používateľského rozhrania.

Virtual DOM je ľahká reprezentácia skutočného DOM v pamäti. React vytvára strom prvkov Virtual DOM, ktorý predstavuje aktuálny stav používateľského rozhrania.

Keď sa zmení stav alebo props komponentu, React vytvorí nový strom Virtual DOM. Potom tento strom porovná s predchádzajúcim (proces nazývaný "diffing") pomocou algoritmu reconciliation.

Algoritmus reconciliation určuje minimálny súbor zmien potrebných na synchronizáciu skutočného DOM s novým Virtual DOM. Namiesto prekrášlenia celého DOM, React aktualizuje iba tie časti, ktoré sa skutočne zmenili.

Tento prístup výrazne zvyšuje výkon minimalizovaním priamej manipulácie so spomaleným skutočným DOM.

Príklad procesu:

1. Počiatočné renderovanie: React vytvorí Virtual DOM a postaví skutočné DOM.
2. Zmena stavu: Komponent dostane nové údaje alebo props.
3. Vytvorenie nového Virtual DOM: React vytvorí nový strom Virtual DOM.
4. Diffing: Porovnanie nového Virtual DOM s predchádzajúcim.
5. Aplikácia zmien: React aktualizuje iba zmenené uzly v skutočnom DOM.

// Príklad komponentu so stavom
function Counter() {
  const [count, setCount] = React.useState(0);

  // Táto funkcia spôsobí rerender pri zmene stavu
  function handleClick() {
    setCount(count + 1);
  }

  return (
    // Pri kliknutí na tlačidlo sa volá handleClick
    <button onClick={handleClick}>
      Počet kliknutí: {count}
    </button>
  );
}

V tomto príklade, pri každom kliknutí na tlačidlo, setCount aktualizuje stav. React vytvorí nový strom Virtual DOM s aktualizovanou hodnotou count. Algoritmus reconciliation zistí, že sa zmenil iba textový uzol vo vnútri tlačidla, a aktualizuje iba ten v skutočnom DOM.