Reagovat useMemoHook


React useMemoHook vrací hodnotu uloženou v paměti.

Pamatování si představte jako ukládání hodnoty do mezipaměti, aby ji nebylo nutné přepočítávat.

Hook běží pouze tehdy, když se useMemoaktualizuje jedna z jeho závislostí.

To může zlepšit výkon.

The useMemoa useCallbackHooks jsou podobné. Hlavní rozdíl je v tom, že useMemovrací zapamatovanou hodnotu a useCallbackvrací zapamatovanou funkci. Více se můžete dozvědět useCallbackv kapitole useCallback .


Výkon

useMemoHook lze použít k tomu, aby drahé funkce náročné na zdroje zbytečně neběžely .

V tomto příkladu máme drahou funkci, která běží na každém renderu.

Při změně počtu nebo přidání úkolu zaznamenáte zpoždění v provádění.

Příklad:

Špatně vykonávaná funkce. Funkce expensiveCalculationběží na každém renderu:

import { useState } from "react";
import ReactDOM from "react-dom";

const App = () => {
  const [count, setCount] = useState(0);
  const [todos, setTodos] = useState([]);
  const calculation = expensiveCalculation(count);

  const increment = () => {
    setCount((c) => c + 1);
  };
  const addTodo = () => {
    setTodos((t) => [...t, "New Todo"]);
  };

  return (
    <div>
      <div>
        <h2>My Todos</h2>
        {todos.map((todo, index) => {
          return <p key={index}>{todo}</p>;
        })}
        <button onClick={addTodo}>Add Todo</button>
      </div>
      <hr />
      <div>
        Count: {count}
        <button onClick={increment}>+</button>
        <h2>Expensive Calculation</h2>
        {calculation}
      </div>
    </div>
  );
};

const expensiveCalculation = (num) => {
  console.log("Calculating...");
  for (let i = 0; i < 1000000000; i++) {
    num += 1;
  }
  return num;
};

ReactDOM.render(<App />, document.getElementById('root'));


w3schools CERTIFIED . 2022

Získejte certifikaci!

Dokončete moduly React, proveďte cvičení, udělejte zkoušku a získejte certifikaci w3schools!!

95 $ PŘIHLÁSIT SE

PoužitíuseMemo

K vyřešení tohoto problému s výkonem můžeme použít useMemoHook k zapamatování expensiveCalculationfunkce. To způsobí, že se funkce spustí pouze v případě potřeby.

Můžeme zabalit volání drahé funkce pomocí useMemo.

useMemoHook přijímá druhý parametr pro deklaraci závislostí . Drahá funkce se spustí pouze tehdy, když se změní její závislosti.

V následujícím příkladu bude drahá funkce spuštěna pouze tehdy, když count je změněna, a nikoli, když jsou přidány úkoly.

Příklad:

Příklad výkonu pomocí useMemoháku:

import { useState, useMemo } from "react";
import ReactDOM from "react-dom";

const App = () => {
  const [count, setCount] = useState(0);
  const [todos, setTodos] = useState([]);
  const calculation = useMemo(() => expensiveCalculation(count), [count]);

  const increment = () => {
    setCount((c) => c + 1);
  };
  const addTodo = () => {
    setTodos((t) => [...t, "New Todo"]);
  };

  return (
    <div>
      <div>
        <h2>My Todos</h2>
        {todos.map((todo, index) => {
          return <p key={index}>{todo}</p>;
        })}
        <button onClick={addTodo}>Add Todo</button>
      </div>
      <hr />
      <div>
        Count: {count}
        <button onClick={increment}>+</button>
        <h2>Expensive Calculation</h2>
        {calculation}
      </div>
    </div>
  );
};

const expensiveCalculation = (num) => {
  console.log("Calculating...");
  for (let i = 0; i < 1000000000; i++) {
    num += 1;
  }
  return num;
};

ReactDOM.render(<App />, document.getElementById('root'));