En React 16.2, se ha agregado soporte mejorado para Fragments . Se puede encontrar más información en la publicación del blog de React aquí.
Todos estamos familiarizados con el siguiente código:
render() { return ( // Extraneous div element :( <div> Some text. <h2>A heading</h2> More text. <h2>Another heading</h2> Even more text. </div> ); }Sí, necesitamos un contenedor div, pero no es gran cosa.
En React 16.2, podemos hacer esto para evitar el contenedor div circundante:
render() { return ( <Fragment> Some text. <h2>A heading</h2> More text. <h2>Another heading</h2> Even more text. </Fragment> ); }En cualquier caso, aún necesitamos un elemento contenedor que rodee los elementos internos.
Mi pregunta es, ¿por qué es preferible usar un Fragment ? ¿Ayuda con el rendimiento? Si es así, ¿por qué? Me encantaría alguna idea.
div s en el medio dificulta mantener el diseño deseado mientras se extraen los componentes lógicos.Puede encontrar las descripciones de algunos otros casos de uso en este problema de React: Agregar API de fragmentos para permitir la devolución de múltiples componentes del procesamiento
Además de todas las respuestas anteriores, hay una ventaja más: la legibilidad del código , el componente Fragment admite una forma de azúcar sintáctica, <> . Por lo tanto, el código en su pregunta se puede escribir más fácilmente como:
render() { return ( <> Some text. <h2>A heading</h2> More text. <h2>Another heading</h2> Even more text. </> ); }Según los documentos ,
En React, esto se convierte en un
<React.Fragment/>, como en el ejemplo de la sección anterior. (Los marcos que no son React que usan JSX pueden compilarse en algo diferente).
Sin desorden, ¿verdad?
Tenga en cuenta que aún necesita usar la sintaxis <Fragment> si necesita proporcionar la key para el fragmento.
Es tan simple como cuando no necesita un elemento contenedor, no está obligado a usar uno. Tener menos elementos es excelente, 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:
<select> {this.renderOptions()} </select>Mirando lo siguiente en React 15, no puede saber si el elemento contenedor es necesario o no:
<span> <h1>Hello</h1> {this.getContent()} </span>