Hooken useMemo gør det muligt at gemme resultatet af en funktion i hukommelsen, hvilket optimerer krævende beregninger ved at cache resultatet. Det er fordelagtigt, når der ofte udføres ressourcekrævende beregninger, som giver det samme resultat, hvis dataene ikke ændrer sig. Dette eliminerer behovet for overflødige genberegninger og resulterer i forbedret ydeevne.

Syntaks:

Der deklareres en ny variabel, såsom cachedValue, og denne tildeles hooken useMemo. Inden i parenteserne til hooken angives en funktion (f.eks. calculateValue), som udføres for at beregne den gemte værdi. Denne funktion kan være en hvilken som helst gyldig JavaScript-funktion. Derudover inkluderes et andet argument—et array kaldet dependencies—som består af de værdier, den gemte værdi afhænger af.

const cachedValue = useMemo(calculateValue, dependencies)

Når en af de afhængigheder, der er angivet i dependencies-arrayet, ændrer sig, vil den gemte værdi blive genberegnet. Hvis afhængighederne forbliver de samme mellem rendering, returnerer React den tidligere beregnede værdi uden genberegning.

Note

Denne optimering hjælper med at forbedre ydeevnen ved at undgå unødvendige beregninger og resulterer i en mere effektiv brugeroplevelse.

Eksempel 1

Opret komponenten ShoppingCart, som gemmer information om antallet af produkter, brugeren vælger. Derudover håndteres logikken for beregning af den samlede sum, der angiver det beløb, brugeren skal betale. Hovedformålet er at memoizere den samlede sum og kun genberegne den, når brugeren ændrer products-proppen, der sendes til denne komponent.

import React, { useMemo } from "react";

const ShoppingCart = ({ products }) => {
  const totalPrice = useMemo(() => {
    let sum = 0;
    for (const item of products) {
      sum += item.price * item.quantity;
    }
    return sum;
  }, [products]);

  return (
    <div>
      <h2>Shopping Cart</h2>
      <ul>
        {products.map(({ id, name, price, quantity }) => (
          <li key={id}>
            <p>
              <span>{name} -</span>
              <span>
                ${price} x {quantity}
              </span>
            </p>
          </li>
        ))}
      </ul>
      <h3>
        Total Price: <span>${totalPrice}</span>
      </h3>
    </div>
  );
};

Beregningen af totalPrice udføres inden for useMemo-hooken, hvilket forhindrer unødvendig genberegning ved hver genrendring af komponenten.

Linje for linje forklaring:

• Linje 1: Import af useMemo-hooken fra React-biblioteket for at udnytte dens funktionalitet;
• Linje 3: ShoppingCart-komponenten defineres ved brug af den konventionelle funktionssyntaks;
• Linje 4-10: Oprettelse af variablen totalPrice, som er ansvarlig for den samlede pris, brugeren skal betale. useMemo-hooken anvendes for at undgå beregninger ved hver rendering;
  • Linje 5-9: Inden i pilfunktionen, der gives til useMemo, implementeres logikken for beregning af den samlede sum. Hvert element i products-arrayet gennemløbes, og prisen ganges med quantity og lægges til variablen sum;
  • Linje 10: Afhængighedsarrayet [products] gives til useMemo-hooken. Dette angiver, at den memoiserede værdi kun skal genberegnes, hvis products-arrayet ændres.
• Linje 12-31: Markup for komponenten renderes.
  1. Linje 16: map-metoden bruges til at gengive hvert produkt i products-arrayet og oprette et tilsvarende JSX-element;
  2. Linje 17: key-attributten sættes for at sikre effektiv rendering af array-elementerne og hjælpe React med entydigt at identificere hvert element;

3. Linje 28: Værdien af variablen totalPrice vises i JSX, hvilket viser den beregnede samlede pris.

Fuld app-kode:

Bemærk

Det anbefales ikke at blande useEffect og useMemo hooks for at sikre klarhed og undgå forvirring. Den væsentlige forskel ligger i deres respektive formål: useEffect anvendes til håndtering af sideeffekter og komponentlivscyklus, mens useMemo memorerer ressourcekrævende beregninger for at forbedre ydeevnen.