React sulyginimas: virtualaus DOM skirtumų nustatymo ir pagrindinių našumo strategijų įvaldymo vadovas

React – tai galinga JavaScript biblioteka, skirta vartotojo sąsajoms kurti. Jos pagrindas yra mechanizmas, vadinamas sulyginimu (angl. reconciliation), kuris yra atsakingas už efektyvų faktinio DOM (Document Object Model) atnaujinimą, kai pasikeičia komponento būsena. Sulyginimo supratimas yra labai svarbus kuriant našias ir plečiamas React programas. Šiame straipsnyje gilinamasi į vidinius React sulyginimo proceso veikimo principus, daugiausia dėmesio skiriant virtualiam DOM, skirtumų nustatymo algoritmams ir našumo optimizavimo strategijoms.

Kas yra React sulyginimas?

Sulyginimas – tai procesas, kurį React naudoja DOM atnaujinimui. Vietoj tiesioginio DOM manipuliavimo (kuris gali būti lėtas), React naudoja virtualų DOM. Virtualus DOM yra lengvas, atmintyje esantis faktinio DOM atvaizdas. Kai komponento būsena pasikeičia, React atnaujina virtualų DOM, apskaičiuoja minimalų pakeitimų rinkinį, reikalingą tikram DOM atnaujinti, ir tada tuos pakeitimus pritaiko. Šis procesas yra žymiai efektyvesnis nei tiesioginis tikrojo DOM manipuliavimas po kiekvieno būsenos pasikeitimo.

Įsivaizduokite tai kaip detalų pastato (faktinio DOM) brėžinį (virtualų DOM). Užuot nugriovus ir perstačius visą pastatą kiekvieną kartą, kai reikia nedidelio pakeitimo, jūs palyginate brėžinį su esama struktūra ir atliekate tik būtinus pakeitimus. Tai sumažina trikdžius ir gerokai pagreitina procesą.

Virtualus DOM: slaptas React ginklas

Virtualus DOM – tai JavaScript objektas, atspindintis vartotojo sąsajos struktūrą ir turinį. Iš esmės tai yra lengva tikrojo DOM kopija. React naudoja virtualų DOM, kad:

• Stebėtų pakeitimus: React seka virtualaus DOM pakeitimus, kai atnaujinama komponento būsena.
• Atliktų palyginimą: Tada jis palygina ankstesnį virtualų DOM su naujuoju, kad nustatytų minimalų pakeitimų skaičių, reikalingą tikrajam DOM atnaujinti. Šis palyginimas vadinamas skirtumų nustatymu (angl. diffing).
• Grupuotų atnaujinimus: React sugrupuoja šiuos pakeitimus ir pritaiko juos tikrajam DOM vienoje operacijoje, taip sumažindamas DOM manipuliacijų skaičių ir pagerindamas našumą.

Virtualus DOM leidžia React efektyviai atlikti sudėtingus vartotojo sąsajos atnaujinimus, tiesiogiai neliečiant tikrojo DOM dėl kiekvieno menko pakeitimo. Tai yra pagrindinė priežastis, kodėl React programos dažnai yra greitesnės ir jautresnės nei programos, kurios remiasi tiesioginiu DOM manipuliavimu.

Skirtumų nustatymo algoritmas: minimalių pakeitimų paieška

Skirtumų nustatymo algoritmas yra React sulyginimo proceso pagrindas. Jis nustato minimalų operacijų skaičių, reikalingą ankstesniam virtualiam DOM paversti naujuoju. React skirtumų nustatymo algoritmas remiasi dviem pagrindinėmis prielaidomis:

1. Du skirtingų tipų elementai sukurs skirtingus medžius. Kai React susiduria su dviem skirtingų tipų elementais (pvz., <div> ir <span>), jis visiškai atjungs seną medį ir prijungs naują.
2. Programuotojas gali nurodyti, kurie vaikiniai elementai gali išlikti stabilūs tarp skirtingų atvaizdavimų, naudodamas key savybę. Naudojant key savybę, React gali efektyviai nustatyti, kurie elementai pasikeitė, buvo pridėti ar pašalinti.

Kaip veikia skirtumų nustatymo algoritmas:

1. Elementų tipų palyginimas: React pirmiausia palygina šakninius elementus. Jei jų tipai skirtingi, React nugriauna seną medį ir sukuria naują nuo nulio. Net jei elementų tipai yra tokie patys, bet pasikeitė jų atributai, React atnaujina tik pasikeitusius atributus.
2. Komponento atnaujinimas: Jei šakniniai elementai yra tas pats komponentas, React atnaujina komponento savybes (props) ir iškviečia jo render() metodą. Tada skirtumų nustatymo procesas tęsiamas rekursyviai su komponento vaikiniais elementais.
3. Sąrašo sulyginimas: Iteruodamas per vaikinių elementų sąrašą, React naudoja key savybę, kad efektyviai nustatytų, kurie elementai buvo pridėti, pašalinti ar perkelti. Be raktų, React turėtų iš naujo atvaizduoti visus vaikinius elementus, o tai gali būti neefektyvu, ypač dideliuose sąrašuose.

Pavyzdys (be raktų):

Įsivaizduokite elementų sąrašą, atvaizduotą be raktų:

<ul>
  <li>1 elementas</li>
  <li>2 elementas</li>
<li>3 elementas</li>
</ul>

Jei į sąrašo pradžią įterpsite naują elementą, React turės iš naujo atvaizduoti visus tris esamus elementus, nes negali pasakyti, kurie elementai yra tie patys, o kurie nauji. Jis mato, kad pirmasis sąrašo elementas pasikeitė, ir daro prielaidą, kad *visi* po jo einantys sąrašo elementai taip pat pasikeitė. Taip yra todėl, kad be raktų, React naudoja indeksais pagrįstą sulyginimą. Virtualus DOM „manytų“, kad „1 elementas“ tapo „Nauju elementu“ ir jį reikia atnaujinti, nors iš tikrųjų mes tik pridėjome „Naują elementą“ į sąrašo pradžią. Tada DOM turi būti atnaujintas „1 elementui“, „2 elementui“ ir „3 elementui“.

Pavyzdys (su raktais):

Dabar panagrinėkime tą patį sąrašą su raktais:

<ul>
  <li key="item1">1 elementas</li>
  <li key="item2">2 elementas</li>
  <li key="item3">3 elementas</li>
</ul>

Jei į sąrašo pradžią įterpsite naują elementą, React gali efektyviai nustatyti, kad buvo pridėtas tik vienas naujas elementas, o esami elementai tiesiog pasislinko žemyn. Jis naudoja key savybę, kad identifikuotų esamus elementus ir išvengtų nereikalingų pervaizdavimų. Naudojant raktus tokiu būdu, virtualus DOM gali suprasti, kad seni DOM elementai „1 elementui“, „2 elementui“ ir „3 elementui“ iš tikrųjų nepasikeitė, todėl jų nereikia atnaujinti faktiniame DOM. Naują elementą galima tiesiog įterpti į faktinį DOM.

key savybė turi būti unikali tarp to paties lygio elementų. Įprasta praktika yra naudoti unikalų ID iš jūsų duomenų:

<ul>
  {items.map(item => (
    <li key={item.id}>{item.name}</li>
  ))}
</ul>

Pagrindinės React našumo optimizavimo strategijos

React sulyginimo supratimas yra tik pirmas žingsnis. Norint kurti tikrai našias React programas, reikia taikyti strategijas, kurios padeda React optimizuoti skirtumų nustatymo procesą. Štai keletas pagrindinių strategijų:

1. Efektyviai naudokite raktus

Kaip parodyta aukščiau, key savybės naudojimas yra labai svarbus sąrašų atvaizdavimo optimizavimui. Užtikrinkite, kad naudojate unikalius ir stabilius raktus, kurie tiksliai atspindi kiekvieno sąrašo elemento tapatybę. Venkite naudoti masyvo indeksus kaip raktus, jei elementų tvarka gali keistis, nes tai gali sukelti nereikalingus pervaizdavimus ir netikėtą elgesį. Gera strategija yra naudoti unikalų identifikatorių iš jūsų duomenų rinkinio kaip raktą.

Pavyzdys: neteisingas rakto naudojimas (indeksas kaip raktas)

<ul>
  {items.map((item, index) => (
    <li key={index}>{item.name}</li>
  ))}
</ul>

Kodėl tai blogai: jei items tvarka pasikeis, kiekvieno elemento index pasikeis, todėl React pervaizduos visus sąrašo elementus, net jei jų turinys nepasikeitė.

Pavyzdys: teisingas rakto naudojimas (unikalus ID)

<ul>
  {items.map(item => (
    <li key={item.id}>{item.name}</li>
  ))}
</ul>

Kodėl tai gerai: item.id yra stabilus ir unikalus kiekvieno elemento identifikatorius. Net jei items tvarka pasikeis, React vis tiek gali efektyviai identifikuoti kiekvieną elementą ir pervaizduoti tik tuos elementus, kurie iš tikrųjų pasikeitė.

2. Venkite nereikalingų pervaizdavimų

Komponentai pervaizduojami kaskart, kai pasikeičia jų savybės (props) ar būsena. Tačiau kartais komponentas gali būti pervaizduotas net tada, kai jo savybės ir būsena iš tikrųjų nepasikeitė. Tai gali sukelti našumo problemų, ypač sudėtingose programose. Štai keletas būdų, kaip išvengti nereikalingų pervaizdavimų:

• Grynieji komponentai (Pure Components): React pateikia React.PureComponent klasę, kuri įgyvendina paviršutinišką savybių ir būsenos palyginimą shouldComponentUpdate() metode. Jei savybės ir būsena paviršutiniškai nepasikeitė, komponentas nebus pervaizduotas. Paviršutiniškas palyginimas patikrina, ar pasikeitė savybių ir būsenos objektų nuorodos.
• React.memo: Funkciniams komponentams galite naudoti React.memo, kad memoizuotumėte komponentą. React.memo yra aukštesnės eilės komponentas, kuris memoizuoja funkcinio komponento rezultatą. Pagal numatytuosius nustatymus jis paviršutiniškai palygins savybes.
• shouldComponentUpdate(): Klasių komponentams galite įgyvendinti shouldComponentUpdate() gyvavimo ciklo metodą, kad kontroliuotumėte, kada komponentas turėtų būti pervaizduotas. Tai leidžia jums įgyvendinti pasirinktinę logiką, kad nustatytumėte, ar pervaizdavimas yra būtinas. Tačiau būkite atsargūs naudodami šį metodą, nes neteisingai jį įgyvendinus galima lengvai įvesti klaidų.

Pavyzdys: React.memo naudojimas

const MyComponent = React.memo(function MyComponent(props) {
  // Atvaizdavimo logika čia
  return <div>{props.data}</div>;
});

Šiame pavyzdyje MyComponent bus pervaizduotas tik tada, jei jam perduodamos props paviršutiniškai pasikeis.

3. Nekintamumas (Immutability)

Nekintamumas yra pagrindinis React programavimo principas. Dirbant su sudėtingomis duomenų struktūromis, svarbu vengti tiesioginio duomenų keitimo. Vietoj to, kurkite naujas duomenų kopijas su norimais pakeitimais. Tai palengvina React pakeitimų aptikimą ir pervaizdavimų optimizavimą. Taip pat padeda išvengti netikėtų šalutinių poveikių ir daro jūsų kodą labiau nuspėjamu.

Pavyzdys: duomenų keitimas (neteisingai)

const items = this.state.items;
items.push({ id: 'new-item', name: 'New Item' }); // Keičia pradinį masyvą
this.setState({ items });

Pavyzdys: nekintamas atnaujinimas (teisingai)

this.setState(prevState => ({
  items: [...prevState.items, { id: 'new-item', name: 'New Item' }]
}));

Teisingame pavyzdyje sklaidos operatorius (...) sukuria naują masyvą su esamais elementais ir nauju elementu. Taip išvengiama pradinio items masyvo keitimo, todėl React lengviau aptinka pakeitimą.

4. Optimizuokite konteksto naudojimą

React Context suteikia būdą perduoti duomenis per komponentų medį, nereikalaujant rankiniu būdu perduoti savybių kiekviename lygmenyje. Nors Context yra galingas, neteisingai jį naudojant, jis taip pat gali sukelti našumo problemų. Bet kuris komponentas, kuris naudoja Context, bus pervaizduotas, kai pasikeis Context reikšmė. Jei Context reikšmė keičiasi dažnai, tai gali sukelti nereikalingus pervaizdavimus daugelyje komponentų.

Strategijos Context naudojimo optimizavimui:

• Naudokite kelis kontekstus: Suskaidykite didelius kontekstus į mažesnius, labiau specifinius. Tai sumažina komponentų, kuriuos reikia pervaizduoti, kai pasikeičia konkreti Context reikšmė, skaičių.
• Memoizuokite konteksto teikėjus: Naudokite React.memo, kad memoizuotumėte Context teikėją. Tai apsaugo nuo nereikalingo Context reikšmės pasikeitimo, sumažinant pervaizdavimų skaičių.
• Naudokite selektorius: Sukurkite selektorių funkcijas, kurios iš Context ištraukia tik tuos duomenis, kurių reikia komponentui. Tai leidžia komponentams pervaizduoti tik tada, kai pasikeičia jiems reikalingi konkretūs duomenys, o ne pervaizduoti po kiekvieno Context pasikeitimo.

5. Kodo skaidymas (Code Splitting)

Kodo skaidymas yra technika, skirta suskaidyti jūsų programą į mažesnius paketus, kuriuos galima įkelti pagal poreikį. Tai gali žymiai pagerinti pradinį jūsų programos įkėlimo laiką ir sumažinti JavaScript kodo, kurį naršyklė turi išanalizuoti ir įvykdyti, kiekį. React siūlo kelis būdus, kaip įgyvendinti kodo skaidymą:

• React.lazy ir Suspense: Šios funkcijos leidžia dinamiškai importuoti komponentus ir atvaizduoti juos tik tada, kai jie reikalingi. React.lazy įkelia komponentą tingiai, o Suspense pateikia atsarginę vartotojo sąsają, kol komponentas įkeliamas.
• Dinaminiai importai: Galite naudoti dinaminius importus (import()), kad įkeltumėte modulius pagal poreikį. Tai leidžia įkelti kodą tik tada, kai jis reikalingas, sumažinant pradinį įkėlimo laiką.

Pavyzdys: React.lazy ir Suspense naudojimas

const MyComponent = React.lazy(() => import('./MyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Įkeliama...</div>}>
      <MyComponent />
    </Suspense>
  );
}

6. Debouncing ir Throttling

„Debouncing“ ir „throttling“ yra technikos, skirtos apriboti funkcijos vykdymo dažnį. Tai gali būti naudinga tvarkant dažnai suveikiančius įvykius, tokius kaip scroll, resize ir input. Atidėdami arba ribodami šiuos įvykius, galite apsaugoti savo programą nuo nereagavimo.

• Debouncing (atidėjimas): Atidėjimas atideda funkcijos vykdymą, kol praeis tam tikras laiko tarpas nuo paskutinio funkcijos iškvietimo. Tai naudinga norint išvengti per dažno funkcijos kvietimo, kai vartotojas rašo tekstą ar slenka puslapį.
• Throttling (ribojimas): Ribojimas apriboja, kaip dažnai funkcija gali būti iškviesta. Tai užtikrina, kad funkcija bus iškviesta ne dažniau kaip kartą per nurodytą laiko intervalą. Tai naudinga norint išvengti per dažno funkcijos kvietimo, kai vartotojas keičia lango dydį ar slenka puslapį.

7. Naudokite profiliuotoją

React suteikia galingą Profiler įrankį, kuris gali padėti jums nustatyti našumo kliūtis jūsų programoje. Profiler leidžia įrašyti jūsų komponentų našumą ir vizualizuoti, kaip jie atvaizduojami. Tai gali padėti nustatyti komponentus, kurie pervaizduojami be reikalo arba kurių atvaizdavimas trunka ilgai. Profiler yra prieinamas kaip Chrome arba Firefox plėtinys.

Tarptautiniai aspektai

Kuriant React programas pasaulinei auditorijai, būtina atsižvelgti į internacionalizaciją (i18n) ir lokalizaciją (l10n). Tai užtikrina, kad jūsų programa bus prieinama ir patogi vartotojams iš skirtingų šalių ir kultūrų.

• Teksto kryptis (RTL): Kai kurios kalbos, pavyzdžiui, arabų ir hebrajų, rašomos iš dešinės į kairę (RTL). Įsitikinkite, kad jūsų programa palaiko RTL išdėstymus.
• Datos ir skaičių formatavimas: Naudokite tinkamus datos ir skaičių formatus skirtingoms lokalėms.
• Valiutos formatavimas: Rodykite valiutos vertes teisingu formatu, atsižvelgiant į vartotojo lokalę.
• Vertimas: Pateikite viso teksto vertimus jūsų programoje. Naudokite vertimų valdymo sistemą, kad efektyviai valdytumėte vertimus. Yra daug bibliotekų, kurios gali padėti, pavyzdžiui, i18next ar react-intl.

Pavyzdžiui, paprastas datos formatas:

• JAV: MM/DD/YYYY
• Europa: DD/MM/YYYY
• Japonija: YYYY/MM/DD

Neatsižvelgus į šiuos skirtumus, jūsų pasaulinei auditorijai bus suteikta prasta vartotojo patirtis.

Išvada

React sulyginimas yra galingas mechanizmas, leidžiantis efektyviai atnaujinti vartotojo sąsają. Suprasdami virtualų DOM, skirtumų nustatymo algoritmą ir pagrindines optimizavimo strategijas, galite kurti našias ir plečiamas React programas. Nepamirškite efektyviai naudoti raktų, vengti nereikalingų pervaizdavimų, naudoti nekintamumą, optimizuoti konteksto naudojimą, įgyvendinti kodo skaidymą ir naudoti React Profiler, kad nustatytumėte ir pašalintumėte našumo kliūtis. Be to, atsižvelkite į internacionalizaciją ir lokalizaciją, kad sukurtumėte tikrai globalias React programas. Laikydamiesi šių geriausių praktikų, galite suteikti išskirtinę vartotojo patirtį įvairiuose įrenginiuose ir platformose, kartu palaikydami įvairią, tarptautinę auditoriją.