ReactJS: Tìm hiểu React Fragments

React Fragments được giới thiệu trong phiên bản React 16.2. Dù React Fragments xuất hiện khá thời gian dài, nhưng vẫn còn 1 số developer chưa hiểu được nguyên nhân dùng chúng. Vì thế, trong bài viết này, chúng ta sẽ tìm hiểu chi tiết về React Fragments và bí quyết dùng như thế nào nhé !

React Fragments là gì?

Trước phiên bản React 16, để gom nhóm nhiều component, ta chỉ có thể dùng thẻ <div>, <span>… Tuy nhiên, những thẻ này sẽ chiếm 1 node trong cây DOM, trong lúc chúng ta chỉ cần gom nhóm những component.

Để giải quyết hạn chế này, React phiên bản 16.0 tương trợ 1 loại render new là fragments and strings. Nó cho phép chúng ta return 1 mảng những component trong phương thức render() của 1 element, tương tự động như 1 mảng thông thường, ta thêm thuộc tính key cho từng component.

Dí dụ:

render() { // Ko cần dùng thẻ <div> để bao những component. return [ // Don’t forget the keys 🙂 <li key=”A”>First item</li>, <li key=”B”>Second item</li>, <li key=”C”>Third item</li>, ]; }

Tuy nhiên, cú pháp trên cũng có nhiều điều cần chú ý, khác sở hữu cú pháp JSX thông thường:

  • Từng React Ingredient buộc phải được phân bí quyết bởi dấu phẩy ” , “
  • Từng React Ingredient buộc phải có 1 key để giảm thiểu cảnh báo key của listing trong React.
  • Kiểu String buộc phải thuộc diện dấu nháy đơn ‘ ‘ hoặc nháy kép ” “
Xem Thêm  Chỉ dẫn phương pháp vẽ biểu đồ trong Excel đơn giản và nhanh chóng nhất

Nhưng để dễ nhìn hơn và đồng bộ sở hữu cú pháp JSX, React phiên bản 16.2 ra mắt API new là React.Fragment sở hữu 1 cú pháp đặc biệt thay thế cho mảng [ ] mà ko cần dấu nháy đơn hay kép, ko cần dấu phẩy ‘, ‘ và cũng ko cần thuộc tính key

React Fragments cho phép chúng ta nhóm nhiều React component mà ko cần thêm bất kì node nào vào DOM. Đây là 1 sample phổ thông} trong React dùng để 1 element có thể return nhiều React component.

React Fragment được thiết kế như 1 thẻ JSX rỗng. Cú pháp toàn bộ như sau:

Tuy nhiên, để nâng cao tính trải nghiệm và code nhanh chóng, React tương trợ thêm cú pháp rút ngắn của React Fragment như sau:

Cú pháp Fragment được lấy ý tưởng từ hàm khỏi tạo XMLList() <></> trong EX4. Ý tưởng là dùng 1 cặp thẻ rỗng tương tự động sở hữu việc ko thêm 1 phần tử nào vào cây DOM.

Chỉ dẫn thực hiện dùng Fragments

Element trả về nhiều component

Dí dụ, hiển thị 1 desk sở hữu những cột là 1 element con:

class Desk extends React.Element { render() { return ( <desk> <tr> <Columns /> </tr> </desk> ); } }

Thông thường, để gom nhóm 2 component <td> , ta sẽ dùng thẻ <div> như sau:

class Columns extends React.Element { render() { return ( <div> <td>Column 1</td> <td>Column 2</td> </div> ); } }

Lúc render, trên cây HTML DOM sẽ hiển thị thêm 1 node <div>:

Nhưng sở hữu React Fragment, chúng ta ko cần buộc phải tốn thêm node:

Xem Thêm  Anime - Thế giới đầy mê hoặc

class Columns extends React.Element { render() { return ( <React.Fragment> // Hoặc <> <td>Column 1</td> <td>Column 2</td> </React.Fragment> // Hoặc </> ); } }

Render có điều kiện

React Fragment còn có thể dùng lúc render những component theo điều kiện.

Dí dụ sau dùng cú pháp Fragment rút ngắn:

class LoginForm extends React.Element { render() { return ( <type> {this.props.isLoggedIn ? ( <> <h3>Welcome</h3> <p>You might be logged in!</p> </> ) : ( <> <h3>Login</h3> <label for=”username”>Username</label><br/> <enter sort=”textual content” id=”username” /><br/> <label for=”password”>Password</label><br/> <enter sort=”password” id=”password” /><br/> <enter sort=”submit” worth=”Login” /> </> )} </type> ); } }

Render theo mảng (Array)

React Fragment còn giúp chúng ta trong lúc render 1 array. Bởi vì cú pháp toàn bộ của React Fragment có thuộc tính key thích hợp dùng để gom nhóm component trong lúc thông qua mảng.

class UserList extends React.Element { customers = [ { id: 1, name: “Jack Bauer”, email: “[email protected]”, phone: “+358509283928”, }, { id: 2, name: “Tony Almeida”, email: “[email protected]”, phone: “+358508829378”, }, { id: 3, name: “Chloe O’brian”, email: “[email protected]”, phone: “+358508899012”, }, ]; render() { return ( <React.Fragment> {this.customers.map((consumer) => ( <React.Fragment key={consumer.id}> <h2>{consumer.title}</h2> <p>{consumer.e-mail}</p> <p>{consumer.telephone}</p> </React.Fragment> ))} </React.Fragment> ); } }

Ưu, nhược điểm của React Fragment

Ưu điểm

React Fragments ko tạo ra thêm bất kì node nào trên HTML DOM. Nhờ có vậy, React Fragments sẽ có 1 số ưu điểm sau:

  • Dùng ít bộ nhớ hơn.
  • Render nhanh hơn. Nhưng đây chỉ là 1 sự cắt giảm node, nên hiệu suất thực sự chỉ thấy được lúc 1 cây DOM có kích thước thực sự siêu lớn.
  • Lúc bật F12 debug đánh giá DOM dễ dàng hơn.
  • Dùng CSS dễ dàng hơn. Vì 1 số cơ chế CSS như Flexbox, Grid, … sẽ có những styling cho component cha-con cụ thể, nên việc chèn thẻ div vào sẽ gây nên những bố cục sai lệch ko mong muốn.
Xem Thêm  Phrase of Mouth Advertising and marketing là gì? Thí dụ về Phrase of Mouth Advertising and marketing

Nhược điểm

Không tính ưu điểm, React Fragment cũng có 1 nhược điểm: ko thể dùng CSS.

Fragments ko tạo thêm node và nó chỉ có thuộc tính key. Vì thế, lúc muốn CSS 1 khối bao bên cạnh những Reac component, ta nên dùng những thẻ JSX như <div>, <span>…

Tổng kết

Thông thường, trường hợp chỉ cần gom nhóm những component, bạn nên dùng cú pháp Fragment đã tìm hiểu trên trên để giúp những dòng code ngắn đi và cây DOM đơn giản hơn. Còn trường hợp có thêm đề nghị về CSS trên thẻ cha, bạn cứ việc dùng những thẻ <div>, <span>… như binh thường.

Hy vọng bài viết này sẽ giúp ít cho khách hàng. Cám ơn khách hàng đã ghé thăm!

Bài viết có tham khảo thông tin từ hyperlink: https://reactjs.org/docs/fragments.html

CÔNG TY CỔ PHẦN TẬP ĐOÀN TINO

  • Trụ sở chính: L17-11, Tầng 17, Tòa nhà Vincom Middle, Số 72 Lê Thánh Tôn, Phường Bến Nghé, Quận 1, Thành phố Hồ Chí MinhVăn phòng đại diện: 42 Trần Phú, Phường 4, Quận 5, Thành phố Hồ Chí Minh
  • Điện thoại: 0364 333 333Tổng đài miễn chi phí: 1800 6734
  • E-mail: gross [email protected]
  • Web site: www.tino.org