React Performance Optimization: UseMemo és useCallback használata valós idejű példában

Bevezetés:

A React nagy teljesítményéről ismert, de az alkalmazás növekedésével teljesítményproblémák léphetnek fel. A teljesítmény javításának egyik módja a memoizációs technikák, például használja a Memo-t és használja a visszahívást. Ebben a blogbejegyzésben megvizsgáljuk, hogyan használhatjuk a useMemo és a useCallback funkciókat a Counter összetevőben a teljesítmény javítása érdekében.

Egyszerű számlálókomponens a Reactban:

Tekintsünk egy egyszerű Számláló komponenst, amely növeli a számlálót, ha egy gombra kattintanak. A Számláló komponensnek van egy gyermekkomponense is, amely megjeleníti az aktuális számlálást.

import React, { useState } from 'react';
import DisplayCount from './DisplayCount';

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

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <button onClick={increment}>Increment</button>
      <DisplayCount count={count} />
    </div>
  );
}

export default Counter;

Az újrarendereléssel kapcsolatos probléma: Ebben az összetevőben a növekmény függvény minden meghívásakor a számláló állapota frissül, és a teljes Számláló komponens újra megjelenik, beleértve a gyermek DisplayCount összetevőt is. Ez szükségtelen újramegjelenítéseket okozhat, és ronthatja a teljesítményt.

Íme a megoldás az újramegjelenítés leállítására:

A useMemo és a useCallback használata: A gyermek DisplayCount komponens szükségtelen újramegjelenítésének elkerülése érdekében használhatjuk a useMemo vagy a useCallback függvényt. Vizsgáljuk meg, hogyan valósíthatjuk meg mindkét technikát a Counter komponenshez.

A useMemo használata:

import React, { useState, useMemo } from 'react';
import DisplayCount from './DisplayCount';

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

  const increment = () => {
    setCount(count + 1);
  };

  const memoizedCount = useMemo(() => count, [count]);

  return (
    <div>
      <button onClick={increment}>Increment</button>
      <DisplayCount count={memoizedCount} />
    </div>
  );
}

export default Counter;

Ebben a példában a useMemo-t használjuk a számérték memorizálására. A useMemo második argumentuma a függőségek tömbje. Ebben az esetben az egyetlen függőség a számlálási érték, így a memoizedCount érték csak akkor frissül, ha a számlálási érték megváltozik.

A useCallback használata:

import React, { useState, useCallback } from 'react';
import DisplayCount from './DisplayCount';

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

  const increment = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return (
    <div>
      <button onClick={increment}>Increment</button>
      <DisplayCount count={count} />
    </div>
  );
}

export default Counter;

Ebben a példában a useCallback funkciót használjuk a növekmény függvény memorizálására. A useCallback második argumentuma szintén függőségek tömbje. Ebben az esetben az egyetlen függőség a számlálási érték, így a növekedési függvény csak akkor jön létre újra, ha a számlálási érték megváltozik.

A useMemo és a useCallback használatának előnyei:

Mindkét esetben a gyermek DisplayCount komponens csak akkor jelenik meg újra, ha a számlálási érték megváltozik, megelőzve a szükségtelen újrarendereléseket és javítva a teljesítményt. Ezen memoizációs technikák használatával javíthatja React alkalmazásának teljesítményét.

Következtetés:

Összefoglalva, a useMemo és a useCallback hatékony memográfiai technikák, amelyek segíthetnek optimalizálni React alkalmazásai teljesítményét. Ha olyan összetevőkben használja őket, mint a Számláló összetevő, megakadályozhatja a szükségtelen újramegjelenítéseket, és javíthatja az alkalmazás általános teljesítményét.