Mémo de réaction
Utiliser memoentraînera React à ignorer le rendu d'un composant si ses accessoires n'ont pas changé.
Cela peut améliorer les performances.
Cette section utilise React Hooks. Voir la section React Hooks pour plus d'informations sur les Hooks.
Problème
Dans cet exemple, le Todoscomposant s'affiche à nouveau même lorsque les tâches n'ont pas changé.
Exemple:
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;
Lorsque vous cliquez sur le bouton d'incrémentation, le Todoscomposant est restitué.
Si ce composant était complexe, il pourrait entraîner des problèmes de performances.
Obtenir une certification!
95 $ S'INSCRIRE
Solution
Pour résoudre ce problème, nous pouvons utiliser memo.
Utilisez memo-le pour éviter que le Todoscomposant ne soit restitué inutilement.
Enveloppez l' Todosexportation du composant dansmemo :
Exemple:
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);
Désormais, le Todoscomposant ne se restitue que lorsque les éléments todosqui lui sont transmis via les accessoires sont mis à jour.