React Ytelsesoptimalisering: Mestre useMemo, useCallback og React.memo

React, et populært JavaScript-bibliotek for å bygge brukergrensesnitt, er kjent for sin komponentbaserte arkitektur og deklarative stil. Men etter hvert som applikasjoner vokser i kompleksitet, kan ytelse bli en bekymring. Unødvendige re-rendringer av komponenter kan føre til treg ytelse og en dårlig brukeropplevelse. Heldigvis tilbyr React flere verktøy for å optimalisere ytelsen, inkludert useMemo, useCallback og React.memo. Denne guiden går i dybden på disse teknikkene, og gir praktiske eksempler og handlingsrettet innsikt for å hjelpe deg med å bygge React-applikasjoner med høy ytelse.

Forstå React Re-rendringer

Før du dykker ned i optimaliseringsteknikkene, er det avgjørende å forstå hvorfor re-rendringer skjer i React. Når en komponents tilstand eller props endres, utløser React en re-rendring av den komponenten og, potensielt, dens barnekomponenter. React bruker en virtuell DOM for å effektivt oppdatere den faktiske DOM, men overdreven re-rendringer kan fortsatt påvirke ytelsen, spesielt i komplekse applikasjoner. Tenk deg en global e-handelsplattform der produktpriser oppdateres ofte. Uten optimalisering kan selv en liten prisendring utløse re-rendringer over hele produktlisten, noe som påvirker brukernes surfing.

Hvorfor Komponenter Re-render

Tilstands Endringer: Når en komponents tilstand oppdateres ved hjelp av useState eller useReducer, re-renderer React komponenten.
Prop Endringer: Hvis en komponent mottar nye props fra sin foreldrekomponent, vil den re-rendere.
Foreldre Re-rendringer: Når en foreldrekomponent re-renderer, vil dens barnekomponenter også re-rendere som standard, uavhengig av om deres props har endret seg.
Kontekst Endringer: Komponenter som bruker en React Context vil re-rendere når kontekstverdien endres.

Målet med ytelsesoptimalisering er å forhindre unødvendige re-rendringer, og sikre at komponenter bare oppdateres når dataene deres faktisk har endret seg. Tenk deg et scenario som involverer sanntids datavisualisering for aksjemarkedsanalyse. Hvis diagramkomponentene re-renderer unødvendig med hver mindre dataoppdatering, vil applikasjonen bli ikke-responsive. Optimalisering av re-rendringer vil sikre en jevn og responsiv brukeropplevelse.

Introduserer useMemo: Memoisering av Dyre Beregninger

useMemo er en React hook som memoiserer resultatet av en beregning. Memoisering er en optimaliseringsteknikk som lagrer resultatene av dyre funksjonskall og gjenbruker disse resultatene når de samme inngangene oppstår igjen. Dette forhindrer behovet for å utføre funksjonen unødvendig.

Når du skal Bruke useMemo

Dyre Beregninger: Når en komponent trenger å utføre en beregningsmessig intensiv beregning basert på sine props eller tilstand.
Referanselikhet: Når du sender en verdi som en prop til en barnekomponent som er avhengig av referanselikhet for å avgjøre om den skal re-rendere.

Hvordan useMemo Fungerer

useMemo tar to argumenter:

En funksjon som utfører beregningen.
En rekke avhengigheter.

Funksjonen utføres bare når en av avhengighetene i arrayet endres. Ellers returnerer useMemo den tidligere memoiserte verdien.

Eksempel: Beregning av Fibonacci-sekvensen

Fibonacci-sekvensen er et klassisk eksempel på en beregningsmessig intensiv beregning. La oss lage en komponent som beregner det n-te Fibonacci-tallet ved hjelp av useMemo.


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

function Fibonacci({ n }) {
  const fibonacciNumber = useMemo(() => {
    console.log('Beregner Fibonacci...'); // Viser når beregningen kjører
    function calculateFibonacci(num) {
      if (num <= 1) {
        return num;
      }
      return calculateFibonacci(num - 1) + calculateFibonacci(num - 2);
    }
    return calculateFibonacci(n);
  }, [n]);

  return Fibonacci({n}) = {fibonacciNumber};
}

function App() {
  const [number, setNumber] = useState(5);

  return (
    
       setNumber(parseInt(e.target.value))}
      />
      
    
  );
}

export default App;

I dette eksemplet utføres calculateFibonacci-funksjonen bare når n-propen endres. Uten useMemo vil funksjonen bli utført ved hver re-rendring av Fibonacci-komponenten, selv om n forble den samme. Tenk deg at denne beregningen skjer på et globalt finansielt dashbord - hvert tick i markedet forårsaker en fullstendig omberegning, noe som fører til betydelig forsinkelse. useMemo forhindrer det.

Introduserer useCallback: Memoisering av Funksjoner

useCallback er en annen React hook som memoiserer funksjoner. Det forhindrer opprettelsen av en ny funksjonsinstans ved hver rendring, noe som kan være spesielt nyttig når du sender callbacks som props til barnekomponenter.

Når du skal Bruke useCallback

Sende Callbacks som Props: Når du sender en funksjon som en prop til en barnekomponent som bruker React.memo eller shouldComponentUpdate for å optimalisere re-rendringer.
Hendelsesbehandlere: Når du definerer hendelsesbehandlerfunksjoner i en komponent for å forhindre unødvendige re-rendringer av barnekomponenter.

Hvordan useCallback Fungerer

useCallback tar to argumenter:

Funksjonen som skal memoiseres.
En rekke avhengigheter.

Funksjonen gjenskapes bare når en av avhengighetene i arrayet endres. Ellers returnerer useCallback den samme funksjonsinstansen.

Eksempel: Håndtering av et Knappeklikk

La oss lage en komponent med en knapp som utløser en callback-funksjon. Vi bruker useCallback for å memoisere callback-funksjonen.


import React, { useState, useCallback } from 'react';

function Button({ onClick, children }) {
  console.log('Knapp re-rendret'); // Viser når knappen re-renderes
  return ;
}

const MemoizedButton = React.memo(Button);

function App() {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    console.log('Knapp klikket');
    setCount((prevCount) => prevCount + 1);
  }, []); // Tom avhengighetsarray betyr at funksjonen bare opprettes én gang

  return (
    
      Antall: {count}
      Øk
    
  );
}

export default App;

I dette eksemplet opprettes handleClick-funksjonen bare én gang fordi avhengighetsarrayet er tomt. Når App-komponenten re-renderes på grunn av count-tilstands endringen, forblir handleClick-funksjonen den samme. MemoizedButton-komponenten, pakket inn med React.memo, vil bare re-rendere hvis propsene endres. Fordi onClick-propen (handleClick) forblir den samme, re-renderer ikke Button-komponenten unødvendig. Tenk deg en interaktiv kartapplikasjon. Hver gang en bruker samhandler, kan dusinvis av knappekomponenter bli påvirket. Uten useCallback vil disse knappene re-rendere unødvendig, noe som skaper en treg opplevelse. Ved å bruke useCallback sikres en jevnere interaksjon.

Introduserer React.memo: Memoisering av Komponenter

React.memo er en høyere ordens komponent (HOC) som memoiserer en funksjonell komponent. Det forhindrer at komponenten re-renderer hvis dens props ikke har endret seg. Dette ligner på PureComponent for klassekomponenter.

Når du skal Bruke React.memo

Pure Komponenter: Når en komponents utdata utelukkende er avhengig av dens props og den ikke har noen egen tilstand.
Dyr Rendring: Når en komponents gjengivelsesprosess er beregningsmessig dyr.
Hyppige Re-rendringer: Når en komponent ofte re-renderes selv om dens props ikke har endret seg.

Hvordan React.memo Fungerer

React.memo pakker inn en funksjonell komponent og sammenligner overfladisk de forrige og neste props. Hvis propsene er de samme, vil ikke komponenten re-rendere.

Eksempel: Vise en Brukerprofil

La oss lage en komponent som viser en brukerprofil. Vi bruker React.memo for å forhindre unødvendige re-rendringer hvis brukerens data ikke har endret seg.


import React from 'react';

function UserProfile({ user }) {
  console.log('UserProfile re-rendret'); // Viser når komponenten re-renderes
  return (
    
      Navn: {user.name}
      E-post: {user.email}
    
  );
}

const MemoizedUserProfile = React.memo(UserProfile, (prevProps, nextProps) => {
  // Egendefinert sammenligningsfunksjon (valgfritt)
  return prevProps.user.id === nextProps.user.id; // Bare re-render hvis bruker-ID-en endres
});

function App() {
  const [user, setUser] = React.useState({
    id: 1,
    name: 'John Doe',
    email: 'john.doe@example.com',
  });

  const updateUser = () => {
    setUser({ ...user, name: 'Jane Doe' }); // Endrer navnet
  };

  return (
    
      
      
    
  );
}

export default App;

I dette eksemplet vil MemoizedUserProfile-komponenten bare re-rendere hvis user.id-propen endres. Selv om andre egenskaper til user-objektet endres (f.eks. navn eller e-post), vil ikke komponenten re-rendere med mindre ID-en er forskjellig. Denne egendefinerte sammenligningsfunksjonen i `React.memo` gir mulighet for finkornet kontroll over når komponenten re-renderes. Tenk deg en sosial medieplattform med stadig oppdaterte brukerprofiler. Uten `React.memo` vil endring av en brukers status eller profilbilde føre til en fullstendig re-rendring av profilkomponenten, selv om kjerne brukerdetaljer forblir de samme. `React.memo` gir mulighet for målrettede oppdateringer og forbedrer ytelsen betydelig.

Kombinere useMemo, useCallback og React.memo

Disse tre teknikkene er mest effektive når de brukes sammen. useMemo memoiserer dyre beregninger, useCallback memoiserer funksjoner, og React.memo memoiserer komponenter. Ved å kombinere disse teknikkene kan du redusere antall unødvendige re-rendringer i React-applikasjonen din betydelig.

Eksempel: En Kompleks Komponent

La oss lage en mer kompleks komponent som demonstrerer hvordan du kombinerer disse teknikkene.


import React, { useState, useCallback, useMemo } from 'react';

function ListItem({ item, onUpdate, onDelete }) {
  console.log(`ListItem ${item.id} re-rendret`); // Viser når komponenten re-renderes
  return (
    
      {item.text}
      
      
    
  );
}

const MemoizedListItem = React.memo(ListItem);

function List({ items, onUpdate, onDelete }) {
  console.log('Liste re-rendret'); // Viser når komponenten re-renderes
  return (
    
      {items.map((item) => (
        
      ))}
    
  );
}

const MemoizedList = React.memo(List);

function App() {
  const [items, setItems] = useState([
    { id: 1, text: 'Element 1' },
    { id: 2, text: 'Element 2' },
    { id: 3, text: 'Element 3' },
  ]);

  const handleUpdate = useCallback((id) => {
    setItems((prevItems) =>
      prevItems.map((item) =>
        item.id === id ? { ...item, text: `Oppdatert ${item.text}` } : item
      )
    );
  }, []);

  const handleDelete = useCallback((id) => {
    setItems((prevItems) => prevItems.filter((item) => item.id !== id));
  }, []);

  const memoizedItems = useMemo(() => items, [items]);

  return (
    
      
    
  );
}

export default App;

I dette eksemplet:

useCallback brukes til å memoisere handleUpdate- og handleDelete-funksjonene, og forhindrer at de gjenskapes ved hver rendring.
useMemo brukes til å memoisere items-arrayet, og forhindrer at List-komponenten re-renderes hvis arrayreferansen ikke har endret seg.
React.memo brukes til å memoisere ListItem- og List-komponentene, og forhindrer at de re-renderes hvis propsene deres ikke har endret seg.

Denne kombinasjonen av teknikker sikrer at komponentene bare re-renderes når det er nødvendig, noe som fører til betydelige ytelsesforbedringer. Tenk deg et storskala prosjektstyringsverktøy der lister over oppgaver stadig oppdateres, slettes og omorganiseres. Uten disse optimaliseringene vil enhver liten endring i oppgavelisten utløse en kaskade av re-rendringer, noe som gjør applikasjonen treg og ikke-responsive. Ved strategisk å bruke useMemo, useCallback og React.memo, kan applikasjonen forbli performant selv med komplekse data og hyppige oppdateringer.

Ytterligere Optimaliseringsteknikker

Selv om useMemo, useCallback og React.memo er kraftige verktøy, er de ikke de eneste alternativene for å optimalisere React-ytelsen. Her er noen flere teknikker å vurdere:

Kodedeling: Del applikasjonen din inn i mindre biter som kan lastes inn ved behov. Dette reduserer den første lastetiden og forbedrer den generelle ytelsen.
Lat Lasting: Last inn komponenter og ressurser bare når de er nødvendige. Dette kan være spesielt nyttig for bilder og andre store ressurser.
Virtualisering: Render bare den synlige delen av en stor liste eller tabell. Dette kan forbedre ytelsen betydelig når du arbeider med store datasett. Biblioteker som react-window og react-virtualized kan hjelpe med dette.
Debouncing og Throttling: Begrens hastigheten som funksjoner utføres med. Dette kan være nyttig for å håndtere hendelser som rulling og endring av størrelse.
Uforanderlighet: Bruk uforanderlige datastrukturer for å unngå utilsiktede mutasjoner og forenkle endringsdeteksjon.

Globale Betraktninger for Optimalisering

Når du optimaliserer React-applikasjoner for et globalt publikum, er det viktig å vurdere faktorer som nettverksforsinkelse, enhetsfunksjoner og lokalisering. Her er noen tips:

Content Delivery Networks (CDNs): Bruk et CDN til å betjene statiske ressurser fra steder nærmere brukerne dine. Dette reduserer nettverksforsinkelsen og forbedrer lastetidene.
Bildeoptimalisering: Optimaliser bilder for forskjellige skjermstørrelser og oppløsninger. Bruk komprimeringsteknikker for å redusere filstørrelser.
Lokalisering: Last inn bare de nødvendige språkressursene for hver bruker. Dette reduserer den første lastetiden og forbedrer brukeropplevelsen.
Adaptiv Lasting: Oppdag brukerens nettverkstilkobling og enhetsfunksjoner, og juster applikasjonens atferd deretter. For eksempel kan du deaktivere animasjoner eller redusere bildekvaliteten for brukere med trege nettverkstilkoblinger eller eldre enheter.

Konklusjon

Optimalisering av React-applikasjonsytelse er avgjørende for å levere en jevn og responsiv brukeropplevelse. Ved å mestre teknikker som useMemo, useCallback og React.memo, og ved å vurdere globale optimaliseringsstrategier, kan du bygge React-applikasjoner med høy ytelse som skalerer for å møte behovene til en mangfoldig brukerbase. Husk å profilere applikasjonen din for å identifisere ytelsesflaskehalser og bruke disse optimaliseringsteknikkene strategisk. Ikke optimaliser for tidlig – fokuser på områder der du kan oppnå den mest betydelige innvirkningen.

Denne guiden gir et solid grunnlag for å forstå og implementere React-ytelsesoptimaliseringer. Etter hvert som du fortsetter å utvikle React-applikasjoner, husk å prioritere ytelse og kontinuerlig søke etter nye måter å forbedre brukeropplevelsen på.