Reacti konteksti optimeerimine: valijamuster ja jõudlus

Reacti kontekst pakub võimsat mehhanismi rakenduse oleku haldamiseks ja selle jagamiseks komponentide vahel ilma rekvisiitide sügavale suunamise vajaduseta. Kuid konteksti naiivsed rakendused võivad viia jõudluse kitsaskohtadeni, eriti suurtes ja keerulistes rakendustes. Iga kord, kui konteksti väärtus muutub, renderdatakse uuesti kõik seda konteksti kasutavad komponendid, isegi kui need sõltuvad ainult väikesest osast andmetest.

See artikkel süveneb valijamustrisse kui strateegiasse Reacti konteksti jõudluse optimeerimiseks. Uurime, kuidas see toimib, selle eeliseid ja esitame praktilisi näiteid selle kasutamise illustreerimiseks. Samuti arutleme seotud jõudluse kaalutluste ja alternatiivsete optimeerimistehnikate üle.

Probleemi mõistmine: mittevajalik uuesti renderdamine

Põhiprobleem tuleneb asjaolust, et Reacti Contexti API käivitab vaikimisi kõigi konteksti kasutavate komponentide uuesti renderdamise, kui konteksti väärtus muutub. Mõelge stsenaariumile, kus teie kontekst sisaldab suurt objekti, mis sisaldab kasutajaprofiili andmeid, teemaseadeid ja rakenduse konfiguratsiooni. Kui värskendate kasutajaprofiili ühte omadust, renderdatakse uuesti kõik konteksti kasutavad komponendid, isegi kui need sõltuvad ainult teemaseadetest.

See võib viia märkimisväärse jõudluse halvenemiseni, eriti keeruliste komponentide hierarhiate ja sagedaste konteksti värskenduste puhul. Tarbetud uuesti renderdamised raiskavad väärtuslikke protsessori tsükleid ja võivad põhjustada aeglaseid kasutajaliideseid.

Valijamuster: sihipärased värskendused

Valijamuster pakub lahendust, võimaldades komponentidel tellida ainult neid konteksti väärtuse osi, mida nad vajavad. Selle asemel, et kasutada kogu konteksti, kasutavad komponendid valijafunktsioone asjakohaste andmete ekstraheerimiseks. See vähendab uuesti renderdamise ulatust, tagades, et värskendatakse ainult komponente, mis tegelikult sõltuvad muudetud andmetest.

Kuidas see toimib:

1. Konteksti pakkuja: Konteksti pakkuja hoiab rakenduse olekut.
2. Valijafunktsioonid: Need on puhtad funktsioonid, mis võtavad konteksti väärtuse sisendina ja tagastavad tuletatud väärtuse. Need toimivad filtritena, ekstraheerides kontekstist konkreetseid andmeosi.
3. Kasutavad komponendid: Komponendid kasutavad kohandatud konksu (sageli nimega `useContextSelector`), et tellida valijafunktsiooni väljund. See konks vastutab valitud andmete muutuste tuvastamise ja uuesti renderdamise käivitamise eest ainult vajadusel.

Valijamustri rakendamine

Siin on põhinäide valijamustri rakendamisest:

1. Konteksti loomine

Esiteks määratleme oma konteksti. Kujutleme konteksti kasutaja profiili ja teemaseadete haldamiseks.

            import React, { createContext, useState, useContext } from 'react';

const AppContext = createContext({});

const AppProvider = ({ children }) => {
  const [user, setUser] = useState({
    name: 'John Doe',
    email: 'john.doe@example.com',
    location: 'New York'
  });
  const [theme, setTheme] = useState({
    primaryColor: '#007bff',
    secondaryColor: '#6c757d'
  });

  const updateUserName = (name) => {
    setUser(prevUser => ({ ...prevUser, name }));
  };

  const updateThemeColor = (primaryColor) => {
    setTheme(prevTheme => ({ ...prevTheme, primaryColor }));
  };

  const value = {
    user,
    theme,
    updateUserName,
    updateThemeColor
  };

  return (
    
      {children}
    
  );
};

export { AppContext, AppProvider };
            

              
                Copy
              
            
          

2. Valijafunktsioonide loomine

Järgmisena määratleme valijafunktsioonid soovitud andmete kontekstist ekstraheerimiseks. Näiteks:

            const selectUserName = (context) => context.user.name;
const selectPrimaryColor = (context) => context.theme.primaryColor;

            

              
                Copy
              
            
          

3. Kohandatud konksu loomine (`useContextSelector`)

See on valijamustri tuum. `useContextSelector` konks võtab sisendina valijafunktsiooni ja tagastab valitud väärtuse. Samuti haldab see tellimist kontekstile ja käivitab uuesti renderdamise ainult siis, kui valitud väärtus muutub.

            import { useContext, useState, useEffect, useRef } from 'react';

const useContextSelector = (context, selector) => {
  const [selected, setSelected] = useState(() => selector(useContext(context)));
  const latestSelector = useRef(selector);
  const contextValue = useContext(context);

  useEffect(() => {
    latestSelector.current = selector;
  });

  useEffect(() => {
    const nextSelected = latestSelector.current(contextValue);
    if (!Object.is(selected, nextSelected)) {
      setSelected(nextSelected);
    }
  }, [contextValue]);

  return selected;
};

export default useContextSelector;

            

              
                Copy
              
            
          

Selgitus:

• `useState`: lähtesta `selected` valijaga tagastatud algväärtusega.
• `useRef`: salvesta uusim `selector` funktsioon, tagades, et kasutatakse kõige ajakohasemat valijat, isegi kui komponent uuesti renderdatakse.
• `useContext`: hanki praegune konteksti väärtus.
• `useEffect`: see efekt käivitub alati, kui `contextValue` muutub. Sees uuesti arvutatakse valitud väärtus, kasutades `latestSelectorit`. Kui uus valitud väärtus erineb praegusest `selected` väärtusest (kasutades sügavaks võrdluseks `Object.is`), siis `selected` olekut uuendatakse, mis käivitab uuesti renderdamise.

4. Konteksti kasutamine komponentides

Nüüd saavad komponendid kasutada konksu `useContextSelector`, et tellida konteksti konkreetseid osi:

            import React from 'react';
import { AppContext, AppProvider } from './AppContext';
import useContextSelector from './useContextSelector';

const UserName = () => {
  const userName = useContextSelector(AppContext, selectUserName);

  return 
User Name: {userName}
;
};

const ThemeColorDisplay = () => {
  const primaryColor = useContextSelector(AppContext, selectPrimaryColor);

  return 
Theme Color: {primaryColor}
;
};

const App = () => {
  return (
    
      
      
    
  );
};

export default App;

            

              
                Copy
              
            
          

Selles näites renderdatakse `UserName` uuesti ainult siis, kui kasutaja nimi muutub, ja `ThemeColorDisplay` renderdatakse uuesti ainult siis, kui põhivärv muutub. Kasutaja e-posti aadressi või asukoha muutmine *ei* põhjusta `ThemeColorDisplay` uuesti renderdamist ja vastupidi.

Valijamustri eelised

• Vähendatud uuesti renderdamine: Peamine eelis on tarbetute uuesti renderdamiste märkimisväärne vähenemine, mis toob kaasa parema jõudluse.
• Parem jõudlus: Uuesti renderdamise minimeerimisega muutub rakendus reageerivamaks ja tõhusamaks.
• Koodi selgus: Valijafunktsioonid edendavad koodi selgust ja hooldatavust, määrates selgelt komponentide andmesõltuvused.
• Testitavus: Valijafunktsioonid on puhtad funktsioonid, mistõttu neid on lihtne testida ja põhjustada.

Kaalutlused ja optimeerimised

1. Memoization

Memoization võib veelgi suurendada valijafunktsioonide jõudlust. Kui sisendi konteksti väärtus pole muutunud, võib valijafunktsioon tagastada vahemällu salvestatud tulemuse, vältides tarbetuid arvutusi. See on eriti kasulik keeruliste valijafunktsioonide puhul, mis teostavad kalleid arvutusi.

Saate kasutada `useMemo` konksu oma `useContextSelector` rakenduses valitud väärtuse memoiseerimiseks. See lisab veel ühe optimeerimise kihi, vältides tarbetuid uuesti renderdamisi isegi siis, kui konteksti väärtus muutub, kuid valitud väärtus jääb samaks. Siin on uuendatud `useContextSelector` koos memoizationiga:

            import { useContext, useState, useEffect, useRef, useMemo } from 'react';

const useContextSelector = (context, selector) => {
  const latestSelector = useRef(selector);
  const contextValue = useContext(context);

  useEffect(() => {
    latestSelector.current = selector;
  }, [selector]);

  const selected = useMemo(() => latestSelector.current(contextValue), [contextValue]);

  return selected;
};

export default useContextSelector;

            

              
                Copy
              
            
          

2. Objekti muutumatus

Konteksti väärtuse muutumatuse tagamine on valijamustri õigeks toimimiseks ülioluline. Kui konteksti väärtust muteeritakse otse, ei pruugi valijafunktsioonid muutusi tuvastada, mis viib valede renderdusteni. Looge konteksti väärtuse värskendamisel alati uued objektid või massiivid.

3. Sügavad võrdlused

Konks `useContextSelector` kasutab valitud väärtuste võrdlemiseks `Object.is`. See teostab pinnalise võrdluse. Keeruliste objektide puhul peate võib-olla kasutama sügavat võrdlusfunktsiooni muutuste täpseks tuvastamiseks. Kuid sügavad võrdlused võivad olla arvutuslikult kulukad, seega kasutage neid mõistlikult.

4. Alternatiivid `Object.is`

Kui `Object.is` ei ole piisav (nt teil on oma kontekstis sügavalt pesastatud objekte), kaaluge alternatiive. Raamatukogud, nagu `lodash`, pakuvad sügavate võrdluste jaoks `_.isEqual`, kuid pidage meeles jõudluse mõju. Mõnel juhul võivad struktuurilised jagamistehnikad, kasutades muutumatuid andmestruktuure (nt Immer), olla kasulikud, kuna need võimaldavad teil muuta pesastatud objekti, ilma et originaali muteeritaks, ja neid saab sageli võrrelda `Object.is` abil.

5. `useCallback` valijate jaoks

Funktsioon `selector` ise võib olla tarbetu uuesti renderdamise allikas, kui seda ei memoiseerita õigesti. Andke `selector` funktsioon `useCallbackile`, et tagada selle uuesti loomine ainult siis, kui selle sõltuvused muutuvad. See hoiab ära kohandatud konksu tarbetud värskendused.

            const UserName = () => {
  const userName = useContextSelector(AppContext, useCallback(selectUserName, []));

  return 
User Name: {userName}
;
};

            

              
                Copy
              
            
          

6. Raamatukogude, nagu `use-context-selector`, kasutamine

Raamatukogud nagu `use-context-selector` pakuvad eelnevalt ehitatud konksu `useContextSelector`, mis on optimeeritud jõudluseks ja sisaldab selliseid funktsioone nagu pinnaline võrdlus. Selliste raamatukogude kasutamine võib teie koodi lihtsustada ja vähendada vigade tekkimise ohtu.

            import { useContextSelector } from 'use-context-selector';
import { AppContext } from './AppContext';

const UserName = () => {
  const userName = useContextSelector(AppContext, selectUserName);

  return 
User Name: {userName}
;
};

            

              
                Copy
              
            
          

Globaalsed näited ja parimad tavad

Valijamuster on rakendatav erinevates kasutusalades globaalsetes rakendustes:

• Lokaliseerimine: Kujutage ette e-kaubanduse platvormi, mis toetab mitut keelt. Kontekst võib sisaldada praegust lokaati ja tõlkeid. Teksti kuvavad komponendid saavad kasutada valijaid, et ekstraheerida asjakohane tõlge praeguse lokaadi jaoks.
• Teema haldamine: Sotsiaalmeedia rakendus võib lubada kasutajatel teemat kohandada. Kontekst võib salvestada teemaseaded ja UI elemente kuvavad komponendid saavad kasutada valijaid asjakohaste teemaomaduste (nt värvid, fondid) ekstraheerimiseks.
• Autentimine: Globaalne ettevõtte rakendus võib kasutada konteksti kasutaja autentimise oleku ja õiguste haldamiseks. Komponendid saavad kasutada valijaid, et määrata, kas praegusel kasutajal on juurdepääs konkreetsetele funktsioonidele.
• Andmete hankimise olek: Paljud rakendused kuvavad laadimisolekuid. Kontekst võib hallata API-kõnede olekut ja komponendid saavad selektiivselt tellida konkreetsete lõpp-punktide laadimisoleku. Näiteks kasutajaprofiili kuvav komponent võib tellida ainult `GET /user/:id` lõpp-punkti laadimisoleku.

Alternatiivsed optimeerimistehnikad

Kuigi valijamuster on võimas optimeerimistehnika, pole see ainus saadaolev tööriist. Kaaluge neid alternatiive:

• `React.memo`: Mähkige funktsionaalsed komponendid `React.memo` abil, et vältida uuesti renderdamist, kui rekvisiidid pole muutunud. See on kasulik rekvisiite otse saavate komponentide optimeerimiseks.
• `PureComponent`: Kasutage klassikomponentide jaoks `PureComponenti`, et teha rekvisiitide ja oleku pinnaline võrdlus enne uuesti renderdamist.
• Koodi jagamine: Lammutage rakendus väiksemateks tükkideks, mida saab nõudmisel laadida. See vähendab algset laadimisaega ja parandab üldist jõudlust.
• Virtualiseerimine: Suurte andmeloendite kuvamiseks kasutage virtualiseerimistehnikaid, et renderdada ainult nähtavad üksused. See parandab oluliselt jõudlust suurte andmekogumitega tegelemisel.

Järeldus

Valijamuster on väärtuslik tehnika Reacti konteksti jõudluse optimeerimiseks, minimeerides tarbetuid uuesti renderdamisi. Võimaldades komponentidel tellida ainult neid konteksti väärtuse osi, mida nad vajavad, parandab see rakenduse reageerimisvõimet ja tõhusust. Kombineerides seda teiste optimeerimistehnikatega, nagu memoization ja koodi jagamine, saate luua suure jõudlusega Reacti rakendusi, mis pakuvad sujuvat kasutuskogemust. Pidage meeles, et valige õige optimeerimisstrateegia vastavalt oma rakenduse konkreetsetele vajadustele ja kaaluge hoolikalt kaasnevaid kompromisse.

See artikkel pakkus põhjaliku juhendi valijamustrile, sealhulgas selle rakendamisele, eelistele ja kaalutlustele. Järgides selles artiklis kirjeldatud parimaid tavasid, saate oma Reacti konteksti kasutamist tõhusalt optimeerida ja luua globaalsele publikule suure jõudlusega rakendusi.