คอมโพเนนต์บริสุทธิ์และการหลีกเลี่ยงผลข้างเคียงในการเรนเดอร์

ยินดีต้อนรับ

ฟังก์ชัน Pure คืออะไร

เหตุใดความบริสุทธิ์จึงสำคัญใน React

ความไม่บริสุทธิ์ที่พบบ่อย: การแก้ไขสถานะภายนอก

let totalRenders = 0; // external
function Counter() {
  totalRenders++; // BAD: side effect in render
  return <p>{totalRenders}</p>;
}

ความไม่บริสุทธิ์ที่พบบ่อย: การแก้ไขพร็อพส์

// Bad
function Badge({ user }) {
  user.name = user.name.toUpperCase(); // mutates prop!
  return <p>{user.name}</p>;
}

// Good
function Badge({ user }) {
  const displayName = user.name.toUpperCase();
  return <p>{displayName}</p>;
}

ความไม่บริสุทธิ์ที่พบบ่อย: การใช้ค่าสุ่มหรือวันที่ในการ render

// Bad
function Token() {
  const id = Math.random(); // different every render!
  return <p>{id}</p>;
}

// Good
function Token() {
  const [id] = useState(() => Math.random());
  return <p>{id}</p>;
}

การเรียกเอพีไอควรอยู่ใน useEffect

// Bad
function Profile({ id }) {
  fetch('/api/user/' + id); // runs on every render!
  return <div />;
}

// Good
useEffect(() => {
  fetch('/api/user/' + id).then(/*...*/);
}, [id]);

การแก้ไขข้อมูลภายในทำได้

function List({ items }) {
  const sorted = [...items]; // new array
  sorted.sort();             // mutating a local copy: OK
  return sorted.map(i => <li key={i}>{i}</li>);
}

ใช้ StrictMode เพื่อค้นหาความไม่บริสุทธิ์

คอมโพเนนต์ Pure และ React.memo

const Pure = React.memo(function Pure({ value }) {
  return <p>{value}</p>;
});

ตรวจสอบอย่างรวดเร็ว

สรุป

ถัดไป