React Concurrent Mode išteklių planavimas: Atmintį tausojantis užduočių valdymas

React Concurrent Mode – tai naujų „React“ funkcijų rinkinys, padedantis programuotojams kurti greičiau reaguojančias ir našesnes vartotojo sąsajas. Jo pagrindas – sudėtingas išteklių planavimo mechanizmas, valdantis įvairių užduočių vykdymą, teikiantis pirmenybę vartotojo sąveikoms ir užtikrinantis sklandžią patirtį net esant didelei apkrovai. Šiame straipsnyje gilinamasi į „React Concurrent Mode“ išteklių planavimo subtilybes, daugiausia dėmesio skiriant tam, kaip jis tvarko atminties valdymą ir nustato užduočių prioritetus, siekiant užtikrinti optimalų našumą globaliai auditorijai.

„Concurrent Mode“ ir jo tikslų supratimas

Tradicinis „React“ atvaizdavimas yra sinchroninis ir blokuojantis. Tai reiškia, kad kai „React“ pradeda atvaizduoti komponentų medį, jis tęsia darbą, kol visas medis yra atvaizduojamas, potencialiai blokuodamas pagrindinę giją ir sukeldamas lėtus vartotojo sąsajos atnaujinimus. „Concurrent Mode“ sprendžia šį apribojimą, įdiegdamas galimybę pertraukti, pristabdyti, tęsti ar net atšaukti atvaizdavimo užduotis. Tai leidžia „React“ atvaizdavimą derinti su kitomis svarbiomis užduotimis, tokiomis kaip vartotojo įvesties tvarkymas, animacijų piešimas ir atsakas į tinklo užklausas.

Pagrindiniai „Concurrent Mode“ tikslai yra:

• Reagavimas: Išlaikyti sklandžią ir greitai reaguojančią vartotojo sąsają, neleidžiant ilgai trunkančioms užduotims blokuoti pagrindinės gijos.
• Prioritetų nustatymas: Teikti pirmenybę vartotojo sąveikoms (pvz., spausdinimui, paspaudimams) prieš mažiau skubias fonines užduotis.
• Asinchroninis atvaizdavimas: Suskaidyti atvaizdavimą į mažesnius, pertraukiamus darbo vienetus.
• Geresnė vartotojo patirtis: Užtikrinti sklandesnę ir vientisesnę vartotojo patirtį, ypač įrenginiuose su ribotais ištekliais ar lėtu tinklo ryšiu.

„Fiber“ architektūra: Lygiagretumo pagrindas

„Concurrent Mode“ yra sukurtas remiantis „Fiber“ architektūra, kuri yra visiškai perrašytas „React“ vidinis atvaizdavimo variklis. „Fiber“ kiekvieną vartotojo sąsajos komponentą vaizduoja kaip darbo vienetą. Skirtingai nuo ankstesnio, dėklo (stack) pagrindu veikiančio rekonsiliatoriaus, „Fiber“ naudoja susietojo sąrašo duomenų struktūrą, kad sukurtų darbo medį. Tai leidžia „React“ pristabdyti, tęsti ir nustatyti atvaizdavimo užduočių prioritetus pagal jų skubumą.

Pagrindinės „Fiber“ sąvokos:

• „Fiber“ mazgas (Fiber Node): Atspindi darbo vienetą (pvz., komponento egzempliorių).
• Darbo ciklas (WorkLoop): Ciklas, kuris iteruoja per „Fiber“ medį, atlikdamas darbą su kiekvienu „Fiber“ mazgu.
• Planuoklis (Scheduler): Nustato, kuriuos „Fiber“ mazgus apdoroti toliau, atsižvelgiant į jų prioritetą.
• Suderinimas (Reconciliation): Procesas, kurio metu dabartinis „Fiber“ medis lyginamas su ankstesniu, siekiant nustatyti pakeitimus, kuriuos reikia pritaikyti DOM.

Išteklių planavimas „Concurrent Mode“ režime

Išteklių planuoklis yra atsakingas už įvairių užduočių vykdymo valdymą „Concurrent Mode“ režime. Jis nustato užduočių prioritetus pagal jų skubumą ir atitinkamai paskirsto išteklius (procesoriaus laiką, atmintį). Planuoklis naudoja įvairias technikas, siekdamas užtikrinti, kad svarbiausios užduotys būtų atliktos pirmiausia, o mažiau skubios užduotys būtų atidėtos vėlesniam laikui.

Užduočių prioritetų nustatymas

„React Concurrent Mode“ naudoja prioritetu pagrįstą planavimo sistemą, kad nustatytų užduočių vykdymo tvarką. Užduotims priskiriami skirtingi prioritetai pagal jų svarbą. Dažniausiai pasitaikantys prioritetai:

• Momentinis prioritetas (Immediate Priority): Užduotims, kurias reikia atlikti nedelsiant, pavyzdžiui, vartotojo įvesties tvarkymui.
• Vartotoją blokuojantis prioritetas (User-Blocking Priority): Užduotims, kurios neleidžia vartotojui sąveikauti su vartotojo sąsaja, pavyzdžiui, atnaujinant sąsają reaguojant į vartotojo veiksmą.
• Normalus prioritetas (Normal Priority): Užduotims, kurios nėra kritiškai svarbios laiko atžvilgiu, pavyzdžiui, atvaizduojant neesmines vartotojo sąsajos dalis.
• Žemas prioritetas (Low Priority): Užduotims, kurias galima atidėti vėlesniam laikui, pavyzdžiui, iš anksto atvaizduojant turinį, kuris nėra iš karto matomas.
• Laukimo prioritetas (Idle Priority): Užduotims, kurios vykdomos tik tada, kai naršyklė yra neaktyvi, pavyzdžiui, foniniam duomenų gavimui.

Planuoklis naudoja šiuos prioritetus, norėdamas nustatyti, kurias užduotis vykdyti toliau. Užduotys su aukštesniais prioritetais vykdomos anksčiau nei užduotys su žemesniais prioritetais. Tai užtikrina, kad svarbiausios užduotys būtų atliktos pirmiausia, net jei sistema yra labai apkrauta.

Pertraukiamas atvaizdavimas

Viena iš pagrindinių „Concurrent Mode“ savybių yra pertraukiamas atvaizdavimas. Tai reiškia, kad planuoklis gali pertraukti atvaizdavimo užduotį, jei reikia įvykdyti aukštesnio prioriteto užduotį. Pavyzdžiui, jei vartotojas pradeda rašyti įvesties lauke, kol „React“ atvaizduoja didelį komponentų medį, planuoklis gali pertraukti atvaizdavimo užduotį ir pirmiausia apdoroti vartotojo įvestį. Tai užtikrina, kad vartotojo sąsaja išliktų reaguojanti, net kai „React“ atlieka sudėtingas atvaizdavimo operacijas.

Kai atvaizdavimo užduotis yra pertraukiama, „React“ išsaugo dabartinę „Fiber“ medžio būseną. Kai planuoklis atnaujina atvaizdavimo užduotį, jis gali tęsti nuo tos vietos, kurioje sustojo, nereikėdamas pradėti nuo pradžių. Tai žymiai pagerina „React“ programų našumą, ypač dirbant su didelėmis ir sudėtingomis vartotojo sąsajomis.

Laiko skaidymas

Laiko skaidymas (Time slicing) yra dar viena technika, kurią naudoja išteklių planuoklis, siekdamas pagerinti „React“ programų reagavimą. Laiko skaidymas apima atvaizdavimo užduočių suskaidymą į mažesnes darbo dalis. Tada planuoklis kiekvienai darbo daliai skiria nedidelį laiko tarpą („laiko atkarpą“). Pasibaigus laiko atkarpai, planuoklis patikrina, ar yra aukštesnio prioriteto užduočių, kurias reikia įvykdyti. Jei yra, planuoklis pertraukia dabartinę užduotį ir vykdo aukštesnio prioriteto užduotį. Priešingu atveju planuoklis tęsia dabartinę užduotį, kol ji bus baigta arba atvyks kita aukštesnio prioriteto užduotis.

Laiko skaidymas neleidžia ilgai trunkančioms atvaizdavimo užduotims blokuoti pagrindinės gijos ilgesnį laiką. Tai padeda išlaikyti sklandžią ir greitai reaguojančią vartotojo sąsają, net kai „React“ atlieka sudėtingas atvaizdavimo operacijas.

Atmintį tausojantis užduočių valdymas

Išteklių planavimas „React Concurrent Mode“ režime taip pat atsižvelgia į atminties naudojimą. „React“ siekia sumažinti atminties paskirstymą ir šiukšlių surinkimą (garbage collection), siekiant pagerinti našumą, ypač įrenginiuose su ribotais ištekliais. Tai pasiekiama keliais būdais:

Objektų kaupimas (Object Pooling)

Objektų kaupimas yra technika, kuri apima esamų objektų pakartotinį naudojimą vietoj naujų kūrimo. Tai gali žymiai sumažinti „React“ programų paskirstomos atminties kiekį. „React“ naudoja objektų kaupimą dažnai kuriamiems ir naikinamiems objektams, pavyzdžiui, „Fiber“ mazgams ir atnaujinimų eilėms.

Kai objektas daugiau nebereikalingas, jis grąžinamas į kaupyklą, o ne sunaikinamas šiukšlių surinkimo proceso metu. Kitą kartą, kai prireiks to tipo objekto, jis bus paimtas iš kaupyklos, o ne sukurtas iš naujo. Tai sumažina atminties paskirstymo ir šiukšlių surinkimo pridėtines išlaidas, o tai gali pagerinti „React“ programų našumą.

Jautrumas šiukšlių surinkimui

„Concurrent Mode“ yra sukurtas taip, kad būtų jautrus šiukšlių surinkimui. Planuoklis stengiasi planuoti užduotis taip, kad būtų kuo mažesnis šiukšlių surinkimo poveikis našumui. Pavyzdžiui, planuoklis gali vengti kurti didelį objektų skaičių vienu metu, nes tai gali sukelti šiukšlių surinkimo ciklą. Taip pat stengiamasi atlikti darbą mažesnėmis dalimis, siekiant sumažinti atminties pėdsaką bet kuriuo metu.

Nekritinių užduočių atidėjimas

Teikdamas pirmenybę vartotojo sąveikoms ir atidėdamas nekritines užduotis, „React“ gali sumažinti bet kuriuo metu naudojamos atminties kiekį. Užduotys, kurios nėra būtinos iš karto, pavyzdžiui, išankstinis turinio, kuris nėra matomas vartotojui, atvaizdavimas, gali būti atidėtos vėlesniam laikui, kai sistema bus mažiau apkrauta. Tai sumažina programos atminties pėdsaką ir pagerina bendrą jos našumą.

Praktiniai pavyzdžiai ir naudojimo atvejai

Panagrinėkime keletą praktinių pavyzdžių, kaip „React Concurrent Mode“ išteklių planavimas gali pagerinti vartotojo patirtį:

1 pavyzdys: Įvesties tvarkymas

Įsivaizduokite formą su keliais įvesties laukais ir sudėtinga patvirtinimo logika. Tradicinėje „React“ programoje, įvedant tekstą į įvesties lauką, gali būti suaktyvintas sinchroninis visos formos atnaujinimas, sukeliantis pastebimą vėlavimą. Naudojant „Concurrent Mode“, „React“ gali teikti pirmenybę vartotojo įvesties tvarkymui, užtikrindamas, kad vartotojo sąsaja išliktų reaguojanti net esant sudėtingai patvirtinimo logikai. Kai vartotojas rašo, „React“ nedelsiant atnaujina įvesties lauką. Patvirtinimo logika tada vykdoma kaip foninė užduotis su žemesniu prioritetu, užtikrinant, kad ji netrukdytų vartotojo spausdinimo patirčiai. Tarptautiniams vartotojams, įvedantiems duomenis su skirtingais simbolių rinkiniais, šis reagavimas yra kritiškai svarbus, ypač įrenginiuose su mažiau galingais procesoriais.

2 pavyzdys: Duomenų gavimas

Apsvarstykite informacinį skydelį, kuriame rodomi duomenys iš kelių API. Tradicinėje „React“ programoje, gaunant visus duomenis vienu metu, vartotojo sąsaja gali būti užblokuota, kol bus baigtos visos užklausos. Naudojant „Concurrent Mode“, „React“ gali gauti duomenis asinchroniškai ir atvaizduoti vartotojo sąsają palaipsniui. Svarbiausi duomenys gali būti gauti ir rodomi pirmiausia, o mažiau svarbūs duomenys gaunami ir rodomi vėliau. Tai užtikrina greitesnį pradinį įkėlimo laiką ir geresnę vartotojo patirtį. Įsivaizduokite akcijų prekybos programą, naudojamą visame pasaulyje. Prekiautojams skirtingose laiko juostose reikia realaus laiko duomenų atnaujinimų. „Concurrent Mode“ leidžia akimirksniu rodyti kritinę informaciją apie akcijas, o mažiau svarbi rinkos analizė įkeliama fone, suteikiant reaguojančią patirtį net esant kintančiam tinklo greičiui visame pasaulyje.

3 pavyzdys: Animacija

Animacijos gali reikalauti daug skaičiavimo išteklių, dėl ko gali atsirasti praleistų kadrų ir trūkinėjanti vartotojo patirtis. „Concurrent Mode“ leidžia „React“ teikti pirmenybę animacijoms, užtikrinant, kad jos būtų atvaizduojamos sklandžiai, net kai fone veikia kitos užduotys. Priskirdamas aukštą prioritetą animacijos užduotims, „React“ užtikrina, kad animacijos kadrai būtų atvaizduojami laiku, suteikiant vizualiai patrauklią patirtį. Pavyzdžiui, el. prekybos svetainė, naudojanti animaciją perėjimui tarp produktų puslapių, gali užtikrinti sklandžią ir vizualiai malonią patirtį tarptautiniams pirkėjams, nepriklausomai nuo jų įrenginio ar vietos.

„Concurrent Mode“ įjungimas

Norėdami įjungti „Concurrent Mode“ savo „React“ programoje, turite naudoti `createRoot` API vietoj tradicinės `ReactDOM.render` API. Štai pavyzdys:

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

const container = document.getElementById('root');
const root = createRoot(container); // createRoot(container!) if you use TypeScript
root.render();

Taip pat turite įsitikinti, kad jūsų komponentai yra suderinami su „Concurrent Mode“. Tai reiškia, kad jūsų komponentai turėtų būti grynosios funkcijos (pure functions), kurios nepriklauso nuo šalutinių poveikių ar kintamos būsenos. Jei naudojate klasės komponentus, turėtumėte apsvarstyti galimybę pereiti prie funkcinių komponentų su „hooks“.

Geriausios atminties optimizavimo praktikos „Concurrent Mode“ režime

Štai keletas geriausių praktikų, kaip optimizuoti atminties naudojimą „React Concurrent Mode“ programose:

• Venkite nereikalingų pervaizdavimų: Naudokite `React.memo` ir `useMemo`, kad komponentai nebūtų pervaizduojami, kai jų savybės (props) nepasikeitė. Tai gali žymiai sumažinti darbą, kurį turi atlikti „React“, ir pagerinti našumą.
• Naudokite tingųjį įkėlimą (lazy loading): Įkelkite komponentus tik tada, kai jų prireikia. Tai gali sumažinti pradinį jūsų programos įkėlimo laiką ir pagerinti jos reagavimą.
• Optimizuokite paveikslėlius: Naudokite optimizuotus paveikslėlius, kad sumažintumėte savo programos dydį. Tai gali pagerinti įkėlimo laiką ir sumažinti programos naudojamos atminties kiekį.
• Naudokite kodo skaidymą (code splitting): Padalinkite savo kodą į mažesnes dalis, kurias galima įkelti pagal poreikį. Tai gali sumažinti pradinį jūsų programos įkėlimo laiką ir pagerinti jos reagavimą.
• Venkite atminties nutekėjimų: Įsitikinkite, kad išvalote visus išteklius, kuriuos naudojate, kai jūsų komponentai yra išmontuojami (unmount). Tai gali užkirsti kelią atminties nutekėjimams ir pagerinti jūsų programos stabilumą. Konkrečiai, atsisakykite prenumeratų, atšaukite laikmačius ir atlaisvinkite bet kokius kitus laikomus išteklius.
• Profiluokite savo programą: Naudokite „React Profiler“, kad nustatytumėte našumo problemas savo programoje. Tai gali padėti jums nustatyti sritis, kuriose galite pagerinti našumą ir sumažinti atminties naudojimą.

Internacionalizacijos ir prieinamumo aspektai

Kuriant „React“ programas pasaulinei auditorijai, svarbu atsižvelgti į internacionalizaciją (i18n) ir prieinamumą (a11y). Šie aspektai tampa dar svarbesni naudojant „Concurrent Mode“, nes asinchroninis atvaizdavimo pobūdis gali paveikti vartotojų su negalia ar esančių skirtingose vietovėse patirtį.

Internacionalizacija

• Naudokite i18n bibliotekas: Naudokite bibliotekas, tokias kaip `react-intl` ar `i18next`, vertimams valdyti ir skirtingoms lokalėms tvarkyti. Užtikrinkite, kad jūsų vertimai būtų įkeliami asinchroniškai, kad nebūtų blokuojama vartotojo sąsaja.
• Formatuokite datas ir skaičius: Naudokite tinkamą datų, skaičių ir valiutų formatavimą, atsižvelgiant į vartotojo lokalę.
• Palaikykite kalbas, rašomas iš dešinės į kairę: Jei jūsų programa turi palaikyti kalbas, rašomas iš dešinės į kairę, įsitikinkite, kad jūsų išdėstymas ir stiliai yra suderinami su šiomis kalbomis.
• Atsižvelkite į regioninius skirtumus: Būkite sąmoningi dėl kultūrinių skirtumų ir atitinkamai pritaikykite savo turinį ir dizainą. Pavyzdžiui, spalvų simbolika, vaizdai ir net mygtukų išdėstymas gali turėti skirtingas reikšmes skirtingose kultūrose. Venkite naudoti kultūriškai specifinių idiomų ar slengo, kurio gali nesuprasti visi vartotojai. Paprastas pavyzdys yra datos formatavimas (MM/DD/YYYY vs DD/MM/YYYY), kuris turi būti tvarkomas tinkamai.

Prieinamumas

• Naudokite semantinį HTML: Naudokite semantinius HTML elementus, kad suteiktumėte struktūrą ir prasmę savo turiniui. Tai palengvina ekrano skaitytuvams ir kitoms pagalbinėms technologijoms suprasti jūsų programą.
• Pateikite alternatyvų tekstą paveikslėliams: Visada pateikite alternatyvų tekstą paveikslėliams, kad vartotojai su regėjimo negalia galėtų suprasti paveikslėlių turinį.
• Naudokite ARIA atributus: Naudokite ARIA atributus, kad suteiktumėte papildomos informacijos apie savo programą pagalbinėms technologijoms.
• Užtikrinkite prieinamumą klaviatūra: Įsitikinkite, kad visi interaktyvūs jūsų programos elementai yra pasiekiami naudojant klaviatūrą.
• Testuokite su pagalbinėmis technologijomis: Išbandykite savo programą su ekrano skaitytuvais ir kitomis pagalbinėms technologijomis, kad užtikrintumėte, jog ji yra prieinama visiems vartotojams. Išbandykite su tarptautiniais simbolių rinkiniais, kad užtikrintumėte tinkamą atvaizdavimą visoms kalboms.

Išvados

„React Concurrent Mode“ išteklių planavimas ir atmintį tausojantis užduočių valdymas yra galingi įrankiai, skirti kurti našias ir greitai reaguojančias vartotojo sąsajas. Teikdami pirmenybę vartotojo sąveikoms, atidėdami nekritines užduotis ir optimizuodami atminties naudojimą, galite sukurti programas, kurios suteikia vientisą patirtį vartotojams visame pasaulyje, nepriklausomai nuo jų įrenginio ar tinklo sąlygų. Šių funkcijų pritaikymas ne tik pagerins vartotojo patirtį, bet ir prisidės prie įtraukesnio ir prieinamesnio žiniatinklio visiems. „React“ toliau tobulėjant, „Concurrent Mode“ supratimas ir panaudojimas bus labai svarbūs kuriant šiuolaikines, aukšto našumo žiniatinklio programas.