Bản ghi nhớ phản ứng
Sử dụng memo
sẽ khiến React bỏ qua việc hiển thị một thành phần nếu đạ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 Hook để biết thêm thông tin về Hook.
Vấn đề
Trong ví dụ này, thành phần Todos
hiển thị lại ngay cả khi todos không thay đổi.
Ví dụ:
index.js
:
import { useState } from "react"; import ReactDOM from "react-dom/client"; 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> </> ); }; const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<App />);
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, thành phần Todos
sẽ hiển thị lại.
Nếu thành phần này phức tạp, nó có thể gây ra vấn đề về hiệu suất.
Được chứng nhận!
$95 ĐĂNG KÝ
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 thành phần Todos
không hiển thị lại một cách không cần thiết.
Gói xuất thành phần Todos
trong memo
:
Ví dụ:
index.js
:
import { useState } from "react"; import ReactDOM from "react-dom/client"; 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> </> ); }; const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<App />);
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);
Giờ đây, thành phần Todos
chỉ hiển thị lại khi các todos
được chuyển đến nó thông qua props được cập nhật.