Bản ghi nhớ phản ứng
Việc sử dụng memosẽ khiến React bỏ qua việc hiển thị một thành phần nếu các đạo cụ của nó không thay đổi.
Điều này có thể cải thiện hiệu suất.
Phần này sử dụng React Hooks. Xem phần React Hooks để biết thêm thông tin về Hooks.
Vấn đề
Trong ví dụ này, Todosthành phần hiển thị lại ngay cả khi các việc cần làm không thay đổi.
Thí dụ:
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;
Khi bạn nhấp vào nút tăng, Todosthành phần sẽ hiển thị lại.
Nếu thành phần này phức tạp, nó có thể gây ra các vấn đề về hiệu suất.
Được chứng nhận!
$ 95 GHI DANH
Giải pháp
Để khắc phục điều này, chúng ta có thể sử dụng memo.
Sử dụng memođể giữ cho Todosthành phần khỏi kết xuất không cần thiết.
Kết Todoshợp xuất thành phần trong memo:
Thí dụ:
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);
Bây giờ Todosthành phần chỉ hiển thị lại khi thành phần todosđược chuyển đến nó thông qua các đạo cụ được cập nhật.