Kaip veikia React?

React – tai JavaScript biblioteka vartotojo sąsajų kūrimui.

Pagrindiniai React veikimo principai ir mechanizmai apima:

1. Komponentų požiūris: vartotojo sąsaja suskirstyta į nepriklausomas, pakartotinai naudojamas komponentes. Kiekvienas komponentas turi būseną (state) ir savybes (props), kurios apibrėžia jo elgesį ir išvaizdą.

2. Virtualus DOM: React sukuria lengvą DOM medžio vaizdą atmintyje (virtualų DOM). Kai keičiasi duomenys (būsena ar savybės), React sukuria naują virtualų DOM medį.

3. Lyginimo medis (Diffing algoritmas): React lygina naują virtualų DOM medį su ankstesniu. Šis procesas vadinamas "diffing". Algoritmas greitai suranda skirtumus tarp medžių.

4. Rekonsiliacija (Reconciliation): Remiantis rastais skirtumais, React apskaičiuoja minimalų operacijų rinkinį, reikalingą realaus DOM atnaujinimui.

5. Realaus DOM atnaujinimas: React taiko šiuos minimalius pakeitimus į realų DOM, tai sumažina brangias DOM manipuliacijos operacijas ir padidina našumą.

6. Vienakryptis duomenų srautas: Duomenys React dažniausiai perduodami iš viršaus į apačią, iš tėvų komponentų į vaikų per savybes (props). Tai palengvina pokyčių stebėjimą ir derinimą.

7. JSX: JavaScript sintaksės išplėtimas, leidžiantis aprašyti vartotojo sąsajos struktūrą naudojant HTML panašią sintaksę, tiesiogiai JavaScript kode. JSX kompiliuojamas į įprastus React funkcijų iškvietimus (pvz., React.createElement).

// Paprasto React komponento pavyzdys
function WelcomeMessage(props) {
  return <h1>Sveiki, {props.name}!</h1>;
}

// Komponento naudojimas
const element = <WelcomeMessage name="Pasauli" />;