Component composition là gì và tại sao nên dùng thay vì inheritance (kế thừa)?

Component Composition là kỹ thuật xây dựng các component phức tạp bằng cách "lắp ráp" hoặc "chứa" các component đơn giản hơn (giống như Lego), thay vì dùng cơ chế kế thừa (inheritance) của Lập trình Hướng đối tượng (OOP).

Tại sao React khuyến khích Composition?
- Tránh sự phức tạp của cây kế thừa (Prototype Chain): Kế thừa nhiều tầng dễ dẫn đến spaghetti code, khó bảo trì và dễ bị ảnh hưởng dây chuyền (fragile base class).
- Linh hoạt và tái sử dụng cao: Bạn có thể dễ dàng thay đổi cấu trúc UI bằng cách thay đổi component con truyền vào mà không cần sửa code của component cha.
- Đúng với bản chất của UI: UI thường là sự bao bọc (một Dialog chứa nội dung bên trong) thay vì quan hệ "là một" (is-a) như OOP.

Các pattern phổ biến của Composition:
1. Containment (Bao bọc): Dùng prop đặc biệt children để truyền tuỳ ý các node con vào bên trong wrapper.

jsx

function Card({ children }) {
     return <div className="card-box">{children}</div>;
   }
   // Dùng:
   <Card> <h1>Tiêu đề</h1> <p>Nội dung...</p> </Card>

2. Specialization (Đặc biệt hóa): Tạo ra một component cụ thể bằng cách truyền cấu hình (props) cố định vào một component chung hơn.

jsx

function PrimaryButton(props) {
     return <Button {...props} color="blue" />;
   }

Xem toàn bộ React cùng filter theo level & chủ đề con.

Mở danh sách React

Các pattern phổ biến của Composition:
1. Containment (Bao bọc): Dùng prop đặc biệt children để truyền tuỳ ý các node con vào bên trong wrapper.

jsx

function Card({ children }) {
     return <div className="card-box">{children}</div>;
   }
   // Dùng:
   <Card> <h1>Tiêu đề</h1> <p>Nội dung...</p> </Card>

2. Specialization (Đặc biệt hóa): Tạo ra một component cụ thể bằng cách truyền cấu hình (props) cố định vào một component chung hơn.

jsx

function PrimaryButton(props) {
     return <Button {...props} color="blue" />;
   }