React Context Selector-mønsteret: Optimalisering av re-renderinger for bedre ytelse

Reacts Context API gir en kraftig måte å håndtere global tilstand i applikasjonene dine. Imidlertid oppstår en vanlig utfordring ved bruk av Context: unødvendige re-renderinger. Når Context-verdien endres, vil alle komponenter som konsumerer den Context-en re-rendere, selv om de bare er avhengige av en liten del av Context-dataene. Dette kan føre til ytelsesflaskehalser, spesielt i større og mer komplekse applikasjoner. Context Selector-mønsteret tilbyr en løsning ved å la komponenter abonnere kun på de spesifikke delene av Context de trenger, noe som reduserer unødvendige re-renderinger betydelig.

Forstå problemet: Unødvendige re-renderinger

La oss illustrere dette med et eksempel. Se for deg en e-handelsapplikasjon som lagrer brukerinformasjon (navn, e-post, land, språkpreferanse, handlekurv) i en Context-provider. Hvis brukeren oppdaterer sin språkpreferanse, vil alle komponenter som bruker Context, inkludert de som bare viser brukerens navn, re-rendere. Dette er ineffektivt og kan påvirke brukeropplevelsen. Tenk på brukere i forskjellige geografiske områder; hvis en amerikansk bruker oppdaterer profilen sin, skal en komponent som viser detaljene til en europeisk bruker *ikke* re-rendere.

Hvorfor re-renderinger er viktig

Ytelsespåvirkning: Unødvendige re-renderinger bruker verdifulle CPU-sykluser, noe som fører til tregere rendering og et mindre responsivt brukergrensesnitt. Dette er spesielt merkbart på enheter med lavere ytelse og i applikasjoner med komplekse komponenttrær.
Bortkastede ressurser: Å re-rendere komponenter som ikke har endret seg, kaster bort ressurser som minne og nettverksbåndbredde, spesielt ved henting av data eller utføring av kostbare beregninger.
Brukeropplevelse: Et tregt og lite responsivt brukergrensesnitt kan frustrere brukere og føre til en dårlig brukeropplevelse.

Introduksjon til Context Selector-mønsteret

Context Selector-mønsteret løser problemet med unødvendige re-renderinger ved å la komponenter abonnere kun på de spesifikke delene av Context de trenger. Dette oppnås ved å bruke en selektorfunksjon som trekker ut de nødvendige dataene fra Context-verdien. Når Context-verdien endres, sammenligner React resultatene fra selektorfunksjonen. Hvis de valgte dataene ikke har endret seg (ved bruk av streng likhet, ===), vil komponenten ikke re-rendere.

Hvordan det fungerer

Definer Context: Opprett en React Context ved hjelp av React.createContext().
Opprett en Provider: Pakk inn applikasjonen din eller den relevante delen med en Context Provider for å gjøre Context-verdien tilgjengelig for underordnede komponenter.
Implementer selektorer: Definer selektorfunksjoner som trekker ut spesifikke data fra Context-verdien. Disse funksjonene er rene og skal kun returnere nødvendige data.
Bruk selektoren: Bruk en egendefinert hook (eller et bibliotek) som utnytter useContext og selektorfunksjonen din for å hente de valgte dataene og abonnere på endringer kun i disse dataene.

Implementering av Context Selector-mønsteret

Flere biblioteker og egendefinerte implementasjoner kan forenkle bruken av Context Selector-mønsteret. La oss utforske en vanlig tilnærming ved hjelp av en egendefinert hook.

Eksempel: En enkel UserContext

Se for deg en bruker-context med følgende struktur:


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

1. Opprette Context


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

2. Opprette Provider


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. Opprette en egendefinert hook med en selektor


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)); // Innledende valg
    const unsubscribe = context.updateUser;

    return () => {}; // Ingen faktisk avmelding er nødvendig i dette enkle eksempelet, se nedenfor for memoizing.
  }, [context.user, selector]);

  return selected;
}

Viktig merknad: useEffect-eksempelet over mangler skikkelig memoization. Når context.user endres, kjører den *alltid* på nytt, selv om den valgte verdien er den samme. For en robust, memoized selektor, se neste avsnitt eller biblioteker som use-context-selector.

4. Bruke selektor-hooken i en komponent


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

  return Navn: {name};
}

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

  return E-post: {email};
}

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

  return Land: {country};
}

I dette eksempelet vil UserName-, UserEmail- og UserCountry-komponentene kun re-rendere når de spesifikke dataene de velger (henholdsvis navn, e-post, land) endres. Hvis brukerens språkpreferanse oppdateres, vil disse komponentene *ikke* re-rendere, noe som fører til betydelige ytelsesforbedringer.

Memoizing av selektorer og verdier: Essensielt for optimalisering

For at Context Selector-mønsteret skal være virkelig effektivt, er memoization avgjørende. Uten det kan selektorfunksjoner returnere nye objekter eller arrays selv om de underliggende dataene ikke har endret seg semantisk, noe som fører til unødvendige re-renderinger. Det er også viktig å sørge for at provider-verdien er memoized.

Memoizing av provider-verdien med `useMemo`

useMemo-hooken kan brukes til å memoize verdien som sendes til UserContext.Provider. Dette sikrer at provider-verdien kun endres når de underliggende avhengighetene endres.


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 }));
  };

  // Memoize verdien som sendes til provideren
  const value = React.useMemo(() => ({
    user,
    updateUser
  }), [user, updateUser]);

  return (
    
      {children}
    
  );
};

Memoizing av selektorer med `useCallback`

Hvis selektorfunksjonene defineres inline i en komponent, vil de bli gjenskapt ved hver rendering, selv om de er logisk sett de samme. Dette kan motvirke formålet med Context Selector-mønsteret. For å forhindre dette, bruk useCallback-hooken til å memoize selektorfunksjonene.


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

  return Navn: {name};
}

Dyp sammenligning og uforanderlige datastrukturer

For mer komplekse scenarioer, der dataene i Context er dypt nestet eller inneholder foranderlige (mutable) objekter, bør du vurdere å bruke uforanderlige (immutable) datastrukturer (f.eks. Immutable.js, Immer) eller implementere en dyp sammenligningsfunksjon i selektoren din. Dette sikrer at endringer oppdages korrekt, selv når de underliggende objektene er blitt endret på stedet.

Biblioteker for Context Selector-mønsteret

Flere biblioteker tilbyr ferdige løsninger for implementering av Context Selector-mønsteret, noe som forenkler prosessen og gir ekstra funksjonalitet.

use-context-selector

use-context-selector er et populært og godt vedlikeholdt bibliotek som er spesielt utviklet for dette formålet. Det tilbyr en enkel og effektiv måte å velge spesifikke verdier fra en Context og forhindre unødvendige re-renderinger.

Installasjon:


npm install use-context-selector

Bruk:


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

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

  return Navn: {name};
}

Valtio

Valtio er et mer omfattende tilstandshåndteringsbibliotek som bruker proxyer for effektive tilstandsoppdateringer og selektive re-renderinger. Det gir en annerledes tilnærming til tilstandshåndtering, men kan brukes til å oppnå lignende ytelsesfordeler som Context Selector-mønsteret.

Fordeler med Context Selector-mønsteret

Forbedret ytelse: Reduserer unødvendige re-renderinger, noe som fører til en mer responsiv og effektiv applikasjon.
Redusert minnebruk: Forhindrer komponenter i å abonnere på unødvendige data, noe som reduserer minneavtrykket.
Økt vedlikeholdbarhet: Forbedrer kodens klarhet og vedlikeholdbarhet ved å eksplisitt definere dataavhengighetene til hver komponent.
Bedre skalerbarhet: Gjør det enklere å skalere applikasjonen din etter hvert som antall komponenter og kompleksiteten i tilstanden øker.

Når bør man bruke Context Selector-mønsteret?

Context Selector-mønsteret er spesielt gunstig i følgende scenarioer:

Store Context-verdier: Når din Context lagrer en stor mengde data, og komponenter bare trenger en liten del av dem.
Hyppige Context-oppdateringer: Når Context-verdien oppdateres ofte, og du ønsker å minimere re-renderinger.
Ytelseskritiske komponenter: Når visse komponenter er ytelsessensitive, og du vil sikre at de bare re-renderes når det er nødvendig.
Komplekse komponenttrær: I applikasjoner med dype komponenttrær, der unødvendige re-renderinger kan forplante seg nedover treet og påvirke ytelsen betydelig. Tenk deg et globalt distribuert team som jobber med et komplekst designsystem; endringer i en knappekomponent på ett sted kan utløse re-renderinger i hele systemet, noe som påvirker utviklere i andre tidssoner.

Alternativer til Context Selector-mønsteret

Selv om Context Selector-mønsteret er et kraftig verktøy, er det ikke den eneste løsningen for å optimalisere re-renderinger i React. Her er noen alternative tilnærminger:

Redux: Redux er et populært tilstandshåndteringsbibliotek som bruker en enkelt 'store' og forutsigbare tilstandsoppdateringer. Det gir finkornet kontroll over tilstandsoppdateringer og kan brukes til å forhindre unødvendige re-renderinger.
MobX: MobX er et annet tilstandshåndteringsbibliotek som bruker observerbare data og automatisk avhengighetssporing. Det re-renderer automatisk komponenter bare når deres avhengigheter endres.
Zustand: En liten, rask og skalerbar 'bearbones' løsning for tilstandshåndtering som bruker forenklede flux-prinsipper.
Recoil: Recoil er et eksperimentelt tilstandshåndteringsbibliotek fra Facebook som bruker atomer og selektorer for å gi finkornet kontroll over tilstandsoppdateringer og forhindre unødvendige re-renderinger.
Komponentkomposisjon: I noen tilfeller kan du unngå å bruke global tilstand helt ved å sende data nedover gjennom komponent-props. Dette kan forbedre ytelsen og forenkle applikasjonens arkitektur.

Hensyn for globale applikasjoner

Når du utvikler applikasjoner for et globalt publikum, bør du vurdere følgende faktorer ved implementering av Context Selector-mønsteret:

Internasjonalisering (i18n): Hvis applikasjonen din støtter flere språk, sørg for at din Context lagrer brukerens språkpreferanse og at komponentene dine re-renderes når språket endres. Bruk imidlertid Context Selector-mønsteret for å forhindre at andre komponenter re-renderes unødvendig. For eksempel kan en valutakalkulatorkomponent bare trenge å re-rendere når brukerens posisjon endres, noe som påvirker standardvalutaen.
Lokalisering (l10n): Vurder kulturelle forskjeller i dataformatering (f.eks. dato- og tidsformater, tallformater). Bruk Context til å lagre lokaliseringsinnstillinger og sørg for at komponentene dine gjengir data i henhold til brukerens lokalitet. Igjen, anvend selektor-mønsteret.
Tidssoner: Hvis applikasjonen din viser tidssensitiv informasjon, håndter tidssoner korrekt. Bruk Context til å lagre brukerens tidssone og sørg for at komponentene dine viser tider i brukerens lokale tid.
Tilgjengelighet (a11y): Sørg for at applikasjonen din er tilgjengelig for brukere med nedsatt funksjonsevne. Bruk Context til å lagre tilgjengelighetspreferanser (f.eks. skriftstørrelse, fargekontrast) og sørg for at komponentene dine respekterer disse preferansene.

Konklusjon

React Context Selector-mønsteret er en verdifull teknikk for å optimalisere re-renderinger og forbedre ytelsen i React-applikasjoner. Ved å la komponenter abonnere kun på de spesifikke delene av Context de trenger, kan du redusere unødvendige re-renderinger betydelig og skape et mer responsivt og effektivt brukergrensesnitt. Husk å memoize selektorene og provider-verdiene dine for maksimal optimalisering. Vurder biblioteker som use-context-selector for å forenkle implementeringen. Etter hvert som du bygger stadig mer komplekse applikasjoner, vil forståelse og bruk av teknikker som Context Selector-mønsteret være avgjørende for å opprettholde ytelse og levere en god brukeropplevelse, spesielt for et globalt publikum.