Reageer memo
Het gebruik memozorgt ervoor dat React het renderen van een component overslaat als de rekwisieten niet zijn gewijzigd.
Dit kan de prestaties verbeteren.
In deze sectie worden React Hooks gebruikt. Zie het gedeelte React Hooks voor meer informatie over Hooks.
Probleem
In dit voorbeeld wordt de Todoscomponent opnieuw weergegeven, zelfs als de taken niet zijn gewijzigd.
Voorbeeld:
index.js:
import { useState } from "react";
import ReactDOM from "react-dom";
import Todos from "./Todos";
const App = () => {
const [count, setCount] = useState(0);
const [todos, setTodos] = useState(["todo 1", "todo 2"]);
const increment = () => {
setCount((c) => c + 1);
};
return (
<>
<Todos todos={todos} />
<hr />
<div>
Count: {count}
<button onClick={increment}>+</button>
</div>
</>
);
};
ReactDOM.render(<App />, document.getElementById('root'));
Todos.js:
const Todos = ({ todos }) => {
console.log("child render");
return (
<>
<h2>My Todos</h2>
{todos.map((todo, index) => {
return <p key={index}>{todo}</p>;
})}
</>
);
};
export default Todos;
Wanneer u op de knop Verhogen klikt, wordt het Todosonderdeel opnieuw weergegeven.
Als dit onderdeel complex is, kan dit prestatieproblemen veroorzaken.
Gecertificeerd!
$95 INSCHRIJVEN
Oplossing
Om dit op te lossen, kunnen we memo.
Gebruik memodit om te voorkomen dat het Todosonderdeel onnodig opnieuw wordt weergegeven.
Wikkel de Todoscomponentexport in memo:
Voorbeeld:
index.js:
import { useState } from "react";
import ReactDOM from "react-dom";
import Todos from "./Todos";
const App = () => {
const [count, setCount] = useState(0);
const [todos, setTodos] = useState(["todo 1", "todo 2"]);
const increment = () => {
setCount((c) => c + 1);
};
return (
<>
<Todos todos={todos} />
<hr />
<div>
Count: {count}
<button onClick={increment}>+</button>
</div>
</>
);
};
ReactDOM.render(<App />, document.getElementById('root'));
Todos.js:
import { memo } from "react";
const Todos = ({ todos }) => {
console.log("child render");
return (
<>
<h2>My Todos</h2>
{todos.map((todo, index) => {
return <p key={index}>{todo}</p>;
})}
</>
);
};
export default memo(Todos);
Nu wordt het Todosonderdeel alleen opnieuw weergegeven als de todosgegevens die eraan worden doorgegeven via rekwisieten, worden bijgewerkt.