React teljesítményoptimalizálás: a useMemo, a useCallback és a React.memo elsajátítása

A React, a felhasználói felületek építésére szolgáló népszerű JavaScript-könyvtár, összetevő-alapú architektúrájáról és deklaratív stílusáról ismert. Ahogy azonban az alkalmazások egyre bonyolultabbá válnak, a teljesítmény aggodalomra adhat okot. Az összetevők felesleges újrarenderelése lassú teljesítményhez és rossz felhasználói élményhez vezethet. Szerencsére a React számos eszközt biztosít a teljesítmény optimalizálásához, beleértve a useMemo, a useCallback és a React.memo használatát. Ez az útmutató ezekbe a technikákba mélyed el, gyakorlati példákat és használható betekintést nyújtva, hogy segítsen Önnek nagyteljesítményű React alkalmazásokat építeni.

A React újrarenderelések megértése

Mielőtt belemerülnénk az optimalizálási technikákba, elengedhetetlen megérteni, hogy miért történnek újrarenderelések a Reactben. Amikor egy összetevő állapota vagy propjai megváltoznak, a React kiváltja az összetevő és esetleg a gyermekösszetevői újrarenderelését. A React virtuális DOM-ot használ a tényleges DOM hatékony frissítéséhez, de a túlzott újrarenderelések még mindig hatással lehetnek a teljesítményre, különösen az összetett alkalmazásokban. Képzeljen el egy globális e-kereskedelmi platformot, ahol a termékárak gyakran frissülnek. Optimalizálás nélkül még egy kis árváltozás is kiválthatja az újrarenderelést a teljes terméklistában, ami hatással van a felhasználói böngészésre.

Miért renderelnek újra az összetevők

Állapotváltozások: Amikor egy összetevő állapotát a useState vagy a useReducer segítségével frissítik, a React újrarendereli az összetevőt.
Prop változások: Ha egy összetevő új propokat kap a szülőösszetevőjétől, akkor újra fog renderelődni.
Szülő újrarenderelések: Amikor egy szülőösszetevő újrarenderelődik, a gyermekösszetevői is alapértelmezés szerint újrarenderelődnek, függetlenül attól, hogy a propjaik megváltoztak-e.
Kontextusváltozások: Azok az összetevők, amelyek React Kontextust használnak, újrarenderelődnek, amikor a kontextus értéke megváltozik.

A teljesítményoptimalizálás célja a felesleges újrarenderelések megakadályozása, annak biztosítása, hogy az összetevők csak akkor frissüljenek, amikor az adataik ténylegesen megváltoztak. Vegyünk egy olyan forgatókönyvet, amely valós idejű adatábrázolást foglal magában a tőzsdei elemzéshez. Ha a diagramösszetevők szükségtelenül újrarenderelődnek minden kisebb adatmódosításnál, az alkalmazás nem válaszol. Az újrarenderelések optimalizálása zökkenőmentes és érzékeny felhasználói élményt biztosít.

A useMemo bemutatása: a drága számítások memoizálása

A useMemo egy React hook, amely memoizálja egy számítás eredményét. A memoizálás egy optimalizálási technika, amely tárolja a drága függvényhívások eredményeit, és újra felhasználja ezeket az eredményeket, amikor ugyanazok a bemenetek ismét előfordulnak. Ez megakadályozza, hogy a függvényt szükségtelenül újra végre kelljen hajtani.

Mikor érdemes a useMemo-t használni?

Drága számítások: Amikor egy összetevőnek számításigényes számítást kell végeznie a propjai vagy állapota alapján.
Referenciális egyenlőség: Amikor egy értéket propként adunk át egy gyermekösszetevőnek, amely a referenciális egyenlőségre támaszkodik annak meghatározásához, hogy újra kell-e renderelni.

Hogyan működik a useMemo?

A useMemo két argumentumot fogad el:

Egy függvényt, amely elvégzi a számítást.
Függőségek tömbjét.

A függvény csak akkor fut le, ha a tömbben szereplő függőségek egyike megváltozik. Egyébként a useMemo a korábban memoizált értéket adja vissza.

Példa: A Fibonacci-sorozat kiszámítása

A Fibonacci-sorozat egy klasszikus példája a számításigényes számításnak. Hozzuk létre azt az összetevőt, amely a Fibonacci-számot a useMemo segítségével számítja ki.


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

function Fibonacci({ n }) {
  const fibonacciNumber = useMemo(() => {
    console.log('Fibonacci számítása...'); // Megmutatja, mikor fut a számítás
    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;

Ebben a példában a calculateFibonacci függvény csak akkor fut le, ha az n prop megváltozik. useMemo nélkül a függvény a Fibonacci összetevő minden újrarenderelésekor végrehajtásra kerülne, még akkor is, ha az n ugyanaz maradna. Képzelje el, hogy ez a számítás egy globális pénzügyi műszerfalon történik – a piac minden jelzése teljes újraszámítást okoz, ami jelentős késést eredményez. A useMemo ezt megakadályozza.

A useCallback bemutatása: Függvények memoizálása

A useCallback egy másik React hook, amely függvényeket memoizál. Megakadályozza egy új függvény-példány létrehozását minden rendereléskor, ami különösen hasznos lehet, ha visszahívásokat adunk át propként a gyermekösszetevőknek.

Mikor érdemes a useCallback-et használni?

Visszahívások propként való átadása: Ha egy függvényt propként adunk át egy gyermekösszetevőnek, amely React.memo vagy shouldComponentUpdate használ a re-renderelések optimalizálásához.
Eseménykezelők: Ha eseménykezelő függvényeket definiálunk egy összetevőn belül, hogy megakadályozzuk a gyermekösszetevők szükségtelen újrarenderelését.

Hogyan működik a useCallback?

A useCallback két argumentumot fogad el:

A memoizálandó függvényt.
Függőségek tömbjét.

A függvény csak akkor jön létre újra, ha a tömbben szereplő függőségek egyike megváltozik. Egyébként a useCallback ugyanazt a függvény-példányt adja vissza.

Példa: Egy gombnyomás kezelése

Lássuk egy gombbal rendelkező összetevőt, amely meghív egy visszahívási függvényt. Használni fogjuk a useCallback-et a visszahívási függvény memoizálásához.


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

function Button({ onClick, children }) {
  console.log('A gomb újrarenderelődött'); // Megmutatja, mikor renderelődik újra a Gomb
  return ;
}

const MemoizedButton = React.memo(Button);

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

  const handleClick = useCallback(() => {
    console.log('A gombra kattintottak');
    setCount((prevCount) => prevCount + 1);
  }, []); // Az üres függőségtömb azt jelenti, hogy a függvény csak egyszer jön létre

  return (
    
      Számláló: {count}
      Növelés
    
  );
}

export default App;

Ebben a példában a handleClick függvény csak egyszer jön létre, mert a függőségi tömb üres. Amikor az App összetevő újrarenderelődik a count állapotváltozás miatt, a handleClick függvény ugyanaz marad. A React.memo-val csomagolt MemoizedButton összetevő csak akkor renderelődik újra, ha a propjai megváltoznak. Mivel az onClick prop (handleClick) ugyanaz marad, a Button összetevő nem renderelődik újra szükségtelenül. Képzeljünk el egy interaktív térképalmazást. Minden alkalommal, amikor a felhasználó interakcióba lép, tucatnyi gombösszetevő érintett lehet. useCallback nélkül ezek a gombok feleslegesen újrarenderelődnének, ami lassú élményt eredményezne. A useCallback használata zökkenőmentesebb interakciót biztosít.

A React.memo bemutatása: Összetevők memoizálása

A React.memo egy magasabb rendű összetevő (HOC), amely memoizál egy funkcionális összetevőt. Megakadályozza az összetevő újrarajzolását, ha a propjai nem változtak. Ez hasonló a PureComponent-hez az osztályösszetevők esetében.

Mikor érdemes a React.memo-t használni?

Tiszta összetevők: Ha egy összetevő kimenete kizárólag a propjaitól függ, és nincs saját állapota.
Drága renderelés: Ha egy összetevő renderelési folyamata számításigényes.
Gyakori újrarenderelések: Ha egy összetevő gyakran újrarenderelődik, annak ellenére, hogy a propjai nem változtak.

Hogyan működik a React.memo?

A React.memo beburkol egy funkcionális összetevőt, és sekélyen összehasonlítja az előző és a következő propokat. Ha a propok megegyeznek, az összetevő nem fog újrarenderelődni.

Példa: Felhasználói profil megjelenítése

Hozzuk létre azt az összetevőt, amely megjeleníti a felhasználói profilt. Használni fogjuk a React.memo-t, hogy megakadályozzuk a felesleges újrarendereléseket, ha a felhasználó adatai nem változtak.


import React from 'react';

function UserProfile({ user }) {
  console.log('A UserProfile újrarenderelődött'); // Megmutatja, mikor renderelődik újra az összetevő
  return (
    
      Név: {user.name}
      E-mail: {user.email}
    
  );
}

const MemoizedUserProfile = React.memo(UserProfile, (prevProps, nextProps) => {
  // Egyéni összehasonlító függvény (opcionális)
  return prevProps.user.id === nextProps.user.id; // Csak akkor rendereljen újra, ha a felhasználó ID-je megváltozik
});

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

  const updateUser = () => {
    setUser({ ...user, name: 'Jane Doe' }); // A név megváltoztatása
  };

  return (
    
      
      
    
  );
}

export default App;

Ebben a példában a MemoizedUserProfile összetevő csak akkor renderelődik újra, ha az user.id prop megváltozik. Még akkor is, ha a user objektum egyéb tulajdonságai megváltoznak (pl. a név vagy az e-mail cím), az összetevő nem renderelődik újra, kivéve, ha az ID más. Ez az egyéni összehasonlító függvény a `React.memo`-n belül lehetővé teszi a finoman hangolt vezérlést arról, hogy mikor renderelődik újra az összetevő. Képzeljünk el egy közösségi média platformot, ahol a felhasználói profilok folyamatosan frissülnek. React.memo nélkül a felhasználó státuszának vagy profilképének megváltoztatása a profilösszetevő teljes újrarajzolását okozná, még akkor is, ha a fő felhasználói adatok változatlanok maradnak. A React.memo célzott frissítéseket tesz lehetővé, és jelentősen javítja a teljesítményt.

A useMemo, a useCallback és a React.memo kombinálása

Ez a három technika akkor a leghatékonyabb, ha együtt használjuk. A useMemo memoizálja a drága számításokat, a useCallback a függvényeket, a React.memo pedig az összetevőket. Ezen technikák kombinálásával jelentősen csökkentheti a React alkalmazásban a felesleges újrarenderelések számát.

Példa: Egy összetett összetevő

Hozzuk létre egy összetettebb összetevőt, amely bemutatja, hogyan lehet kombinálni ezeket a technikákat.


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

function ListItem({ item, onUpdate, onDelete }) {
  console.log(`A ListItem ${item.id} újrarenderelődött`); // Megmutatja, mikor renderelődik újra az összetevő
  return (
    
      {item.text}
      
      
    
  );
}

const MemoizedListItem = React.memo(ListItem);

function List({ items, onUpdate, onDelete }) {
  console.log('A Lista újrarenderelődött'); // Megmutatja, mikor renderelődik újra az összetevő
  return (
    
      {items.map((item) => (
        
      ))}
    
  );
}

const MemoizedList = React.memo(List);

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

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

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

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

  return (
    
      
    
  );
}

export default App;

Ebben a példában:

A useCallback segítségével memoizáljuk a handleUpdate és a handleDelete függvényeket, megakadályozva, hogy minden rendereléskor újra létrejöjjenek.
A useMemo segítségével memoizáljuk az items tömböt, megakadályozva, hogy a List összetevő újrarenderelődjön, ha a tömb referenciája nem változott.
A React.memo segítségével memoizáljuk a ListItem és a List összetevőket, megakadályozva, hogy újrarenderelődjenek, ha a propjaik nem változtak.

Ez a technika kombinációja biztosítja, hogy az összetevők csak akkor renderelődjenek újra, ha szükséges, ami jelentős teljesítményjavulást eredményez. Képzeljünk el egy nagyméretű projektmenedzsment eszközt, ahol a feladatlistákat folyamatosan frissítik, törlik és újrarendezik. Ezek az optimalizálások nélkül a feladatlista bármely apró változása újrarenderelések sorozatát indítaná el, ami az alkalmazást lassúvá és nem reagálóképessé tenné. A useMemo, a useCallback és a React.memo stratégiai használatával az alkalmazás összetett adatok és gyakori frissítések esetén is teljesítőképes maradhat.

További optimalizálási technikák

Míg a useMemo, a useCallback és a React.memo hatékony eszközök, nem ők az egyetlen lehetőségek a React teljesítményének optimalizálására. Íme néhány további technika, amelyet érdemes figyelembe venni:

Kódfelosztás: Bontsa az alkalmazást kisebb részekre, amelyek igény szerint betölthetők. Ez csökkenti a kezdeti betöltési időt, és javítja az általános teljesítményt.
Lusta betöltés: Csak akkor töltse be az összetevőket és az erőforrásokat, amikor szükség van rájuk. Ez különösen hasznos lehet a képek és egyéb nagyméretű elemek esetében.
Virtualizálás: Csak egy nagyméretű lista vagy táblázat látható részét renderelje. Ez jelentősen javíthatja a teljesítményt a nagy adathalmazokkal való foglalkozás során. Az olyan könyvtárak, mint a react-window és a react-virtualized, segíthetnek ebben.
Debouncing és Throttling: Korlátozza a függvények végrehajtásának sebességét. Ez hasznos lehet olyan események kezeléséhez, mint a görgetés és az átméretezés.
Immutabilitás: Használjon immutábilis adatszerkezeteket a véletlen mutációk elkerülése és a változásérzékelés egyszerűsítése érdekében.

Globális megfontolások az optimalizáláshoz

A React alkalmazások globális közönség számára történő optimalizálásakor fontos figyelembe venni az olyan tényezőket, mint a hálózati késleltetés, az eszköz képességei és a lokalizáció. Íme néhány tipp:

Tartalomkézbesítő hálózatok (CDN-ek): Használjon CDN-t a statikus elemeknek a felhasználóihoz közelebb eső helyekről történő kiszolgálásához. Ez csökkenti a hálózati késleltetést, és javítja a betöltési időt.
Képoptimalizálás: Optimalizálja a képeket a különböző képernyőméretekhez és felbontásokhoz. Használjon tömörítési technikákat a fájlméretek csökkentéséhez.
Lokalizáció: Csak a szükséges nyelvi erőforrásokat töltse be az egyes felhasználók számára. Ez csökkenti a kezdeti betöltési időt, és javítja a felhasználói élményt.
Adaptív betöltés: Érzékelje a felhasználó hálózati kapcsolatát és az eszköz képességeit, és ennek megfelelően állítsa be az alkalmazás viselkedését. Például letilthatja az animációkat, vagy csökkentheti a kép minőségét azoknál a felhasználóknál, akik lassú hálózati kapcsolattal vagy régebbi eszközökkel rendelkeznek.

Konklúzió

A React alkalmazások teljesítményének optimalizálása elengedhetetlen a zökkenőmentes és érzékeny felhasználói élmény biztosításához. A useMemo, a useCallback és a React.memo technikáinak elsajátításával, valamint a globális optimalizálási stratégiák figyelembe vételével nagyteljesítményű React alkalmazásokat építhet, amelyek a sokszínű felhasználói bázis igényeinek megfelelően méretezhetők. Ne feledje, hogy profilozza az alkalmazását a teljesítmény szűk keresztmetszeteinek azonosításához, és stratégiailag alkalmazza ezeket az optimalizálási technikákat. Ne optimalizáljon idő előtt – összpontosítson azokra a területekre, ahol a legnagyobb hatást érheti el.

Ez az útmutató szilárd alapot nyújt a React teljesítményoptimalizálásának megértéséhez és megvalósításához. A React alkalmazások fejlesztésének folytatása során ne felejtse el előtérbe helyezni a teljesítményt, és folyamatosan keressen új módszereket a felhasználói élmény javítására.