Mis on Reacti peamine renderdamise omadus?

Reacti renderdamise peamine omadus on Virtual DOM-i kasutamine ja kokkuleppe algoritm (Reconciliation), et tõhusalt kasutajaliidest uuendada.

Virtual DOM on kerge kujutis tegelikust DOM-ist mälus. React loob Virtual DOM-i puu, mis esindab praegust kasutajaliidese olekut.

Kui komponendi olek või props muutub, loob React uue Virtual DOM-i puu. Seejärel võrdleb ta seda uut puu eelneva (protsess nimega "diффing") kokkuleppe algoritmi abil.

Kokkuleppe algoritm määrab minimaalsete muudatuste kogumi, mis on vajalik reaalse DOM-i sünkroniseerimiseks uue Virtual DOM-iga. Selle asemel, et kogu DOM-i uuesti joonistada, uuendab React ainult neid osi, mis on tõepoolest muutunud.

See lähenemine suurendab märkimisväärselt jõudlust, minimeerides otse manipuleerimist aeglase reaalse DOM-iga.

Protsessi näide:

1. Algne renderdamine: React loob Virtual DOM-i ja loob reaalse DOM-i.
2. Olekumuutused: Komponent saab uusi andmeid või props-e.
3. Uue Virtual DOM-i loomine: React loob uue Virtual DOM-i puu.
4. Diффing: Võrdlus uue ja eelneva Virtual DOM-i vahel.
5. Muudatuste rakendamine: React uuendab ainult muutunud sõlmed reaalses DOM-is.

// Olekuga komponendi näide
function Counter() {
  const [count, setCount] = React.useState(0);

  // See funktsioon käivitab uuesti renderimise oleku muutmisel
  function handleClick() {
    setCount(count + 1);
  }

  return (
    // Klõpsamisel kutsutakse handleClick
    <button onClick={handleClick}>
      Vajutusi {count} korda
    </button>
  );
}

Selles näites uuendab setCount iga kliki korral olekut. React loob uue Virtual DOM-i uuendatud count väärtusega. Kokkuleppe algoritm tuvastab, et muutus ainult tekstiline sõlm ja uuendab seda ainult reaalset DOM-i.