Fragmentos de ReactJS

Sabemos que hacemos uso del método render dentro de un componente cada vez que queremos mostrar algo en la pantalla. Podemos renderizar un solo elemento o varios elementos, aunque renderizar varios elementos requerirá una etiqueta ‘div’ alrededor del contenido, ya que el método de renderizado solo renderizará un solo Node raíz dentro de él a la vez. 
 

Ejemplo: cree una aplicación React y edite el archivo App.js de la carpeta src como:

Nombre de archivo- App.js:

import React from "react";
  
// Simple rendering with div
class App extends React.Component {
  render() {
    return (
      // Extraneous div element
      <div>
        <h2>Hello</h2>
  
        <p>How you doin'?</p>
      </div>
    );
  }
}
  
export default App;

Producción:

Razón para usar Fragmentos: como vimos en el código anterior, cuando intentamos representar más de un elemento raíz, tenemos que poner todo el contenido dentro de la etiqueta ‘div’, que no es del agrado de muchos desarrolladores. Entonces, en la versión React 16.2, se introdujeron Fragmentos , y los usamos en lugar de la extraña etiqueta ‘div’. 

Sintaxis:

<React.Fragment>  
      <h2>Child-1</h2>   
      <p> Child-2</p>   
</React.Fragment>  

Ejemplo:  Abra App.js y reemplace el código con el siguiente código.

import React from "react";
  
// Simple rendering with fragment syntax
class App extends React.Component {
  render() {
    return (
      <React.Fragment>
        <h2>Hello</h2>
  
        <p>How you doin'?</p>
      </React.Fragment>
    );
  }
}
  
export default App;

Producción:

Fragmento abreviado: el resultado del primer código y el código anterior es el mismo, pero la razón principal para usarlo es que es un poco más rápido en comparación con el que tiene la etiqueta ‘div’ dentro, ya que no creamos cualquier Node DOM. Además, se necesita menos memoria. También existe otra abreviatura para el método anterior en el que hacemos uso de ‘<>’ y ‘</>’ en lugar de ‘React.Fragment’. 

Nota: La sintaxis abreviada no acepta atributos clave en ese caso, debe usar la etiqueta <React.Fragments>.
Sintaxis:

<>  
      <h2>Child-1</h2>   
      <p> Child-2</p>   
</> 

Ejemplo:  Abra App.js y reemplace el código con el siguiente código.

import React from "react";
  
// Simple rendering with short syntax
class App extends React.Component {
  render() {
    return (
      <>
        <h2>Hello</h2>
  
        <p>How you doin'?</p>
      </>
    );
  }
}
  
export default App;

Producción: