Prop drilling và component composition trong React

Đôi khi tất cả những gì chúng ta cần để tránh việc prop drilling là một chút tái cấu trúc:

Ví dụ thực tế

Giả sử chúng ta có cấu trúc UI như sau.

Thanh điều hướng là động. Thanh bên nhận dữ liệu từ máy chủ và hiển thị thanh điều hướng dựa trên dữ liệu này.

Việc chúng ta lấy dữ liệu này như thế nào không quan trọng cho ví dụ của chúng ta. Phiên bản đơn giản của JSON cho thanh điều hướng của chúng tôi có thể nhìn như sau:

[
  { "label": "Trang chủ", "href": ... },
  { "label": "Giới thiệu", "href": ... }
  {
    "label": "Tài khoản",
    "sub": [
      {"label": "Hồ sơ", "href": ...},
      {"label": "Đăng ký", "href": ...}
    ]
  }
];

Chúng ta cần ánh xạ dữ liệu này vào các thành phần của chúng ta (NavList, NavItem, SubNavList, SubNavItem). Một cách để làm điều này là để cho các thành phần hiển thị lẫn nhau và truyền dữ liệu trên đường dẫn.

Điều này sẽ làm được công việc. Tuy nhiên, cấu trúc này bao gồm rất nhiều prop drilling. Mỗi thành phần trung gian cần nhận biết các props nó nhận và hiểu cách truyền các props đó xuống và hiển thị một thành phần con.

Bây giờ hãy tái cấu trúc các thành phần của chúng ta để chúng độc lập với môi trường xung quanh của chúng bằng cách sử dụng prop children.

Và bây giờ khi chúng ta có một tập hợp các thành phần độc lập đơn giản, chúng ta có thể hiển thị chúng trực tiếp trong thanh bên.

Điều này tránh việc prop drilling và tạo ra một tập hợp các thành phần độc lập có thể được sử dụng lại ở các vị trí khác nhau với cấu trúc dữ liệu khác nhau.

Và nếu chúng ta không muốn thực hiện ánh xạ dữ liệu trực tiếp trong thanh bên, chúng ta có thể chuyển nó vào một thành phần riêng biệt.

Đã tham khảo:

• https://alexsidorenko.com/blog/react-prop-drilling-composition/