การส่งพร็อพส์ต่อหลายชั้น: เมื่อใดจึงเป็นปัญหาและเมื่อใดจึงเหมาะสม

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

การส่งพร็อพผ่านลำดับชั้นคืออะไร

// Middle component: receives 'user' only to pass it down
function Layout({ user }) {
  return <Sidebar user={user} />;
}
// Sidebar: receives 'user' only to pass it down
function Sidebar({ user }) {
  return <UserAvatar user={user} />;
}
// UserAvatar: actually uses 'user'
function UserAvatar({ user }) {
  return <img src={user.avatarUrl} />;
}

เมื่อการส่งพร็อพผ่านลำดับชั้นเป็นเรื่องเหมาะสม

สัญญาณว่าการส่งพร็อพกลายเป็นปัญหา

การปรับโครงสร้างด้วยการประกอบคอมโพเนนต์

// Instead of drilling 'user' through Layout → Sidebar → UserAvatar,
// render UserAvatar at the top level and pass it as a slot:
function App() {
  return <Layout sidebar={<UserAvatar user={user} />} />;
}

การประกอบคอมโพเนนต์ช่วยลดการเชื่อมโยง

เมื่อใดควรใช้บริบท

เมื่อใดควรใช้ไลบรารีจัดการสถานะ

การไหลของข้อมูลย้อนกลับ

ลำดับการตัดสินใจ

ตรวจสอบความเข้าใจอย่างรวดเร็ว

สรุปทบทวน

ถัดไป