Viết component mà không cần tạo node với React Fragments

Trong React, bất cứ khi nào bạn muốn hiển thị nội dung nào đó trên màn hình, bạn cần sử dụng phương thức kết xuất bên trong thành phần đó. Phương thức kết xuất này có thể trả về các phần tử đơn hoặc nhiều phần tử. Phương thức kết xuất sẽ chỉ hiển thị một nút gốc duy nhất bên trong nó tại một thời điểm. Tuy nhiên, nếu bạn muốn trả về nhiều phần tử, phương thức kết xuất sẽ yêu cầu 'div' gắn thẻ và đặt toàn bộ nội dung hoặc các thành phần bên trong nó. Nút bổ sung này cho DOM đôi khi dẫn đến định dạng sai đầu ra HTML của bạn và cũng không được nhiều nhà phát triển yêu thích.

1. // Rendering with div tag  
2. class App extends React.Component {   
3.      render() {    
4.       return (   
5.          //Extraneous div element   
6.          <div>  
7.            <h2> Hello World! </h2>   
8.            <p> Welcome to the JavaTpoint. </p>   
9.          </div>   
10.       );   
11.      }   
12. }  

Để giải quyết vấn đề này, React đã giới thiệu Fragments từ 16.2 và phiên bản cao hơn. Phân đoạn cho phép bạn nhóm danh sách con mà không cần thêm nút bổ sung vào DOM.

Cú pháp

Ví dụ

1. // Rendering with fragments tag  
2. class App extends React.Component {   
3.     render() {   
4.      return (   
5.        <React.Fragment>  
6.             <h2> Hello World! </h2>   
7.         <p> Welcome to the JavaTpoint. </p>   
8.          </React.Fragment>  
9.      );   
10.     }   
11. }   

Tại sao chúng tôi sử dụng Fragment?

Lý do chính để sử dụng thẻ Fragments là:

1. Nó làm cho việc thực thi mã nhanh hơn so với thẻ div.
2. Phải mất ít bộ nhớ hơn.

Cú pháp ngắn của mảnh vỡ

Ngoài ra còn có một cách viết tắt khác để khai báo các đoạn cho phương thức trên. Có vẻ như thẻ trống trong đó chúng ta có thể sử dụng '<>' và '' thay vì 'React.Fragment'.

Ví dụ