Pattern Kiến Trúc: Compound Components & Inversion of Control

Thiết kế hệ thống UI Component linh hoạt như các thẻ HTML nguyên bản (Select/Tabs/Accordion) bằng Compound Components và Context ngầm.

Core Mental Model

Compound Components tương tự như cặp thẻ `<select>` và `<option>` trong HTML: chúng chia sẻ state ngầm định với nhau nhưng cho phép lập trình viên tự do sắp xếp layout và JSX con theo ý muốn.

Key Takeaways & Principles

Tránh tạo ra 'God Component' với hàng chục boolean flags (`hasIcon`, `isSmall`, `showHeader`, `footerStyle`).

Compound Components sử dụng React Context nội bộ để giao tiếp giữa Component cha (Container) và các Component con (Item, Trigger, Content).

Inversion of Control (IoC) trao quyền quyết định cấu trúc và vị trí render cho người sử dụng component.

Advanced React Performance Patterns

advanced

20 phút

#Design Patterns

#Compound Components

#Inversion of Control