Koja je ključna osobina renderovanja u React-u?

Glavna osobina renderovanja u React-u je korišćenje Virtual DOM-a i algoritma za usklađivanje (Reconciliation) za efikasno ažuriranje korisničkog interfejsa.

Virtual DOM je lagana reprezentacija stvarnog DOM-a u memoriji. React gradi drvo elemenata Virtual DOM-a koje predstavlja trenutno stanje korisničkog interfejsa.

Kada se stanje ili props-ovi komponenti promene, React kreira novo drvo Virtual DOM-a. Zatim upoređuje ovo novo drvo sa prethodnim (proces nazvan "diffing") koristeći algoritam za usklađivanje.

Algoritam za usklađivanje određuje minimalni skup promena potrebnih za sinhronizaciju stvarnog DOM-a sa novim Virtual DOM-om. Umesto da crta ceo DOM iznova, React ažurira samo one delove koji su se zaista promenili.

Ovaj pristup značajno poboljšava performanse minimiziranjem direktnih manipulacija sporim stvarnim DOM-om.

Primer procesa:

1. Početno renderovanje: React kreira Virtual DOM i gradi stvarni DOM.
2. Promena stanja: Komponenta prima nove podatke ili props-ove.
3. Kreiranje novog Virtual DOM-a: React pravi novo drvo Virtual DOM-a.
4. Diffing: Upoređenje novog Virtual DOM-a sa prethodnim.
5. Primena promena: React ažurira samo one čvorove koji su se promenili u stvarnom DOM-u.

// Primer komponente sa stanjem
function Counter() {
  const [count, setCount] = React.useState(0);

  // Ova funkcija će izazvati ponovno renderovanje pri promeni stanja
  function handleClick() {
    setCount(count + 1);
  }

  return (
    // Klikom na dugme, poziva se handleClick
    <button onClick={handleClick}>
      Kliknuto {count} puta
    </button>
  );
}

U ovom primeru, pri svakom kliku na dugme, setCount ažurira stanje. React kreira novo drvo Virtual DOM sa ažuriranom vrednošću count. Algoritam za usklađivanje detektuje da je promenjen samo tekstualni čvor unutar dugmeta i ažurira samo njega u stvarnom DOM-u.