ReactJS: Presentational và Container component trong React

ReactJS: Presentational và Container component trong React

Một trong những điểm mạnh trong React là chúng ta có thể chia business ra những component nhỏ. Chức năng đó được gọi là component-based trong React. Và một cách tổ chức component hiệu quả hơn cho app của bạn là phân thành hai loại Presentational(hiển thị) và Container(thùng chứa) component. Việc sử dụng hai khái niệm này sẽ tạo ra những component dễ sử dụng lại(reusable) và phát hiện những thay đổi hơn(reason about).

Chúng ta có thể gọi Presentational là Dumb và Container là Smart.

Presentational Component là gì?

Image result for dumb guys

  • Quan tâm đến việc hiển thị dữ liệu(how component looks)
  • Có thể chứa cả Dumb và Smart. Thường là phần View gồm DOM và styles cho phần hiển thị
  • Không có phụ thuộc bất cứ gì vào những component khác hay Redux hay third-party
  • Nhận data thông qua props và emit event thông qua callback
  • Không load hay fetch data
  • Không xử lý lifecycle hooks
  • Nó là functional components

Container Component là gì?

Image result for busy guys

  • Quan tâm đến việc cách hoạt động của component(how component works)
  • Có thể chứa cả Dumb và Smart. Không chứa DOM, styles, chỉ có thể chứa một số wrapper như div.
  • Truyền data và callback thông qua props cho Dumb và Smart component trong hàm render
  • Xử lí Redux stuff như call action, kết nối với store.

Hai loại component này có thể đặt ở hai thư mục khác nhau: components(chứa dumb), containers(chứa smart)

Những lợi ích của Dumb và Smart component

  • Phân tách rõ ràng từng nhiệm vụ component, dễ debug và phát hiện thay đổi ở component nào nhanh hơn.
  • Dễ dàng sử dụng lại các dumb vì chúng là những pure function, không có một side-effect nào.
  • Tổ chức app rõ ràng, dễ hiểu hơn qua các component

Khi nào bạn cần viết một Container component?

Tôi nghĩ ban đầu chúng ta nên chỉ viết những dumb component. Khi mà chúng càng nhiều lên và cây component của bạn có nhiều nút thì khi đó sẽ có một số component nhận những props từ cha của nó. Và tồn tại nhiều component chỉ làm nhiệm vụ trung chuyển props cho những component khác. Đó có thể là thời điểm bạn xem xét viết lại một số Container để đơn giản quá cách truyền props qua nhiều tầng component mà những thằng trung gian không bao giờ dùng đến.

Leave a Comment