Reageer useMemoHook
Die React useMemoHook gee 'n gememoriseerde waarde terug.
Dink aan memorisering as om 'n waarde te kas sodat dit nie herbereken hoef te word nie.
Die useMemoHook loop slegs wanneer een van sy afhanklikhede opgedateer word.
Dit kan prestasie verbeter.
Die useMemoen useCallbackHooks is soortgelyk. Die belangrikste verskil is dat useMemo'n gememoriseerde waarde
useCallbackterugstuur en 'n gememoriseerde funksie. Jy kan meer oor leer useCallbackin die gebruik Terugbel hoofstuk .
Optrede
Die useMemoHook kan gebruik word om te verhoed dat duur, hulpbronintensiewe funksies onnodig loop.
In hierdie voorbeeld het ons 'n duur funksie wat op elke weergawe werk.
Wanneer jy die telling verander of 'n taak byvoeg, sal jy 'n vertraging in uitvoering opmerk.
Voorbeeld:
'n Swak presterende funksie. Die expensiveCalculationfunksie loop op elke weergawe:
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'));
Word gesertifiseer!
$95 INSKRIF
GebruikuseMemo
Om hierdie prestasieprobleem op te los, kan ons die useMemoHook gebruik om die expensiveCalculationfunksie te memoriseer. Dit sal veroorsaak dat die funksie slegs loop wanneer dit nodig is.
Ons kan die duur funksie oproep met useMemo.
Die useMemoHook aanvaar 'n tweede parameter om afhanklikhede te verklaar. Die duur funksie sal slegs loop wanneer sy afhanklikhede verander het.
In die volgende voorbeeld sal die duur funksie slegs loop wanneer count
dit verander word en nie wanneer todo's bygevoeg word nie.
Voorbeeld:
Prestasievoorbeeld met behulp van die 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'));