Promemoria di reazione
L'utilizzo memofarà sì che React salti il rendering di un componente se i suoi oggetti di scena non sono cambiati.
Questo può migliorare le prestazioni.
Questa sezione utilizza React Hooks. Vedi la sezione React Hooks per maggiori informazioni sugli Hooks.
Problema
In questo esempio, il Todoscomponente esegue nuovamente il rendering anche quando le cose da fare non sono cambiate.
Esempio:
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;
Quando si fa clic sul pulsante di incremento, il Todoscomponente esegue nuovamente il rendering.
Se questo componente fosse complesso, potrebbe causare problemi di prestazioni.
Ottieni la certificazione!
ISCRIVITI A $95
Soluzione
Per risolvere questo problema, possiamo usare memo.
Utilizzare memoper evitare che il Todoscomponente venga riprodotto inutilmente.
Avvolgi l' Todosesportazione del componente in memo:
Esempio:
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);
Ora il Todoscomponente esegue nuovamente il rendering solo quando todosvengono aggiornati gli elementi che gli sono passati tramite gli oggetti di scena.