Reageer Memo
Die gebruik memosal veroorsaak dat React die weergawe van 'n komponent oorslaan as sy rekwisiete nie verander het nie.
Dit kan prestasie verbeter.
Hierdie afdeling gebruik React Hooks. Sien die React Hooks- afdeling vir meer inligting oor Hooks.
Probleem
In hierdie voorbeeld word die Todoskomponent weergegee selfs wanneer die todos nie verander het nie.
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 jy op die inkrementknoppie klik, word die Todoskomponent weer vertoon.
As hierdie komponent kompleks was, kan dit prestasieprobleme veroorsaak.
Word gesertifiseer!
$95 INSKRIF
Oplossing
Om dit reg te stel, kan ons gebruik memo.
Gebruik memoom te verhoed dat die Todoskomponent onnodig weer gelewer word.
Wikkel die Todoskomponentuitvoer 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);
Nou word die Todoskomponent eers weergegee wanneer die todoswat deur rekwisiete aan hom oorgedra word, opgedateer word.