React useContext: Context API kasutuse optimeerimine jõudluse parandamiseks

Reacti Context API, millele pääseb peamiselt ligi useContext hooki kaudu, pakub võimsat mehhanismi andmete jagamiseks üle teie komponentide puu, ilma et peaksite propsi käsitsi igal tasandil alla andma. Kuigi see pakub märkimisväärset mugavust, võib ebaõige kasutamine põhjustada jõudlusprobleeme, eriti suurtes, keerukates rakendustes. See juhend käsitleb tõhusaid strateegiaid Context API kasutuse optimeerimiseks, kasutades useContext, tagades, et teie Reacti rakendused jäävad jõudluslikuks ja skaleeritavaks.

Potentsiaalsete jõudlusprobleemide mõistmine

Põhiprobleem seisneb selles, kuidas useContext käivitab uuesti renderdamist. Kui komponent kasutab useContext, tellib see muutusi määratud kontekstis. Kõik konteksti väärtuse värskendused, olenemata sellest, kas see konkreetne komponent vajab värskendatud andmeid, põhjustab komponendi ja kõigi selle alluvate uuesti renderdamist. See võib põhjustada tarbetuid uuesti renderdamisi, mis põhjustavad jõudluse halvenemist, eriti sageli värskendatavate kontekstide või suurte komponentide puude korral.

Kujutage ette stsenaariumi, kus teil on stiilimiseks kasutatav globaalne teemakontekst. Kui isegi väike, ebaoluline andmetükk selles teemakontekstis muutub, renderdatakse uuesti iga komponent, mis seda konteksti kasutab, alates nuppudest kuni terviklike paigutusteni. See on ebatõhus ja võib kasutajakogemust negatiivselt mõjutada.

Optimeerimisstrateegiad useContexti jaoks

useContext jõudlusmõju leevendamiseks saab kasutada mitmeid tehnikaid. Uurime neid strateegiaid, pakkudes praktilisi näiteid ja parimaid tavasid.

1. Graanuliline konteksti loomine

Ühe monoliitse konteksti loomise asemel teie kogu rakenduse jaoks, jagage oma andmed väiksemateks, spetsiifilisemateks kontekstideks. See minimeerib uuesti renderdamise ulatust. Mõjutatud on ainult komponendid, mis sõltuvad otseselt konkreetse konteksti muutunud andmetest.

Näide:

Ühe AppContext asemel, mis sisaldab kasutajaandmeid, teemaseadeid ja muud globaalset olekut, looge eraldi kontekstid:

• UserContext: kasutajaga seotud teabe jaoks (autentimisolek, kasutajaprofiil jne).
• ThemeContext: teemaga seotud seadete jaoks (värvid, fondid jne).
• SettingsContext: rakendusseadete jaoks (keel, ajavöönd jne).

See lähenemisviis tagab, et ühe konteksti muutused ei käivita uuesti renderdamist komponentides, mis tuginevad teistele, seostamata kontekstidele.

2. Memoiseerimistehnikad: React.memo ja useMemo

React.memo: Ümbritsege konteksti tarbivad komponendid React.memo-ga, et vältida uuesti renderdamist, kui propse pole muudetud. See teostab komponentidele edastatud propsi madalat võrdlust.

Näide:

            import React, { useContext } from 'react';

const ThemeContext = React.createContext({});

function MyComponent(props) {
 const theme = useContext(ThemeContext);
 return <div style={{ color: theme.textColor }}>{props.children}</div>;
}

export default React.memo(MyComponent);

            

              
                Copy
              
            
          

Selles näites renderdatakse MyComponent uuesti ainult siis, kui theme.textColor muutub. React.memo teostab aga madalat võrdlust, mis ei pruugi olla piisav, kui konteksti väärtus on keeruline objekt, mida sageli muudetakse. Sellistel juhtudel kaaluge useMemo kasutamist.

useMemo: Kasutage useMemo-t, et memoiseerida kontekstist saadud väärtused. See hoiab ära tarbetud arvutused ja tagab, et komponendid renderdatakse uuesti ainult siis, kui muudetakse konkreetset väärtust, millest need sõltuvad.

Näide:

            import React, { useContext, useMemo } from 'react';

const MyContext = React.createContext({});

function MyComponent() {
 const contextValue = useContext(MyContext);

 // Memoiseerige saadud väärtus
 const importantValue = useMemo(() => {
 return contextValue.item1 + contextValue.item2;
 }, [contextValue.item1, contextValue.item2]);

 return <div>{importantValue}</div>;
}

export default MyComponent;

            

              
                Copy
              
            
          

Siin arvutatakse importantValue uuesti ainult siis, kui contextValue.item1 või contextValue.item2 muutub. Kui `contextValue` omadused muutuvad, ei renderdata `MyComponent` uuesti tarbetult.

3. Selektorfunktsioonid

Looge selektorfunktsioonid, mis eraldavad kontekstist ainult vajalikud andmed. See võimaldab komponentidel tellida ainult konkreetseid andmeosi, mida nad vajavad, mitte kogu konteksti objekti. See strateegia täiendab graanulilist konteksti loomist ja memoiseerimist.

Näide:

            import React, { useContext } from 'react';

const UserContext = React.createContext({});

// Selektorfunktsioon kasutajanime eraldamiseks
const selectUsername = (userContext) => userContext.username;

function UsernameDisplay() {
 const username = selectUsername(useContext(UserContext));

 return <p>Kasutajanimi: {username}</p>;
}

export default UsernameDisplay;

            

              
                Copy
              
            
          

Selles näites renderdatakse UsernameDisplay uuesti ainult siis, kui UserContext kasutajanime atribuut muutub. See lähenemisviis eraldab komponendi `UserContext`-is salvestatud muudest atribuutidest.

4. Kohandatud hookid konteksti kasutamiseks

Pakendage konteksti kasutamise loogika kohandatud hookidesse. See pakub puhtama ja taaskasutatavama viisi kontekstiväärtustele juurdepääsemiseks ning memoiseerimise või selektorfunktsioonide rakendamiseks. See võimaldab ka lihtsamat testimist ja hooldust.

Näide:

            import React, { useContext, useMemo } from 'react';

const ThemeContext = React.createContext({});

// Kohandatud hook teemavärvile juurdepääsemiseks
function useThemeColor() {
 const theme = useContext(ThemeContext);

 // Memoiseerige teemavärv
 const themeColor = useMemo(() => theme.color, [theme.color]);

 return themeColor;
}

function MyComponent() {
 const themeColor = useThemeColor();

 return <div style={{ color: themeColor }}>Tere, Maailm!</div>;
}

export default MyComponent;

            

              
                Copy
              
            
          

useThemeColor hook pakendab loogika theme.color-le juurdepääsemiseks ja selle memoiseerimiseks. See muudab selle loogika hõlpsasti korduvkasutatavaks mitmes komponendis ja tagab, et komponent renderdatakse uuesti ainult siis, kui theme.color muutub.

5. Olekuhaldusraamatukogud: alternatiivne lähenemisviis

Keerukate olekuhaldusstsenaariumide jaoks kaaluge spetsiaalsete olekuhaldusraamatukogude kasutamist, nagu Redux, Zustand või Jotai. Need raamatukogud pakuvad täiustatud funktsioone, nagu tsentraliseeritud olekuhaldus, prognoositavad olekuvärskendused ja optimeeritud uuesti renderdamise mehhanismid.

• Redux: Küps ja laialdaselt kasutatav raamatukogu, mis pakub prognoositavat olekuhoidlat JavaScripti rakendustele. See nõuab rohkem paberimajandust, kuid pakub suurepäraseid silumisriistu ja suurt kogukonda.
• Zustand: Väike, kiire ja skaleeritav miinimumstandardiga olekuhalduse lahendus, kasutades lihtsustatud flux-põhimõtteid. See on tuntud oma kasutuslihtsuse ja miinimumstandardiga.
• Jotai: Esmane ja paindlik olekuhaldus Reactile. See pakub lihtsat ja intuitiivset API-t globaalse oleku haldamiseks miinimumstandardiga.

Need raamatukogud võivad olla parem valik keeruka rakenduse oleku haldamiseks, eriti kui tegemist on sagedaste värskenduste ja keerukate andmesõltuvustega. Context API on suurepärane prop drillimise vältimiseks, kuid spetsiaalne olekuhaldus lahendab sageli globaalse oleku muutustest tulenevaid jõudlusküsimusi.

6. Muutumatud andmestruktuurid

Keeruliste objektide kasutamisel kontekstiväärtustena kasutage muutumatuid andmestruktuure. Muutumatud andmestruktuurid tagavad, et objektimuudatused loovad uue objektieksemplari, mitte ei muuda olemasolevat. See võimaldab Reactil teostada tõhusat muudatuste tuvastamist ja vältida tarbetuid uuesti renderdamisi.

Raamatukogud nagu Immer ja Immutable.js aitavad teil hõlpsamalt muutumatute andmestruktuuridega töötada.

Näide Immeriga:

            import React, { createContext, useState, useContext, useCallback } from 'react';
import { useImmer } from 'use-immer';

const MyContext = createContext();

function MyProvider({ children }) {
 const [state, updateState] = useImmer({
 item1: 'value1',
 item2: 'value2',
 });

 const updateItem1 = useCallback((newValue) => {
 updateState((draft) => {
 draft.item1 = newValue;
 });
 }, [updateState]);

 return (
 <MyContext.Provider value={{ state, updateItem1 }}>
 {children}
 </MyContext.Provider>
 );
}

function MyComponent() {
 const { state, updateItem1 } = useContext(MyContext);

 return (
 <div>
 <p>Item 1: {state.item1}</p>
 <button onClick={() => updateItem1('new value')}>Update Item 1</button>
 </div>
 );
}

export { MyContext, MyProvider, MyComponent };

            

              
                Copy
              
            
          

Selles näites tagab useImmer, et olekuvärskendused loovad uue olekuobjekti, käivitades uuesti renderdamise ainult vajaduse korral.

7. Olekuvärskenduste partiitöötlus

React partiitöötlus mitu olekuvärskendust automaatselt ühte uuesti renderdamise tsüklisse. Teatud olukordades peate siiski värskendusi käsitsi partiitöötluse tegema. See on eriti kasulik asünkroonsete toimingute või lühikese aja jooksul mitme värskenduse korral.

ReactDOM.unstable_batchedUpdates (saadaval React 18 ja vanemates versioonides ning tavaliselt React 18+ automaatse partiitöötlusega tarbetu) saate kasutada värskenduste käsitsi partiitöötluse tegemiseks.

8. Tarbetute konteksti värskenduste vältimine

Veenduge, et värskendate konteksti väärtust ainult siis, kui andmetes on tegelikke muudatusi. Vältige konteksti värskendamist sama väärtusega tarbetult, kuna see käivitab ikkagi uuesti renderdamise.

Enne konteksti värskendamist võrrelge uut väärtust eelmise väärtusega, et tagada erinevus.

Reaalmaailma näited erinevates riikides

Vaatame, kuidas neid optimeerimistehnikaid saab rakendada erinevates stsenaariumites erinevates riikides:

• E-kaubanduse platvorm (globaalne): E-kaubanduse platvorm kasutab kasutaja ostukorvi haldamiseks CartContext-i. Optimeerimiseta võidakse iga komponent lehel uuesti renderdada, kui ostukorvi lisatakse ese. Selektorfunktsioonide ja React.memo kasutamisega renderdatakse uuesti ainult ostukorvi kokkuvõte ja sellega seotud komponendid. Zustand-i sarnaste raamatukogude kasutamine võib ostukorvi haldamise tõhusalt tsentraliseerida. See kehtib globaalselt, olenemata piirkonnast.
• Finantsuuringute armatuurlaud (Ameerika Ühendriigid, Ühendkuningriik, Saksamaa): Finantsuuringute armatuurlaud kuvab reaalajas aktsiahindu ja portfelliteavet. StockDataContext pakub uusimaid aktsiaandmeid. Ülemäärase uuesti renderdamise vältimiseks kasutatakse useMemo-t, et memoiseerida saadud väärtusi, nagu kogu portfelliväärtus. Edasine optimeerimine võib hõlmata selektorfunktsioonide kasutamist iga graafiku jaoks vajalike andmepunktide eraldamiseks. Recoil-i sarnased raamatukogud võivad samuti kasulikuks osutuda.
• Sotsiaalmeedia rakendus (India, Brasiilia, Indoneesia): Sotsiaalmeedia rakendus kasutab kasutaja autentimise ja profiiliteabe haldamiseks UserContext-i. Kasutajaprofiili konteksti eraldamiseks autentimiskontekstist kasutatakse graanulilist konteksti loomist. Tõhusa muudatuste tuvastamise tagamiseks kasutatakse muutumatuid andmestruktuure. Immer-i sarnased raamatukogud võivad olekuvärskendusi lihtsustada.
• Reisibroneerimise veebisait (Jaapan, Lõuna-Korea, Hiina): Reisibroneerimise veebisait kasutab otsingukriteeriumide ja tulemuste haldamiseks SearchContext-i. Otsingutulemuste hankimise ja memoiseerimise loogika pakendamiseks kasutatakse kohandatud hookid. Olekuvärskenduste partiitöötlust kasutatakse jõudluse parandamiseks, kui korraga rakendatakse mitut filtrit.

Tegevusjuhised ja parimad tavad

• Profileerige oma rakendust: kasutage React DevToolsi, et tuvastada komponente, mis renderdatakse sageli uuesti.
• Alustage graanuliliste kontekstidega: jagage oma globaalne olek väiksemateks, paremini hallatavateks kontekstideks.
• Rakendage memoiseerimist strateegiliselt: kasutage React.memo ja useMemo, et vältida tarbetuid uuesti renderdamisi.
• Kasutage selektorfunktsioone: eraldage kontekstist ainult vajalikud andmed.
• Kaaluge olekuhaldusraamatukogusid: keerukate olekuhalduste jaoks uurige raamatukogusid nagu Redux, Zustand või Jotai.
• Võtke kasutusele muutumatud andmestruktuurid: muutumatute andmetega töötamise lihtsustamiseks kasutage raamatukogusid nagu Immer.
• Jälgige ja optimeerige: jälgige pidevalt oma rakenduse jõudlust ja optimeerige oma konteksti kasutust vajadusel.

Järeldus

Reacti Context API, kui seda mõistlikult kasutada ja ülaltoodud tehnikatega optimeerida, pakub võimsat ja mugavat viisi andmete jagamiseks kogu teie komponentide puu kaudu. Potentsiaalsete jõudlusprobleemide mõistmise ja sobivate optimeerimisstrateegiate rakendamisega saate tagada, et teie Reacti rakendused jäävad jõudluslikuks, skaleeritavaks ja hooldatavaks, sõltumata nende suurusest või keerukusest.

Pidage meeles oma rakendust alati profileerida ja tuvastada optimeerimist vajavad alad. Valige strateegiad, mis sobivad kõige paremini teie konkreetsetele vajadustele ja kontekstile. Neid juhiseid järgides saate tõhusalt kasutada useContext-i võimsust ja luua suure jõudlusega Reacti rakendusi, mis pakuvad erakordset kasutajakogemust.