Bài 13. Higher-Order Components (HOCs) trong ReactJS

Mở đầu 1.1. Định nghĩa Higher-Order Components (HOCs) 1.2. Mục tiêu và lợi ích của việc sử dụng HOCs 1.3. So sánh giữa HOCs và các pattern tái sử dụng logic khác (Hooks, Render Props)

Nguyên tắc cơ bản 2.1. HOCs là pure functions 2.2. Composition của HOCs 2.3. Props Injection

Tạo HOC đầu tiên 3.1. Sử dụng HOC để tái sử dụng logic - Ví dụ với loading spinner 3.2. Pass-through props và Overriding props 3.3. Hoisting: việc copy static methods giữa components

Sử dụng HOCs trong thực tế 4.1. HOCs trong các thư viện phổ biến (Redux connect, React Router withRouter) 4.2. Sử dụng HOCs để abstract UI logic - Ví dụ: Form validation 4.3. Conditional Rendering thông qua HOCs

Best Practices 5.1. Wrapper Hell và cách giảm bớt 5.2. Đặt tên cho HOCs 5.3. Props namespace: tránh xung đột props

Caveats và lưu ý 6.1. Refs và HOCs 6.2. Thứ tự áp dụng HOCs 6.3. Side-effects trong HOCs

Case Studies và Real-world examples 7.1. Authorization và Permission 7.2. Theming và Styling 7.3. Data Fetching

Kết luận và tài liệu tham khảo 8.1. Tóm tắt và những điểm quan trọng khi sử dụng HOCs 8.2. Tài liệu và bài viết đọc thêm