Chia component như thế nào cho hiệu quả trong React

  • admin
  • 6 Tháng Sáu, 2022

Có nhiều phương pháp chia component nên số loại component sẽ khác nhau. Ở bài viết này mình chia React theo 2 loại component

– Container: Smart component

  • Quản lý, xử lý xử liệu (Có thể get api lấy data, hoặc data tĩnh, cung cấp dữ liệu và có dữ liệu để render)
  • Không quan tâm render UI như thế nào
  • Chỉ quan tâm render cái gì
  • Có thể chứa container con và các components

– Component: Dumb component

  • Thằng cho cái gì render cái đó
  • Không cần biết dữ liệu đến từ đâu
  • Thường chỉ có props, không có state
  • Tái sử dụng, với props khác nhau thì sẽ render khác nhau

Mình ví dụ 1 block cơ bản dưới đây nha

Container

HomePage: Thường tổng thể 1 trang là 1 container

  • Props: N/A
  • State: featuredPostList
  • Render:
    • Header
    • Banner
    • FeaturedPostList: state featuredPostList
Components

Header: render header

Banner: render banner

FeaturedPostList

  • Props: featuredPostList
  • State: N/A
  • Render: a list of post

 

guest
0 Góp ý
Phản hồi nội tuyến
Xem tất cả bình luận

Nhấn ESC để đóng

0
Rất thích suy nghĩ của bạn, hãy bình luận.x