Reagieren Sie auf Memo
Die Verwendung memobewirkt, dass React das Rendern einer Komponente überspringt, wenn sich ihre Props nicht geändert haben.
Dies kann die Leistung verbessern.
Dieser Abschnitt verwendet React Hooks. Weitere Informationen zu Hooks finden Sie im Abschnitt React Hooks .
Problem
In diesem Beispiel wird die TodosKomponente auch dann neu gerendert, wenn sich die Todos nicht geändert haben.
Beispiel:
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;
Wenn Sie auf die Schaltfläche zum Erhöhen klicken, wird die TodosKomponente neu gerendert.
Wenn diese Komponente komplex wäre, könnte sie Leistungsprobleme verursachen.
Zertifiziert werden!
$ 95 REGISTRIEREN
Lösung
Um dies zu beheben, können wir memo.
Verwenden Sie diese Option memo, um zu verhindern, dass die TodosKomponente unnötig neu gerendert wird.
Schließen Sie den TodosKomponentenexport ein in memo:
Beispiel:
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);
Jetzt wird die TodosKomponente nur dann neu gerendert, wenn die todos, die ihr über Requisiten übergeben werden, aktualisiert werden.