Nội dung

26.13. React Refactor Quiz Đặt lại trách nhiệm component - tuhoc.cc

Trong video này, chúng ta sẽ cùng nhau đi sâu vào một bài học rất quan trọng trong React, đó là cách tổ chức logic và state sao cho đúng chỗ, dễ hiểu và dễ mở rộng, đặc biệt trong các ứng dụng có nhiều tương tác như quiz hay form nhiều bước. Ở phiên bản ban đầu của ứng dụng, component Quiz đang phải đảm nhiệm quá nhiều trách nhiệm cùng lúc. Nó vừa quản lý danh sách câu trả lời của người dùng, vừa theo dõi trạng thái chọn đáp án, vừa tự quyết định đúng hay sai, lại vừa xử lý các khoảng thời gian chờ để đổi màu đáp án. Trong khi đó, component Question lại chỉ đóng vai trò hiển thị giao diện, gần như không có logic riêng. Đây là một thiết kế phổ biến ở người mới học React, nhưng về lâu dài sẽ khiến mã nguồn khó đọc, khó bảo trì và rất dễ rối khi tính năng tăng lên. Video này tập trung giải quyết vấn đề đó bằng cách thay đổi tư duy thiết kế component. Thay vì để Quiz ôm toàn bộ logic, chúng ta chuyển những phần logic liên quan trực tiếp đến việc hỏi và trả lời về đúng nơi của nó, đó là component Question. Bởi vì Question là nơi hiển thị câu hỏi, các đáp án, trạng thái đã chọn và màu đúng sai, nên việc quản lý trạng thái trả lời ở đây là hợp lý và tự nhiên hơn rất nhiều. Trong quá trình refactor, bạn sẽ thấy rõ sự khác biệt giữa state cần chia sẻ và state chỉ nên tồn tại cục bộ. Quiz sau khi được tối ưu sẽ chỉ còn nhiệm vụ theo dõi người dùng đã trả lời bao nhiêu câu và xác định khi nào bài quiz kết thúc. Ngược lại, Question sẽ trở thành một component chủ động hơn, tự quản lý vòng đời của một câu hỏi từ lúc hiển thị, người dùng chọn đáp án, chờ hiển thị kết quả đúng sai, cho đến khi báo ngược lại cho Quiz để chuyển sang câu tiếp theo. Video cũng giải thích cặn kẽ các tình huống dễ gây nhầm lẫn cho người mới, chẳng hạn như việc thanh thời gian bị đứng khi trạng thái thay đổi, hay vì sao đôi khi ứng dụng lại tự động ghi nhận câu trả lời rỗng nếu không kiểm soát tốt logic timeout. Qua đó, bạn sẽ hiểu rõ hơn cách React hoạt động với state, effect và vòng đời component, mà không cần phải học lý thuyết khô khan. Đây là một bài học không hề dễ, nhưng lại cực kỳ giá trị. Nếu bạn hiểu được bài này, bạn sẽ có nền tảng rất tốt để viết React một cách có tổ chức, biết đặt state đúng chỗ, tách trách nhiệm rõ ràng và tránh được rất nhiều lỗi logic khó debug sau này. Video phù hợp cho người đã học qua React cơ bản và đang muốn nâng cao tư duy thiết kế component trong các ứng dụng thực tế.