Es importante interpretar el código bien previamente a utilizarlo a tu trabajo y si tdeseas aportar algo puedes decirlo en los comentarios.

Solución:

1. Es un poquito más rápido y tiene menos uso de memoria (no es necesario crear un nodo DOM adicional). Esto solo tiene un beneficio real en árboles muy grandes y / o profundos, pero el rendimiento de la aplicación a menudo sufre la muerte por miles de cortes. Este es un corte menos.
2. Algunos mecanismos CSS como Flexbox y CSS Grid tienen una relación especial entre padres e hijos, y agregan divs en el medio dificulta mantener el diseño deseado mientras se extraen componentes lógicos.
3. El inspector DOM está menos abarrotado. 🙂

Puede encontrar las descripciones de algunos otros casos de uso en este problema de React: Agregar fragmento de API para permitir la devolución de múltiples componentes desde el renderizado

Agregando a todas las respuestas anteriores, hay una ventaja más: legibilidad del código, Fragment componente admite una forma sintáctica de azúcar, <>. Por lo tanto, el código de su pregunta se puede escribir más fácilmente como:

render() 
  return (
    <>
      Some text.
      
A heading
      More text.
      
Another heading
      Even more text.
    
  );

Según los documentos,

En React, esto desugars a un elemento, como en el ejemplo de la sección anterior. (Los marcos que no son de React que usan JSX pueden compilarse en algo diferente).

Sin desorden, ¿verdad?

Tenga en cuenta que todavía necesita usar sintaxis si necesita proporcionar key al fragmento.

• Funciones añadidas que antes no eran posibles con JSX
• Mejor marcado semántico jsx. Los elementos de envoltura se utilizan cuando se necesitan, no porque estén obligados a hacerlo.
• Menos marcado de dom en general (mayor rendimiento de renderizado y menos sobrecarga de memoria)

Es tan simple como cuando no necesita un elemento contenedor, no está obligado a usar uno. Tener menos elementos es genial, pero creo que el mayor beneficio es poder representar elementos en jsx que antes no eran posibles y agregar un mejor significado semántico a los elementos de envoltura porque ahora son opcionales.

Esto no era posible antes:

 
    this.renderOptions()
 

Echando un vistazo a lo siguiente en React 15, no se puede saber si el elemento contenedor es necesario o no:

  
Hello
  this.getContent()

Acuérdate de que tienes la capacidad de valorar esta noticia si diste con el resultado.

---

---

Utiliza Nuestro Buscador