Representación de elementos secundarios en React mediante componentes de matriz o fragmento

Índice

Fragmentos
Renderizar niños usando una variedad de componentes
Conclusión

¿Qué te viene a la mente cuando surge React 16? ¿Contexto? ¿Límite de error? Esos están en el punto. React 16 vino con esas ventajas y mucho más, pero en esta publicación veremos el poder de renderizado que también introdujo, es decir, la capacidad de renderizar niños usando Fragmentos y Componentes de matriz.

Estos son conceptos nuevos y realmente interesantes que surgieron del lanzamiento de React 16, así que veámoslos más de cerca y conócelos.

Fragmentos

Solía ser que los componentes de React solo podían devolver un único elemento. Si alguna vez ha intentado devolver más de un elemento, sabe que recibirá este error: Syntax error: Adjacent JSX elements must be wrapped in an enclosing tag. La forma de solucionarlo es utilizar un elemento contenedor div o span que actúa como etiqueta adjunta.

Entonces en lugar de hacer esto:

class Countries extends React.Component {  render() {    return (      liCanada/li      liAustralia/li      liNorway/li      liMexico/li    )  }}

…tienes que agregar una etiqueta olo ulcomo contenedor en esos elementos de la lista:

class Countries extends React.Component {  render() {    return (      ul        liCanada/li        liAustralia/li        liNorway/li        liMexico/li      /ul    )  }}

La mayoría de las veces, es posible que esto no sea el diseño inicial que tenía para la aplicación, pero no le queda más remedio que ceder en este sentido.

React 16 resuelve esto con Fragmentos . Esta nueva característica le permite ajustar una lista de niños sin agregar un nodo adicional. Entonces, en lugar de agregar un elemento adicional como contenedor como hicimos en el último ejemplo, podemos incluirlo React.Fragmentallí para hacer el trabajo:

class Countries extends React.Component {  render() {    return (      React.Fragment        liCanada/li        liAustralia/li        liNorway/li        liMexico/li      /React.Fragment    )  }}

Quizás pienses que eso no hace mucha diferencia. Pero imagina una situación en la que tiene un componente que enumera diferentes elementos, como frutas y otras cosas. Todos estos elementos son componentes, y si está utilizando versiones antiguas de React, los elementos de estos componentes individuales deberán estar envueltos en una etiqueta adjunta. Ahora, sin embargo, puedes utilizar fragmentos y eliminar aquellos marcados como innecesarios.

Aquí hay una muestra de lo que quiero decir:

class Items extends React.Component {  render() {    return (      React.Fragment        Fruit /        Beverages /        Drinks /      /React.Fragment    )  }}

Tenemos tres componentes secundarios dentro del fragmento y ahora podemos crear un componente para el contenedor que lo envuelve. Esto está mucho más en línea con poder crear componentes a partir de todo y poder compilar código con menos complejidad.

Taquigrafía de fragmentos

Existe una sintaxis abreviada cuando se trabaja con Fragmentos, que puede utilizar. Manteniéndose fiel a su naturaleza fragmentaria, la sintaxis es como un fragmento en sí mismo, dejando sólo corchetes vacíos.

Volviendo a nuestro último ejemplo:

class Fruit extends React.Component {  render() {    return (              liApple/li        liOrange/li        liBlueberry/li        liCherry/li      /    )  }}

Pregunta: ¿Es un fragmento mejor que un div contenedor?

Quizás estés buscando una buena razón para usar Fragmentos en lugar del div contenedor que siempre ha estado usando. Dan Abramov respondió la pregunta en StackOverflow . Para resumir:

Es un poco más rápido y utiliza menos memoria (no es necesario crear un nodo DOM adicional). Esto sólo tiene un beneficio real en árboles muy grandes y/o profundos, pero el rendimiento de la aplicación a menudo se ve afectado por mil cortes. Este es un corte menos.
Algunos mecanismos CSS como flexbox y grid tienen una relación padre-hijo especial, y agregar divs en el medio hace que sea más difícil mantener el diseño mientras se extraen componentes lógicos.
El inspector DOM está menos abarrotado.

Claves en fragmentos

Al mapear una lista de elementos, aún necesita usar las claves de la misma manera que antes. Por ejemplo, digamos que queremos pasar una lista de elementos como accesorios de un componente principal a un componente secundario. En el componente secundario, queremos mapear la lista de elementos que tenemos y generar cada elemento como una entidad separada. Así es como se ve:

const preload = {  "data" : [    {      "name": "Reactjs",      "url": "https://reactjs.org",      "description": "A JavaScript library for building user interfaces",    },    {      "name": "Vuejs",      "url": "https://vuejs.org",      "description": "The Progressive JavaScript Framework",    },    {      "name": "Emberjs",      "url": "https://www.emberjs.com",      "description": "Ember.js is an open-source JavaScript web framework, based on the Model–view–viewmodel pattern"    }  ]}const Frameworks = (props) = {  return (    React.Fragment      {props.items.data.map(item = (        React.Fragment key={item.id}          h2{item.name}/h2          p{item.url}/p          p{item.description}/p        /React.Fragment      ))}    /React.Fragment  )}const App = () = {  return (    Frameworks items={preload} /  )}

Puede ver que ahora, en este caso, no utilizamos ningún div en el componente Frameworks. ¡Ésa es la clave de diferencia!

Renderizar niños usando una variedad de componentes

El segundo aspecto específico que surgió de React 16 y que queremos analizar es la capacidad de renderizar varios elementos secundarios utilizando una variedad de componentes. Esto es un claro ahorro de tiempo porque nos permite agrupar tantos como sea posible en un render en lugar de tener que hacerlo uno por uno.

Aquí hay un ejemplo:

class Frameworks extends React.Component {  render () {    return (      [        pJavaScript:/p        liReact/li,        liVuejs/li,        liAngular/li      ]    )  }}

También puedes hacer lo mismo con un componente funcional sin estado:

const Frontend = () = {  return [    h3Front-End:/h3,    liReactjs/li,    liVuejs/li  ]}const Backend = () = {  return [    h3Back-End:/h3,    liExpress/li,    liRestify/li  ]}const App = () = {  return [    h2JavaScript Tools/h2,    Frontend /,    Backend /  ]}

Conclusión

Al igual que la API de contexto y la función Límite de error que se introdujeron en React 16, renderizar componentes secundarios con Fragment y Múltiples de ellos con Array Components son dos características más increíbles que puede comenzar a utilizar a medida que crea su aplicación.

¿Has comenzado a utilizarlos en un proyecto? Déjame saber cómo en los comentarios para que podamos comparar notas.