2024.08.05
Bạn đã từng nhầm lẫn về 2 khái niệm Uncontrolled vs Controller component trong ReactJs?
Dang Sach
Trong React, khi nói về Controlled và Uncontrolled Components có thể nói trong hai bối cảnh sau:
Uncontrolled vs Controller components trong ReactJs
Bối cảnh 1: Quản lý State và Props
Controlled Components:
- Định nghĩa: Controlled Components là những thành phần mà giá trị và hành vi của chúng hoàn toàn phụ thuộc vào props và sự kiểm soát của component cha.
- Ưu điểm: Giúp quản lý trạng thái một cách dễ dàng và nhất quán từ một nơi duy nhất.
- Nhược điểm: Có thể dẫn đến việc tạo ra nhiều props hơn và phức tạp hóa component cha.
Uncontrolled Components:
- Định nghĩa: Uncontrolled Components thường là các giá trị của chúng được quản lý bởi chính các state của chúng.
- Ưu điểm: Dễ dàng hơn để thiết lập và không yêu cầu nhiều cấu hình từ component cha.
- Nhược điểm: Khó khăn hơn trong việc đồng bộ trạng thái giữa các component.
Bối cảnh 2: Quản lý Form và Input
Ở phần này, nếu gọi là trong bối cảnh quản lý form và input thì cũng không hoàn toàn đúng, đúng hơn là quản lý thông tin với useRef hay useState. Mình gọi bối cảnh này là “quản lý form và input” vì mình thường thấy nó được dùng nhiều trong hợp làm việc với form.
Controlled Components:
- Định nghĩa: Giá trị của các input được quản lý bởi state của chính component đó (nó giống hoàn toàn với định nghĩa và uncontroller components trong bối cảnh 1.
- Ưu điểm: Cho phép kiểm soát hoàn toàn giá trị của input và phản ứng ngay lập tức với thay đổi mà không cần quá nhiều xử lý dài dòng.
- Nhược điểm: Có thể dẫn đến nhiều render không cần thiết, nếu có quá nhiều state không được quản lý tốt.
Uncontrolled Components:
- Định nghĩa: Các giá trị của các input được quản lý bởi useRef.
- Ưu điểm: Không cần phải re-render mỗi khi giá trị input thay đổi.
- Nhược điểm: Khó khăn hơn trong việc đồng bộ trạng thái và quản lý các thay đổi giá trị input. Phải code nhiều để xử lý khi cần các giá trị từ input (gần như là phải xứ lý thủ công với DOM như web truyền thống).
Theo cá nhân mình thì những khái niệm này không bắt buộc chúng ta phải tuân thủ hoàn toàn (tìm hiểu thêm trong tài liệu chính thức của React), mà nó chỉ nhầm mục đích giúp chúng ta làm rõ hơn về chúng để tránh hiểu lầm khi làm việc cùng nhau. Xét theo trường hợp trong bối cảnh 1, khi làm việc trong dự án thực tế thấy rằng các component như các input, button, label, title, … thường sẽ là các uncontrolled components. Các component như Form, Table thường sẽ là Controlled components. Tùy nhu cầu sử dụng mà bạn lựa chọn sao cho linh động phù hợp khi triển khai dự án.
Bên trên là khái niệm về Controlled and uncontrolled components trong các bối cảnh khác nhau. Cảm ơn các bạn đã dành thời gian đọc bài, nếu có ý kiến bạn hãy bình luận bên dưới nhá. Còn nhiều bài viết khác về công nghệ, hãy truy cập đường link để xem thêm nào.
