React Context Selectori Muster: Jõudluse optimeerimine uuesti renderdamise kaudu

React Context API pakub võimsat viisi globaalse oleku haldamiseks teie rakendustes. Siiski tekib Contexti kasutamisel tavaline väljakutse: ebavajalikud uuesti renderdamised. Kui Contexti väärtus muutub, renderdatakse uuesti kõik komponendid, mis seda Contexti kasutavad, isegi kui nad sõltuvad ainult väikesest osast Contexti andmetest. See võib põhjustada jõudluse kitsaskohti, eriti suuremates ja keerukamates rakendustes. Context Selectori muster pakub lahenduse, võimaldades komponentidel tellida ainult need konkreetsed Contexti osad, mida nad vajavad, vähendades oluliselt ebavajalikke uuesti renderdamisi.

Probleemi mõistmine: Ebavajalikud uuesti renderdamised

Illustreerime seda näitega. Kujutage ette e-kaubanduse rakendust, mis salvestab kasutajateavet (nimi, e-posti aadress, riik, keele-eelistus, ostukorvi sisu) Contexti providerisse. Kui kasutaja uuendab oma keele-eelistust, renderdatakse uuesti kõik Contexti tarbivad komponendid, sealhulgas need, mis kuvavad ainult kasutaja nime. See on ebaefektiivne ja võib mõjutada kasutajakogemust. Mõelge kasutajatele erinevates geograafilistes asukohtades; kui Ameerika kasutaja uuendab oma profiili, ei tohiks Euroopa kasutaja andmeid kuvav komponent *mitte* uuesti renderduda.

Miks on uuesti renderdamine oluline

Mõju jõudlusele: Ebavajalikud uuesti renderdamised tarbivad väärtuslikke protsessori tsükleid, mis viib aeglasema renderdamise ja vähem reageeriva kasutajaliideseni. See on eriti märgatav vähem võimsatel seadmetel ja keerukate komponendipuudega rakendustes.
Raisatud ressursid: Komponentide uuesti renderdamine, mis ei ole muutunud, raiskab ressursse nagu mälu ja võrguriba, eriti andmete hankimisel või kulukate arvutuste tegemisel.
Kasutajakogemus: Aeglane ja mitte reageeriv kasutajaliides võib kasutajaid frustreerida ja viia halva kasutajakogemuseni.

Tutvustame Context Selectori Mustrit

Context Selectori muster lahendab ebavajalike uuesti renderdamiste probleemi, võimaldades komponentidel tellida ainult need konkreetsed Contexti osad, mida nad vajavad. See saavutatakse selektorfunktsiooni abil, mis eraldab vajalikud andmed Contexti väärtusest. Kui Contexti väärtus muutub, võrdleb React selektorfunktsiooni tulemusi. Kui valitud andmed ei ole muutunud (kasutades ranget võrdsust, ===), siis komponenti uuesti ei renderdata.

Kuidas see töötab

Määratlege Context: Looge React Context, kasutades React.createContext().
Looge Provider: Mähi oma rakendus või asjakohane osa Context Provideriga, et muuta Contexti väärtus selle lastele kättesaadavaks.
Rakendage Selektorid: Määratlege selektorfunktsioonid, mis eraldavad konkreetsed andmed Contexti väärtusest. Need funktsioonid on puhtad ja peaksid tagastama ainult vajalikud andmed.
Kasutage Selektorit: Kasutage kohandatud hooki (või teeki), mis kasutab useContext'i ja teie selektorfunktsiooni valitud andmete hankimiseks ja tellib muudatusi ainult nendes andmetes.

Context Selectori Mustri rakendamine

Mitmed teegid ja kohandatud rakendused võivad hõlbustada Context Selectori mustri kasutamist. Uurime levinud lähenemist, kasutades kohandatud hooki.

Näide: Lihtne kasutajakontekst

Vaatleme kasutajakonteksti järgmise struktuuriga:


const UserContext = React.createContext({
  name: 'John Doe',
  email: 'john.doe@example.com',
  country: 'USA',
  language: 'en',
  theme: 'light'
});

1. Contexti loomine


const UserContext = React.createContext({
  name: 'John Doe',
  email: 'john.doe@example.com',
  country: 'USA',
  language: 'en',
  theme: 'light'
});

2. Provideri loomine


const UserProvider = ({ children }) => {
  const [user, setUser] = React.useState({
    name: 'John Doe',
    email: 'john.doe@example.com',
    country: 'USA',
    language: 'en',
    theme: 'light'
  });

  const updateUser = (updates) => {
    setUser(prevUser => ({ ...prevUser, ...updates }));
  };

  const value = React.useMemo(() => ({ user, updateUser }), [user]);

  return (
    
      {children}
    
  );
};

3. Kohandatud hooki loomine selektoriga


import React from 'react';

function useUserContext() {
  const context = React.useContext(UserContext);
  if (!context) {
    throw new Error('useUserContext must be used within a UserProvider');
  }
  return context;
}

function useUserSelector(selector) {
  const context = useUserContext();
  const [selected, setSelected] = React.useState(() => selector(context.user));

  React.useEffect(() => {
    setSelected(selector(context.user)); // Initial selection
    const unsubscribe = context.updateUser;

    return () => {}; // No actual unsubscription needed in this simple example, see below for memoizing.
  }, [context.user, selector]);

  return selected;
}

Oluline märkus: Ülaltoodud `useEffect`'il puudub korrektne memoisatsioon. Kui `context.user` muutub, käivitub see *alati* uuesti, isegi kui valitud väärtus on sama. Tugeva, memoiseeritud selektori jaoks vaadake järgmist jaotist või teeke nagu `use-context-selector`.

4. Selektori hooki kasutamine komponendis


function UserName() {
  const name = useUserSelector(user => user.name);

  return Nimi: {name};
}

function UserEmail() {
  const email = useUserSelector(user => user.email);

  return E-post: {email};
}

function UserCountry() {
  const country = useUserSelector(user => user.country);

  return Riik: {country};
}

Selles näites renderdatakse komponendid UserName, UserEmail ja UserCountry uuesti ainult siis, kui nende valitud konkreetsed andmed (vastavalt nimi, e-posti aadress, riik) muutuvad. Kui kasutaja keele-eelistust uuendatakse, siis neid komponente *ei* renderdata uuesti, mis toob kaasa märkimisväärse jõudluse paranemise.

Selektorite ja väärtuste memoisatsioon: Optimeerimise jaoks hädavajalik

Selleks, et Context Selectori muster oleks tõeliselt tõhus, on memoisatsioon ülioluline. Ilma selleta võivad selektorfunktsioonid tagastada uusi objekte või massiive isegi siis, kui alusandmed pole semantiliselt muutunud, mis põhjustab ebavajalikke uuesti renderdamisi. Samamoodi on oluline tagada, et ka provideri väärtus oleks memoiseeritud.

Provideri väärtuse memoisatsioon `useMemo` abil

useMemo hooki saab kasutada väärtuse memoisatsiooniks, mis edastatakse UserContext.Provider'ile. See tagab, et provideri väärtus muutub ainult siis, kui aluseks olevad sõltuvused muutuvad.


const UserProvider = ({ children }) => {
  const [user, setUser] = React.useState({
    name: 'John Doe',
    email: 'john.doe@example.com',
    country: 'USA',
    language: 'en',
    theme: 'light'
  });

  const updateUser = (updates) => {
    setUser(prevUser => ({ ...prevUser, ...updates }));
  };

  // Memoiseeri väärtus, mis edastatakse providerile
  const value = React.useMemo(() => ({
    user,
    updateUser
  }), [user, updateUser]);

  return (
    
      {children}
    
  );
};

Selektorite memoisatsioon `useCallback` abil

Kui selektorfunktsioonid on määratletud otse komponendi sees, luuakse need igal renderdamisel uuesti, isegi kui need on loogiliselt samad. See võib nullida Context Selectori mustri eesmärgi. Selle vältimiseks kasutage selektorfunktsioonide memoisatsiooniks useCallback hooki.


function UserName() {
  // Memoiseeri selektorfunktsioon
  const nameSelector = React.useCallback(user => user.name, []);
  const name = useUserSelector(nameSelector);

  return Nimi: {name};
}

Süvavõrdlus ja muutumatud andmestruktuurid

Keerulisemate stsenaariumide puhul, kus Contexti andmed on sügavalt pesastatud või sisaldavad muutuvaid objekte, kaaluge muutumatute andmestruktuuride (nt Immutable.js, Immer) kasutamist või süvavõrdlusfunktsiooni rakendamist oma selektoris. See tagab, et muudatused tuvastatakse õigesti, isegi kui aluseks olevaid objekte on kohapeal muudetud.

Teegid Context Selectori Mustri jaoks

Mitmed teegid pakuvad valmislahendusi Context Selectori mustri rakendamiseks, lihtsustades protsessi ja pakkudes lisafunktsioone.

use-context-selector

use-context-selector on populaarne ja hästi hooldatud teek, mis on spetsiaalselt selleks otstarbeks loodud. See pakub lihtsat ja tõhusat viisi konkreetsete väärtuste valimiseks Contextist ja ebavajalike uuesti renderdamiste vältimiseks.

Paigaldamine:


npm install use-context-selector

Kasutamine:


import { useContextSelector } from 'use-context-selector';

function UserName() {
  const name = useContextSelector(UserContext, user => user.name);

  return Nimi: {name};
}

Valtio

Valtio on laiahaardelisem olekuhalduse teek, mis kasutab proksisid tõhusate olekuuuenduste ja valikuliste uuesti renderdamiste jaoks. See pakub olekuhaldusele teistsugust lähenemist, kuid sellega on võimalik saavutada sarnaseid jõudluseeliseid nagu Context Selectori mustriga.

Context Selectori Mustri eelised

Parem jõudlus: Vähendab ebavajalikke uuesti renderdamisi, mis viib reageerivama ja tõhusama rakenduseni.
Vähenenud mälukasutus: Takistab komponentidel tellimast ebavajalikke andmeid, vähendades mälujälge.
Suurenenud hooldatavus: Parandab koodi selgust ja hooldatavust, määratledes selgesõnaliselt iga komponendi andmesõltuvused.
Parem skaleeritavus: Muudab rakenduse skaleerimise lihtsamaks, kui komponentide arv ja oleku keerukus suurenevad.

Millal kasutada Context Selectori Mustrit

Context Selectori muster on eriti kasulik järgmistes stsenaariumides:

Suured Contexti väärtused: Kui teie Context salvestab suurt hulka andmeid ja komponendid vajavad neist vaid väikest osa.
Sagedased Contexti uuendused: Kui Contexti väärtust uuendatakse sageli ja soovite minimeerida uuesti renderdamisi.
Jõudluskriitilised komponendid: Kui teatud komponendid on jõudluse suhtes tundlikud ja soovite tagada, et need renderdatakse uuesti ainult siis, kui see on vajalik.
Keerulised komponendipuud: Sügavate komponendipuudega rakendustes, kus ebavajalikud uuesti renderdamised võivad levida mööda puud allapoole ja oluliselt mõjutada jõudlust. Kujutage ette globaalselt hajutatud meeskonda, kes töötab keeruka disainisüsteemi kallal; muudatused nupukomponendis ühes asukohas võivad käivitada uuesti renderdamisi kogu süsteemis, mõjutades arendajaid teistes ajavööndites.

Alternatiivid Context Selectori Mustrile

Kuigi Context Selectori muster on võimas tööriist, ei ole see ainus lahendus uuesti renderdamiste optimeerimiseks Reactis. Siin on mõned alternatiivsed lähenemised:

Redux: Redux on populaarne olekuhalduse teek, mis kasutab ühtset hoidlat ja ennustatavaid olekuuuendusi. See pakub peeneteralist kontrolli olekuuuenduste üle ja seda saab kasutada ebavajalike uuesti renderdamiste vältimiseks.
MobX: MobX on teine olekuhalduse teek, mis kasutab jälgitavaid andmeid ja automaatset sõltuvuste jälgimist. See renderdab komponente automaatselt uuesti ainult siis, kui nende sõltuvused muutuvad.
Zustand: Väike, kiire ja skaleeritav minimalistlik olekuhalduse lahendus, mis kasutab lihtsustatud flux-põhimõtteid.
Recoil: Recoil on Facebooki eksperimentaalne olekuhalduse teek, mis kasutab aatomeid ja selektoreid, et pakkuda peeneteralist kontrolli olekuuuenduste üle ja vältida ebavajalikke uuesti renderdamisi.
Komponentide kompositsioon: Mõnel juhul saate vältida globaalse oleku kasutamist täielikult, andes andmeid edasi komponentide prop'ide kaudu. See võib parandada jõudlust ja lihtsustada teie rakenduse arhitektuuri.

Kaalutlused globaalsete rakenduste jaoks

Globaalsele sihtrühmale rakenduste arendamisel arvestage Context Selectori mustri rakendamisel järgmiste teguritega:

Rahvusvahelistamine (i18n): Kui teie rakendus toetab mitut keelt, veenduge, et teie Context salvestaks kasutaja keele-eelistuse ja et teie komponendid renderduksid uuesti, kui keel muutub. Kuid rakendage Context Selectori mustrit, et vältida teiste komponentide ebavajalikku uuesti renderdamist. Näiteks valuutamuunduri komponent võib vajada uuesti renderdamist ainult siis, kui kasutaja asukoht muutub, mõjutades vaikevaluutat.
Lokaliseerimine (l10n): Arvestage kultuuriliste erinevustega andmete vormindamisel (nt kuupäeva- ja kellaajavormingud, numbriformaadid). Kasutage Contexti lokaliseerimisseadete salvestamiseks ja veenduge, et teie komponendid renderdaksid andmeid vastavalt kasutaja lokaadile. Jällegi, rakendage selektori mustrit.
Ajavööndid: Kui teie rakendus kuvab ajatundlikku teavet, käsitsege ajavööndeid õigesti. Kasutage Contexti kasutaja ajavööndi salvestamiseks ja veenduge, et teie komponendid kuvaksid aegu kasutaja kohalikus ajas.
Juurdepääsetavus (a11y): Veenduge, et teie rakendus oleks juurdepääsetav puuetega kasutajatele. Kasutage Contexti juurdepääsetavuse eelistuste (nt fondi suurus, värvikontrastsus) salvestamiseks ja veenduge, et teie komponendid austaksid neid eelistusi.

Kokkuvõte

React Context Selectori muster on väärtuslik tehnika uuesti renderdamiste optimeerimiseks ja jõudluse parandamiseks Reacti rakendustes. Lubades komponentidel tellida ainult need konkreetsed Contexti osad, mida nad vajavad, saate oluliselt vähendada ebavajalikke uuesti renderdamisi ja luua reageerivama ja tõhusama kasutajaliidese. Maksimaalse optimeerimise saavutamiseks ärge unustage oma selektoreid ja provideri väärtusi memoiseerida. Kaaluge teekide nagu use-context-selector kasutamist rakendamise lihtsustamiseks. Mida keerukamaid rakendusi te ehitate, seda olulisemaks muutub selliste tehnikate nagu Context Selectori mustri mõistmine ja kasutamine, et säilitada jõudlus ja pakkuda suurepärast kasutajakogemust, eriti globaalsele sihtrühmale.