บันทึกโต้ตอบ
การใช้memoจะทำให้ React ข้ามการแสดงส่วนประกอบหากอุปกรณ์ประกอบฉากไม่เปลี่ยนแปลง
นี้สามารถปรับปรุงประสิทธิภาพการทำงาน
ส่วนนี้ใช้ React Hooks ดูส่วนReact Hooksสำหรับข้อมูลเพิ่มเติมเกี่ยวกับ Hooks
ปัญหา
ในตัวอย่างนี้Todosคอมโพเนนต์จะแสดงผลใหม่แม้ว่า todos จะไม่มีการเปลี่ยนแปลง
ตัวอย่าง:
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;
เมื่อคุณคลิกปุ่มเพิ่มTodosส่วนประกอบจะแสดงผลใหม่
หากส่วนประกอบนี้ซับซ้อน อาจทำให้เกิดปัญหาด้านประสิทธิภาพได้
สารละลาย
ในการแก้ไขปัญหานี้ เราสามารถใช้memo.
ใช้memoเพื่อป้องกันไม่ให้Todosส่วนประกอบแสดงผลซ้ำโดยไม่จำเป็น
ห่อการTodosส่งออกส่วนประกอบในmemo:
ตัวอย่าง:
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);
ตอนนี้Todosคอมโพเนนต์แสดงผลใหม่เฉพาะเมื่อtodosมีการอัปเดตองค์ประกอบที่ส่งผ่านไปยังอุปกรณ์ประกอบฉาก