Kokia yra pagrindinė React renderinimo savybė?

Pagrindinė React renderinimo ypatybė yra Virtual DOM naudojimas ir sutikimo algoritmas (Reconciliation), siekiant efektyviai atnaujinti vartotojo sąsają.

Virtual DOM yra lengvas realaus DOM vaizdas atmintyje. React kuria Virtual DOM medį, kuris atspindi esamą vartotojo sąsajos būseną.

Kai komponento būsena ar props pasikeičia, React sukuria naują Virtual DOM medį. Tada jis palygina šį naują medį su ankstesniu (procesas vadinamas "diффing") naudojant sutikimo algoritmą.

Sutikimo algoritmas nustato minimalų pakeitimų rinkinį, reikalingą sinchronizuoti realų DOM su nauju Virtual DOM. Vietoj viso DOM perpiešimo, React atnaujina tik tas dalis, kurios iš tikrųjų pasikeitė.

Šis požiūris žymiai pagerina našumą, sumažindamas tiesiogines manipuliacijas su lėtu realiu DOM.

Proceso pavyzdys:

1. Pradinis renderis: React sukuria Virtual DOM ir sukuria realų DOM.
2. Būsenos pasikeitimas: Komponentas gauna naujus duomenis arba props.
3. Naujo Virtual DOM kūrimas: React sukuria naują Virtual DOM medį.
4. Diффing: Palyginimas tarp naujo ir ankstesnio Virtual DOM.
5. Pakeitimų taikymas: React atnaujina tik pasikeitusius mazgus realiame DOM.

// Būseną turinčio komponento pavyzdys
function Counter() {
  const [count, setCount] = React.useState(0);

  // Ši funkcija iškvies perrenderį keičiant būseną
  function handleClick() {
    setCount(count + 1);
  }

  return (
    // Paspaudus mygtuką iškvies handleClick
    <button onClick={handleClick}>
      Paspausta {count} kartų
    </button>
  );
}

Šiame pavyzdyje, kiekvieno paspaudimo metu setCount atnaujina būseną. React sukuria naują Virtual DOM su atnaujinta count reikšme. Sutikimo algoritmas nustato, kad pasikeitė tik tekstinis mazgas ir atnaujina tik jį realiame DOM.