Kako React radi?

React je poznat po tome što učinkovito osvježava korisničko sučelje zahvaljujući nekoliko ključnih internih mehanizama. Koristi virtualni DOM – laganu kopiju stvarnog DOM-a – kako bi izračunao minimalni broj promjena potreban za ažuriranje sučelja​.

React je uveo je i arhitekturu Fiber stabla, koja razbija proces renderiranja u manje dijelove kako bi se ažuriranja mogla izvesti glatko, bez blokiranja preglednika​. Putem procesa zvanog usklađivanje, React uspoređuje novo i staro virtualno DOM stablo (koristeći pametni diffing algoritam) te na stvarnom DOM-u primjenjuje samo nužne izmjene. U nastavku su detaljno objašnjena ova četiri ključna koncepta i kako doprinose Reactovoj izvedbi.

Virtualni DOM

Virtualni DOM je unutarnja, memorijska reprezentacija korisničkog sučelja koju React drži sinkroniziranom sa stvarnim DOM-om​. To je zapravo struktura od JavaScript objekata koja oponaša stvarni DOM.

Ažuriranje pravog DOM-a izravno može biti sporo, stoga React prvo mijenja Virtualni DOM. Kada dođe do promjene stanja komponente ili svojstva, React kreira novo virtualno DOM stablo i uspoređuje ga s prethodnim uz pomoć diffing algoritma​.

Na temelju te usporedbe utvrđuje koji su dijelovi sučelja promijenjeni. Zatim React ažurira samo te izmijenjene dijelove na stvarnom DOM-u umjesto da ponovno iscrtava cijelu stranicu. Ovakav način ažuriranja UI-ja prvo u memoriji, a potom primjene minimalnih promjena na pravi DOM, čini osvježavanje sučelja mnogo bržim i učinkovitijim​.

• Brža ažuriranja: Budući da se mijenjaju samo oni dijelovi DOM-a koji su stvarno promijenjeni, React može vrlo brzo osvježiti sučelje (izbjegavajući nepotrebno ponovno iscrtavanje čitavog prikaza)​. Korisnici primjećuju glatke promjene čak i kako aplikacija postaje složenija.
• Učinkovita ponovna renderiranja: Virtualni DOM omogućuje da React brzo prerenderira cijeli UI u memoriji, a zatim na stvarnom DOM-u primijeni samo nužne izmjene. Komponente koje se nisu promijenile bivaju preskočene, čime se izbjegava nepotreban rad na dijelovima stabla koji su ostali isti. Zahvaljujući tome aplikacija ostaje performantna čak i uz česta ažuriranja stanja.

Fiber stablo

Fiber je novi mehanizam usklađivanja u Reactu 16, osmišljen s ciljem omogućavanja postupnog (inkrementalnog) renderiranja virtualnog DOM-a​. Fiber predstavlja unutarnji “motor” Reacta za renderiranje i uvodi drugačiji pristup upravljanju ažuriranjima – dijeljenjem posla na male jedinice.

U Fiber arhitekturi, svaki element ili komponenta predstavljen je strukturom nazvanom fiber, a svi ti fiberi zajedno čine tzv. fiber stablo koje odražava hijerarhiju komponenti aplikacije.

Najveća prednost Fibera je što omogućuje da renderiranje bude asinkrono i vremenski rasporedivo, umjesto blokirajuće. To praktično znači da React može obrađivati dio po dio ažuriranja sučelja, umjesto sve odjednom, te da može pauzirati renderiranje i nastaviti kasnije ili promijeniti redoslijed zadataka po potrebi.

• Asinkrono renderiranje: Fiber omogućuje da se renderiranje ne odvija u jednom neprekinutom bloku, već da React može pauzirati i nastaviti rad na renderiranju komponenata kako pristižu nova ažuriranja​. Za razliku od starog modela (gdje bi jedno veliko ažuriranje moglo zamrznuti glavnu nit dok se ne dovrši), s Fiberom se zadaci mogu privremeno zaustaviti. Na primjer, ako korisnik pokrene novu interakciju tijekom dugotrajnog ažuriranja, React zahvaljujući Fiberu može prekinuti trenutni posao, obraditi korisničku akciju, a zatim se vratiti ranije započetom poslu.
• Prioritetna ažuriranja: Fiber arhitektura uvodi prioritete za različite vrste zadataka. Neka ažuriranja – poput animacija ili korisničkih interakcija – dobivaju viši prioritet i izvršavaju se prije drugih, dok manje hitna ažuriranja (npr. učitavanje podataka u pozadini) mogu pričekati​. React tako raspoređuje rad tako da aplikacija ostane responzivna – može odbaciti ili odgoditi manje važne zadatke ako bi ometali izvođenje kritičnih. Razbijajući renderiranje na segmente s prioritetima, React osigurava da niti jedan zadatak renderiranja ne zauzme glavni thread predugo, što rezultira fluidnijim korisničkim iskustvom.

Usklađivanje

Usklađivanje je proces kojim React usklađuje virtualni DOM sa stvarnim DOM-om prilikom ažuriranja. Kada se promijeni stanje komponente ili aplikacija dobije nove elemente za prikaz, React generira novo virtualno DOM stablo i uspoređuje ga s prethodnim​.

Ovaj postupak usporedbe dvaju verzija virtualnog DOM-a identificira razlike između starog i novog stanja sučelja. Proces usklađivanja rezultira time da React precizno zna što se u korisničkom sučelju promijenilo, a što je ostalo isto.

Nakon što su utvrđene sve promjene, React priprema minimalni skup izmjena koje treba napraviti na stvarnom DOM-u​ kako bi se sučelje uskladilo s novim stanjem.

• Pronalaženje promjena: React uspoređuje novo virtualno stablo elemenata s prethodnim kako bi otkrio koje su razlike nastale​. Na taj način određuje koje su komponente ili elementi dodani, uklonjeni ili izmijenjeni. Primjerice, može otkriti da je jedan čvor promijenio tekst, da je određena podkomponenta dobila nova svojstva ili da je neki element uklonjen iz strukture – sve te razlike bilježe se tijekom ovog koraka.
• Minimalne izmjene DOM-a: Na temelju pronađenih razlika, React generira najefikasniji plan za ažuriranje pravog DOM-a – onaj koji uključuje samo nužne promjene​. Drugim riječima, kreira se niz specifičnih DOM operacija kojima se postojeće stanje pretvara u novo stanje sučelja. Sve što već postoji i nema promjena ostaje netaknuto, a izmjene se primjenjuju samo na elemente koji su se zaista promijenili. Ovakav pristup osigurava da stvarni DOM bude ažuriran uz minimalan napor i maksimalnu brzinu.

Diffing algoritam

U srcu procesa usklađivanja nalazi se diffing algoritam – optimizirani algoritam za usporedbu dvaju DOM stabala. Gruba usporedba svakog čvora u dva stabla bila bi vrlo spora za veće aplikacije, no React koristi pametne heuristike kako bi ovu usporedbu ubrzao na približno linearnu vremensku složenost​. Algoritam se temelji na nekim pravilima i pretpostavkama koje pojednostavljuju usporedbu:

• Elementi različitih tipova tretiraju se kao posve različiti – ako se tip elementa promijenio (primjerice, <div> u novom stablu zamjenjuje stari <span>, ili se jedna komponenta zamijenila drugom), React neće detaljno uspoređivati njihovu djecu, nego će stari podskup ukloniti i dodati novi​. Time se izbjegava bespotrebno uspoređivanje potpuno nepovezanih struktura.
• Za elemente istog tipa, React zadržava postojeći DOM čvor i mijenja samo ono što se razlikuje u svojstvima ili sadržaju​. To znači da ako, primjerice, imamo listu <ul> koja ostaje <ul>, ali neki njezin <li> ima ažuriran tekst, algoritam će ažurirati samo taj tekstualni čvor u stvarnom DOM-u. Ostali neoprijeđeni dijelovi ostaju nepromijenjeni, čime se znatno smanjuje količina manipulacija na DOM-u.

Još jedna važna optimizacija je upotreba ključeva (key) kod lista elemenata. Kada renderirate listu u Reactu, preporučuje se svakom elementu liste dodijeliti jedinstveni prop key.

Ove ključne vrijednosti pomažu algoritmu da uoči koji elementi liste su isti između starog i novog rendera, a koji su dodani ili uklonjeni. Tako React može učinkovito pratiti premještanja ili promjene u listi bez ponovnog renderiranja svih elemenata od nule​.

Kombinirajući ove heuristike, diffing algoritam osigurava da se ažurira samo ono što je potrebno, izbjegavajući trošenje vremena na nepromijenjene dijelove.

To drži ažuriranja brzim čak i kod velikih i kompleksnih sučelja – glavnina posla obavlja se na Virtualnom DOM-u unutar JavaScript-a, dok se skupe operacije nad stvarnim DOM-om svode na minimum potreban. Rezultat je da čak i kako aplikacija raste, promjene stanja i ponovno renderiranje ostaju brzi i učinkoviti.