Kodėl buvo sukurtos bibliotekos kaip React ir kokias problemas jos sprendžia?

React panašios bibliotekos buvo sukurtos siekiant supaprastinti interaktyvių naudotojo sąsajų (UI) kūrimą. Jos sprendžia keletą problemų, kurios kyla kuriant sudėtingus žiniatinklio taikomus:

1. Būsenos valdymas (State Management):

   • Sudėtingi žiniatinklio taikymai turi daug dinamiškų duomenų. Jų keitimas ir sinchronizavimas tarp skirtingų sąsajos dalių tampa sudėtingas:
   • React siūlo deklaratyvų požiūrį į būsenos valdymą. Aprašote, kaip UI turėtų atrodyti tam tikru būsenos, o React pats rūpinasi DOM atnaujinimu:

2. DOM manipuliavimas (DOM Manipulation):

   • Tiesioginis DOM manipuliavimas yra lėtas ir sudėtingas stebėti, ypač kai yra daug pakeitimų:
   • React naudoja virtualųjį DOM. Jis sukuria lengvą DOM atvaizdą atmintyje. Kai būsenos keitimas įvyksta, React palygina virtualųjį DOM su ankstesne būsena, randa minimalius pakeitimus (diffing) ir efektyviai atnaujina tik tas realaus DOM dalis, kurios pasikeitė (reconciliation). Tai žymiai pagerina našumą:

3. Komponentų pakartotinis naudojimas (Component Reusability):

   • UI elementai (mygtukai, navigacijos skydeliai, formos ir kt.) dažnai kartojasi taikyme. Be komponentų požiūrio, reikėtų dubliuoti kodą:
   • React leidžia suskaidyti UI į mažus, pakartotinai naudojamus, nepriklausomus komponentus. Kiekvienas komponentas įsikūnija savo logiką ir maketą, kas daro kodą modulinį, palaikomą ir lengvai suprantamą:

4. Architektūros sudėtingumas (Architectural Complexity):

   • Didėjant taikymui, be aiškios struktūros kodas tampa "spagetti", kas apsunkina kūrimą, testavimą ir plėtrą:
   • React siūlo komponentų orientuotą architektūrą, kuri skatina kodo organizavimą ir atsakomybės pasidalijimą:

5. Deklaratyvus programavimas (Declarative Programming):

   • Tradicinis imperatyvus DOM programavimas reikalauja aiškiai nurodyti kiekvieną UI keitimo žingsnį:
   • React leidžia aprašyti norimą UI būseną tam tikru momentu. Jūs sakote, ką norite matyti, o ne kaip. Tai supaprastina kodo rašymą ir daro jį labiau prognozuojamą:

6. Dideli ir sudėtingi taikymai:

   • React siūlo priemones kurti skalabilias programas su didelėmis kūrėjų komandomis. Komponentų požiūris ir aiški struktūra leidžia efektyviau bendradarbiauti:

React pavyzdys:

// Paprastas funkcionalus React komponento pavyzdys
import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // Būsenos hook

  return (
    <div>
      <p>Skaitiklis: {count}</p> {/* Būsenos rodymas */}
      <button onClick={() => setCount(count + 1)}>
        Padidinti
      </button> {/* Įvykio tvarkyklė, keičia būseną */}
    </div>
  );
}

// Eksportuoti komponentą naudoti kituose skyriuose
export default Counter;

Lyginamoji lentelė tarp tiesioginio DOM manipuliavimo ir React:

Aspektas	Tiesioginis DOM manipuliavimas	React
UI valdymas	Imperatyvus (žingsnis po žingsnio)	Deklaratyvus (būsenos aprašymas)
Našumas	Gali būti lėtas didelių pakeitimų atveju	Optimizuotas per Virtual DOM
Pakartotinis naudojimas	Mažas	Aukštas (per komponentus)
Palaikymas	Mažas dideliuose projektuose	Aukštas (dėl struktūros)
Būsenos valdymas	Rankinis, sudėtingas sinchronizavimas	Integruotos mechanizmai (state, hooks)