Haken useMemoreagieren
Der React useMemoHook gibt einen gespeicherten Wert zurück.
Stellen Sie sich Merken als Zwischenspeichern eines Werts vor, damit er nicht neu berechnet werden muss.
Der useMemoHook wird nur ausgeführt, wenn eine seiner Abhängigkeiten aktualisiert wird.
Dies kann die Leistung verbessern.
Die useMemound useCallbackHaken sind ähnlich. Der Hauptunterschied besteht darin, dass useMemoein gespeicherter Wert und
useCallbackeine gespeicherte Funktion zurückgegeben werden. Mehr dazu erfahren Sie useCallbackim Kapitel useCallback .
Leistung
Der useMemoHook kann verwendet werden, um zu verhindern, dass teure, ressourcenintensive Funktionen unnötig ausgeführt werden.
In diesem Beispiel haben wir eine teure Funktion, die bei jedem Rendering ausgeführt wird.
Wenn Sie die Anzahl ändern oder eine Aufgabe hinzufügen, werden Sie eine Verzögerung bei der Ausführung bemerken.
Beispiel:
Eine schlecht funktionierende Funktion. Die expensiveCalculationFunktion wird auf jedem Rendering ausgeführt:
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'));
Zertifiziert werden!
$ 95 REGISTRIEREN
Benutzen useMemo
Um dieses Leistungsproblem zu beheben, können wir den useMemoHook verwenden, um die expensiveCalculationFunktion zu speichern. Dadurch wird die Funktion nur bei Bedarf ausgeführt.
Wir können den teuren Funktionsaufruf mit umschließen useMemo.
Der useMemoHook akzeptiert einen zweiten Parameter, um Abhängigkeiten zu deklarieren. Die teure Funktion wird nur ausgeführt, wenn sich ihre Abhängigkeiten geändert haben.
Im folgenden Beispiel wird die teure Funktion nur ausgeführt, wenn count
Änderungen vorgenommen werden, und nicht, wenn Aufgaben hinzugefügt werden.
Beispiel:
Leistungsbeispiel mit dem useMemoHook:
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'));