React Fiber Architektūra: Suderinimo Proceso Supratimas

React sukėlė revoliuciją front-end programavime su savo komponentais pagrįsta architektūra ir deklaratyviu programavimo modeliu. React efektyvumo pagrindas yra jo suderinimo procesas – mechanizmas, kuriuo React atnaujina tikrąjį DOM, kad atspindėtų pakeitimus komponentų medyje. Šis procesas patyrė reikšmingą evoliuciją, kuri baigėsi Fiber architektūra. Šis straipsnis suteikia išsamų supratimą apie React Fiber ir jo poveikį suderinimui.

Kas yra Suderinimas?

Suderinimas (angl. reconciliation) yra algoritmas, kurį React naudoja palyginti ankstesnį virtualų DOM su nauju virtualiu DOM ir nustatyti minimalų pakeitimų rinkinį, reikalingą atnaujinti tikrąjį DOM. Virtualus DOM yra atmintyje esanti vartotojo sąsajos (UI) reprezentacija. Kai komponento būsena pasikeičia, React sukuria naują virtualų DOM medį. Užuot tiesiogiai manipuliavęs tikruoju DOM, kas yra lėtas procesas, React palygina naują virtualų DOM medį su ankstesniu ir nustato skirtumus. Šis procesas vadinamas „diffing“.

Suderinimo procesas remiasi dviem pagrindinėmis prielaidomis:

• Skirtingų tipų elementai sukurs skirtingus medžius.
• Programuotojas gali nurodyti, kurie vaikiniai elementai gali išlikti stabilūs per skirtingus atvaizdavimus, naudodamas key savybę (prop).

Tradicinis Suderinimas (Prieš Fiber)

Pradinėje React implementacijoje suderinimo procesas buvo sinchroninis ir nedalomas. Tai reiškė, kad kai React pradėdavo virtualaus DOM palyginimo ir tikrojo DOM atnaujinimo procesą, jo nebuvo galima pertraukti. Tai galėjo sukelti našumo problemų, ypač sudėtingose programose su dideliais komponentų medžiais. Jei komponento atnaujinimas užtrukdavo ilgai, naršyklė tapdavo nereaguojanti, o tai lemdavo prastą vartotojo patirtį. Tai dažnai vadinama „strigimo“ (jank) problema.

Įsivaizduokite sudėtingą el. prekybos svetainę, kurioje rodomas produktų katalogas. Jei vartotojas sąveikauja su filtru, sukeldamas katalogo perpiešimą, sinchroninis suderinimo procesas gali užblokuoti pagrindinę giją, todėl vartotojo sąsaja taps nereaguojanti, kol visas katalogas nebus perpieštas. Tai galėtų užtrukti kelias sekundes ir sukelti vartotojo nusivylimą.

Pristatome React Fiber

React Fiber yra visiškas React suderinimo algoritmo perrašymas, pristatytas React 16 versijoje. Jo pagrindinis tikslas yra pagerinti React programų reakcijos greitį ir suvokiamą našumą, ypač sudėtingais atvejais. Fiber tai pasiekia suskaidydamas suderinimo procesą į mažesnius, pertraukiamus darbo vienetus.

Pagrindinės React Fiber koncepcijos yra:

• Fiber (Skaidulos): Fiber yra JavaScript objektas, vaizduojantis darbo vienetą. Jame saugoma informacija apie komponentą, jo įvestį ir išvestį. Kiekvienas React komponentas turi atitinkamą fiber.
• WorkLoop (Darbo ciklas): Darbo ciklas yra ciklas, kuris iteruoja per fiber medį ir atlieka reikiamą darbą kiekvienam fiber.
• Scheduling (Planavimas): Planuoklis (scheduler) nusprendžia, kada pradėti, sustabdyti, atnaujinti ar atšaukti darbo vienetą, remdamasis prioritetu.

Fiber Architektūros Privalumai

Fiber architektūra suteikia keletą svarbių privalumų:

• Pertraukiamas Suderinimas: Fiber leidžia React sustabdyti ir tęsti suderinimo procesą, neleidžiant ilgai trunkančioms užduotims blokuoti pagrindinės gijos. Tai užtikrina, kad vartotojo sąsaja išliks reaguojanti, net ir vykdant sudėtingus atnaujinimus.
• Prioritetais pagrįsti atnaujinimai: Fiber leidžia React nustatyti skirtingų tipų atnaujinimų prioritetus. Pavyzdžiui, vartotojo sąveikoms, tokioms kaip rašymas ar paspaudimai, gali būti suteiktas didesnis prioritetas nei foninėms užduotims, tokioms kaip duomenų gavimas. Tai užtikrina, kad svarbiausi atnaujinimai būtų apdorojami pirmiausia.
• Asinchroninis atvaizdavimas: Fiber leidžia React atlikti atvaizdavimą asinchroniškai. Tai reiškia, kad React gali pradėti atvaizduoti komponentą, o tada sustoti, kad naršyklė galėtų atlikti kitas užduotis, pavyzdžiui, apdoroti vartotojo įvestį ar animacijas. Tai pagerina bendrą programos našumą ir reakcijos greitį.
• Patobulintas klaidų apdorojimas: Fiber suteikia geresnį klaidų apdorojimą suderinimo proceso metu. Jei atvaizdavimo metu įvyksta klaida, React gali grakščiau atsigauti ir išvengti visos programos strigimo.

Apsvarstykime bendradarbiavimo dokumentų redagavimo programą. Su Fiber, skirtingų vartotojų atlikti pakeitimai gali būti apdorojami su skirtingais prioritetais. Dabartinio vartotojo realiu laiku atliekamas rašymas gauna aukščiausią prioritetą, užtikrinant momentinį atsaką. Atnaujinimai iš kitų vartotojų ar foninis automatinis išsaugojimas gali būti apdorojami su mažesniu prioritetu, minimizuojant trikdžius aktyvaus vartotojo patirčiai.

Fiber Struktūros Supratimas

Kiekvienas React komponentas yra vaizduojamas Fiber mazgu. Fiber mazgas saugo informaciją apie komponento tipą, savybes (props), būseną (state) ir jo ryšius su kitais Fiber mazgais medyje. Štai keletas svarbių Fiber mazgo savybių:

• type: Komponento tipas (pvz., funkcinis komponentas, klasės komponentas, DOM elementas).
• key: Komponentui perduota `key` savybė.
• props: Komponentui perduotos savybės.
• stateNode: Komponento egzempliorius (klasės komponentams) arba `null` (funkciniams komponentams).
• child: Rodyklė į pirmąjį vaikinį Fiber mazgą.
• sibling: Rodyklė į kitą brolišką Fiber mazgą.
• return: Rodyklė į tėvinį Fiber mazgą.
• alternate: Rodyklė į Fiber mazgą, vaizduojantį ankstesnę komponento būseną.
• effectTag: Žymė, nurodanti atnaujinimo tipą, kuris turi būti atliktas DOM.

alternate savybė yra ypač svarbi. Ji leidžia React sekti ankstesnę ir dabartinę komponento būseną. Suderinimo proceso metu React palygina dabartinį Fiber mazgą su jo alternate, kad nustatytų, kokie pakeitimai turi būti atlikti DOM.

Darbo Ciklo (WorkLoop) Algoritmas

Darbo ciklas yra Fiber architektūros pagrindas. Jis yra atsakingas už fiber medžio apėjimą ir reikiamo darbo atlikimą kiekvienam fiber. Darbo ciklas yra įgyvendintas kaip rekursinė funkcija, kuri apdoroja po vieną fiber.

Darbo ciklą sudaro dvi pagrindinės fazės:

• Atvaizdavimo (Render) Fazė: Atvaizdavimo fazės metu React apkeliauja fiber medį ir nustato, kokius pakeitimus reikia atlikti DOM. Ši fazė yra pertraukiama, o tai reiškia, kad React gali ją bet kada sustabdyti ir tęsti.
• Įvykdymo (Commit) Fazė: Įvykdymo fazės metu React pritaiko pakeitimus DOM. Ši fazė nėra pertraukiama, o tai reiškia, kad React turi ją užbaigti, kai ji prasideda.

Išsamesnė Atvaizdavimo Fazė

Atvaizdavimo fazę galima dar suskirstyti į dvi subfazes:

• beginWork: beginWork funkcija yra atsakinga už esamo Fiber mazgo apdorojimą ir vaikinių Fiber mazgų kūrimą. Ji nustato, ar komponentą reikia atnaujinti, ir jei taip, sukuria naujus Fiber mazgus jo vaikams.
• completeWork: completeWork funkcija yra atsakinga už esamo Fiber mazgo apdorojimą po to, kai jo vaikai buvo apdoroti. Ji atnaujina DOM ir apskaičiuoja komponento išdėstymą.

beginWork funkcija atlieka šias užduotis:

1. Patikrina, ar komponentą reikia atnaujinti.
2. Jei komponentą reikia atnaujinti, ji palygina naujas savybes (props) ir būseną (state) su ankstesnėmis savybėmis ir būsena, kad nustatytų, kokius pakeitimus reikia atlikti.
3. Sukuria naujus Fiber mazgus komponento vaikams.
4. Nustato effectTag savybę Fiber mazge, nurodydama atnaujinimo tipą, kuris turi būti atliktas DOM.

completeWork funkcija atlieka šias užduotis:

1. Atnaujina DOM su pakeitimais, kurie buvo nustatyti beginWork funkcijos metu.
2. Apskaičiuoja komponento išdėstymą.
3. Surenka šalutinius efektus, kurie turi būti atlikti po įvykdymo fazės.

Išsamesnė Įvykdymo (Commit) Fazė

Įvykdymo fazė yra atsakinga už pakeitimų pritaikymą DOM. Ši fazė nėra pertraukiama, o tai reiškia, kad React turi ją užbaigti, kai ji prasideda. Įvykdymo fazę sudaro trys subfazės:

• beforeMutation: Ši fazė vykdoma prieš modifikuojant DOM. Ji naudojama atlikti užduotis, tokias kaip DOM paruošimas atnaujinimams.
• mutation: Šioje fazėje atliekamos faktinės DOM modifikacijos. React atnaujina DOM remdamasis Fiber mazgų effectTag savybe.
• layout: Ši fazė vykdoma po to, kai DOM buvo modifikuotas. Ji naudojama atlikti užduotis, tokias kaip komponento išdėstymo atnaujinimas ir gyvavimo ciklo metodų vykdymas.

Praktiniai Pavyzdžiai ir Kodo Fragmentai

Pailiustruokime Fiber suderinimo procesą supaprastintu pavyzdžiu. Apsvarstykime komponentą, kuris rodo elementų sąrašą:

```javascript function ItemList({ items }) { return (

{items.map(item => (
• {item.name}
))}

); } ```

Kai pasikeičia items savybė (prop), React turi suderinti sąrašą ir atitinkamai atnaujinti DOM. Štai kaip Fiber tai tvarkytų:

1. Atvaizdavimo Fazė: beginWork funkcija palygintų naują items masyvą su ankstesniu items masyvu. Ji nustatytų, kurie elementai buvo pridėti, pašalinti ar atnaujinti.
2. Būtų sukurti nauji Fiber mazgai pridėtiems elementams, o effectTag būtų nustatytas, kad nurodytų, jog šiuos elementus reikia įterpti į DOM.
3. Fiber mazgai pašalintiems elementams būtų pažymėti ištrynimui.
4. Fiber mazgai atnaujintiems elementams būtų atnaujinti su naujais duomenimis.
5. Įvykdymo Fazė: commit fazė tada pritaikytų šiuos pakeitimus tikrajam DOM. Pridėti elementai būtų įterpti, pašalinti elementai būtų ištrinti, o atnaujinti elementai būtų modifikuoti.

key savybės naudojimas yra labai svarbus efektyviam suderinimui. Be key savybės, React turėtų perpiešti visą sąrašą kiekvieną kartą, kai pasikeičia items masyvas. Su key savybe React gali greitai nustatyti, kurie elementai buvo pridėti, pašalinti ar atnaujinti, ir atnaujinti tik tuos elementus.

Pavyzdžiui, įsivaizduokite scenarijų, kai keičiasi prekių tvarka pirkinių krepšelyje. Jei kiekviena prekė turi unikalų key (pvz., produkto ID), React gali efektyviai pertvarkyti prekes DOM, nereikėdamas jų visiškai perpiešti. Tai ženkliai pagerina našumą, ypač dideliuose sąrašuose.

Planavimas ir Prioritetų Nustatymas

Vienas iš pagrindinių Fiber privalumų yra galimybė planuoti ir nustatyti atnaujinimų prioritetus. React naudoja planuoklį, kad nustatytų, kada pradėti, sustabdyti, atnaujinti ar atšaukti darbo vienetą, remiantis jo prioritetu. Tai leidžia React teikti pirmenybę vartotojo sąveikoms ir užtikrinti, kad vartotojo sąsaja išliktų reaguojanti, net ir vykdant sudėtingus atnaujinimus.

React suteikia keletą API, skirtų planuoti atnaujinimus su skirtingais prioritetais:

• React.render: Suplanuoja atnaujinimą su numatytuoju prioritetu.
• ReactDOM.unstable_deferredUpdates: Suplanuoja atnaujinimą su mažesniu prioritetu.
• ReactDOM.unstable_runWithPriority: Leidžia jums aiškiai nurodyti atnaujinimo prioritetą.

Pavyzdžiui, galite naudoti ReactDOM.unstable_deferredUpdates norėdami suplanuoti atnaujinimus, kurie nėra kritiniai vartotojo patirčiai, pavyzdžiui, analitikos sekimas ar foninis duomenų gavimas.

```javascript ReactDOM.unstable_deferredUpdates(() => { // Atlikite nekritinius atnaujinimus čia updateAnalyticsData(); }); ```

Klaidų Apdorojimas su Fiber

Fiber suteikia patobulintą klaidų apdorojimą suderinimo proceso metu. Kai atvaizdavimo metu įvyksta klaida, React gali pagauti klaidą ir išvengti visos programos strigimo. React naudoja klaidų ribas (error boundaries), kad tvarkytų klaidas kontroliuojamu būdu.

Klaidų riba yra komponentas, kuris pagauna JavaScript klaidas bet kurioje savo vaikinių komponentų medžio vietoje, registruoja tas klaidas ir rodo atsarginę vartotojo sąsają vietoje sugedusio komponentų medžio. Klaidų ribos pagauna klaidas atvaizdavimo metu, gyvavimo ciklo metoduose ir viso po jomis esančio medžio konstruktoriuose.

```javascript class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } static getDerivedStateFromError(error) { // Atnaujinkite būseną, kad kitas atvaizdavimas parodytų atsarginę UI. return { hasError: true }; } componentDidCatch(error, errorInfo) { // Taip pat galite registruoti klaidą klaidų pranešimo tarnyboje logErrorToMyService(error, errorInfo); } render() { if (this.state.hasError) { // Galite atvaizduoti bet kokią pasirinktinę atsarginę UI return

Kažkas nutiko negerai.

; } return this.props.children; } } ```

Galite naudoti klaidų ribas, kad apgaubtumėte bet kurį komponentą, kuris gali sukelti klaidą. Tai užtikrina, kad jūsų programa išliks stabili, net jei kai kurie komponentai sugenda.

```javascript ```

Fiber Derinimas

Derinti React programas, kurios naudoja Fiber, gali būti sudėtinga, tačiau yra keletas įrankių ir metodų, kurie gali padėti. Naršyklės plėtinys React DevTools suteikia galingą įrankių rinkinį, skirtą komponentų medžio tikrinimui, našumo profiliavimui ir klaidų derinimui.

React Profiler leidžia įrašyti jūsų programos našumą ir identifikuoti kliūtis. Galite naudoti Profiler, kad pamatytumėte, kiek laiko trunka kiekvieno komponento atvaizdavimas, ir nustatyti komponentus, kurie sukelia našumo problemų.

React DevTools taip pat suteikia komponentų medžio vaizdą, kuris leidžia jums tikrinti kiekvieno komponento savybes (props), būseną (state) ir Fiber mazgą. Tai gali būti naudinga norint suprasti, kaip struktūrizuotas komponentų medis ir kaip veikia suderinimo procesas.

Išvados

React Fiber architektūra yra reikšmingas patobulinimas, palyginti su tradiciniu suderinimo procesu. Suskaidydamas suderinimo procesą į mažesnius, pertraukiamus darbo vienetus, Fiber leidžia React pagerinti programų reakcijos greitį ir suvokiamą našumą, ypač sudėtingais atvejais.

Supratimas apie pagrindines Fiber koncepcijas, tokias kaip skaidulos, darbo ciklai ir planavimas, yra būtinas kuriant našias React programas. Išnaudodami Fiber funkcijas, galite sukurti vartotojo sąsajas, kurios yra jautresnės, atsparesnės ir suteikia geresnę vartotojo patirtį.

React toliau vystantis, Fiber išliks pagrindine jo architektūros dalimi. Būdami informuoti apie naujausius Fiber pokyčius, galite užtikrinti, kad jūsų React programos išnaudoja visus jo teikiamus našumo privalumus.

Štai keletas pagrindinių išvadų:

• React Fiber yra visiškas React suderinimo algoritmo perrašymas.
• Fiber leidžia React sustabdyti ir tęsti suderinimo procesą, neleidžiant ilgai trunkančioms užduotims blokuoti pagrindinės gijos.
• Fiber leidžia React nustatyti skirtingų tipų atnaujinimų prioritetus.
• Fiber suteikia geresnį klaidų apdorojimą suderinimo proceso metu.
• key savybė yra labai svarbi efektyviam suderinimui.
• React DevTools naršyklės plėtinys suteikia galingą įrankių rinkinį Fiber programų derinimui.

Priimdami React Fiber ir suprasdami jo principus, programuotojai visame pasaulyje gali kurti našesnes ir patogesnes vartotojui žiniatinklio programas, nepriklausomai nuo jų buvimo vietos ar projektų sudėtingumo.