Reaguj na notatki
Użycie memo
spowoduje, że React pominie renderowanie komponentu, jeśli jego właściwości nie uległy zmianie.
Może to poprawić wydajność.
Ta sekcja używa haków reakcji. Zobacz sekcję Hooki reakcji , aby uzyskać więcej informacji na temat hooków.
Problem
W tym przykładzie Todos
komponent jest ponownie renderowany, nawet jeśli zadania do wykonania nie uległy zmianie.
Przykład:
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;
Po kliknięciu przycisku zwiększania Todos
komponent jest ponownie renderowany.
Jeśli ten składnik był złożony, może powodować problemy z wydajnością.
Zostać certyfikowanym!
95 $ ZAPISZ
Rozwiązanie
Aby to naprawić, możemy użyć memo
.
Użyj memo
, aby zapobiec Todos
niepotrzebnemu ponownemu renderowaniu komponentu.
Zapakuj Todos
eksport komponentów w memo
:
Przykład:
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);
Teraz Todos
komponent jest ponownie renderowany tylko wtedy, gdy te todos
, które są do niego przekazywane przez właściwości, są aktualizowane.