Như chúng ta đã biết, chúng ta thường sử dụng DIV để tạo vùng chứa hoặc bọc nhiều phần tử bên trong một phần tử và sau đó có thể áp dụng kiểu dáng cho chúng cùng một lúc.
Trong React JSx, chúng tôi thường sử dụng div để đặt nhiều thành phần bên trong nó để trả về dưới dạng một thành phần duy nhất.
Như bạn có thể thấy dưới đây:
return (
<div> <Home /> <Main /> <Blogs /> <footer />
</div>
)
Mặc dù vậy, chúng ta có thể loại bỏ DIV và giải phóng thêm một số dung lượng trong DOM.
Dưới đây là một số lựa chọn thay thế mà chúng ta có thể sử dụng thay vì DIV xung quanh các thành phần.
React Js phiên bản 16.2, giới thiệu một tính năng mới Phân mảnh ý tưởng. Hãy xem xét nó sâu hơn.
Bây giờ React Fragment hoạt động chính xác giống như DIV như một lớp bao bọc xung quanh các thành phần.
Xem ví dụ này:
return (
<React.Fragment> <Home /> <Main /> <Blogs /> <footer />
<React.Fragment />
)
HOẶC chúng ta có thể sử dụng đoạn mã Fragment shothand tag (< > < />) thay vì
điều này hoàn toàn giống như
return (
<> <Home /> <Main /> <Blogs /> <footer />
< />
)
Lợi ích của việc sử dụng Fragment:
1. NHANH CHÓNG
Như chúng ta đã biết, thẻ DIV tạo một nút trong DOM và chiếm một số không gian trong DOM, nhưng React. Đoạn không tạo nút trong DOM, vì vậy nó sẽ không chiếm bất kỳ khoảng trống nào trong DOM
điều này làm cho ứng dụng nhanh hơn bình thường một chút.
2. DOM ít lộn xộn hơn
Có nhiều nút không liên quan khiến mã trở nên lộn xộn và khó đọc khi ứng dụng phát triển. vì chúng ta có thể có nhiều thành phần cha với thành phần con lồng nhau, điều này làm cho mã của chúng ta trở nên lộn xộn hơn và trở thành rào cản đối với việc gỡ lỗi mã theo cách phù hợp. Nhưng với Fragment, mã trông rõ ràng, dễ hiểu và dễ gỡ lỗi hơn.
Kết luận:
Sử dụng Fragment trong phiên bản React mới nhất sẽ được coi là một phương pháp hay để làm theo. Hầu hết các nhà phát triển không chú ý đến những điều nhỏ nhặt như thế này, điều này có thể giúp phá hủy kiến trúc ứng dụng khi nó phát triển trong tương lai.
Ngoại trừ không có tiêu chí đặc biệt nào cho việc đó, chúng ta phải sử dụng DIV để thêm một số lớp và thêm kiểu cho nó.
Cảm ơn bạn rất nhiều vì sự hỗ trợ của bạn. Theo dõi và chia sẻ với các đồng nghiệp của bạn.
Hãy theo dõi các bài viết sắp tới như thế này.
Giữ an toàn! Ở lại hạnh phúc!
- Phân phối nội dung và PR được hỗ trợ bởi SEO. Được khuếch đại ngay hôm nay.
- Platoblockchain. Web3 Metaverse Intelligence. Khuếch đại kiến thức. Truy cập Tại đây.
- nguồn: https://www.codementor.io/rizatech/why-we-shouldn-t-use-div-in-react-js-23a34159bv
