Renderizar elementos secundarios en React usando componentes Fragment o Array | Programar Plus

¿Qué te viene a la mente cuando aparece React 16? ¿Contexto? ¿Límite de error? Esos están en 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 Fragments y Array Components.

Estos son conceptos nuevos y realmente emocionantes que surgieron del lanzamiento de React 16, así que veámoslos más de cerca y conozcámoslos.

Fragmentos

Antes, 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 salir de eso es hacer uso de un elemento div o span contenedor que actúa como la etiqueta envolvente.

Así que en lugar de hacer esto:

class Countries extends React.Component {
  render() {
    return (
      <li>Canada</li>
      <li>Australia</li>
      <li>Norway</li>
      <li>Mexico</li>
    )
  }
}

…tienes que agregar un ol o ul etiqueta como un envoltorio en esos elementos de la lista:

class Countries extends React.Component {
  render() {
    return (
      <ul>
        <li>Canada</li>
        <li>Australia</li>
        <li>Norway</li>
        <li>Mexico</li>
      </ul>
    )
  }
}

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

React 16 resuelve esto con Fragmentos. Esta nueva característica le permite envolver una lista de elementos secundarios sin agregar un nodo adicional. Entonces, en lugar de agregar un elemento adicional como contenedor como hicimos en el último ejemplo, podemos lanzar <React.Fragment> allí para hacer el trabajo:

class Countries extends React.Component {
  render() {
    return (
      <React.Fragment>
        <li>Canada</li>
        <li>Australia</li>
        <li>Norway</li>
        <li>Mexico</li>
      </React.Fragment>
    )
  }
}

Usted puede pensar que eso no hace mucha diferencia. Pero imagine 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 envolverse en una etiqueta adjunta. Ahora, sin embargo, puede hacer uso de fragmentos y eliminar ese marcado innecesario.

He aquí 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 cruft.

Fragmento de taquigrafía

Hay una sintaxis abreviada cuando se trabaja con fragmentos, que puede utilizar. Manteniéndose fiel a su naturaleza de fragmento, la sintaxis es como un fragmento en sí mismo, dejando solo corchetes vacíos.

Volviendo a nuestro último ejemplo:

class Fruit extends React.Component {
  render() {
    return (
      <>
        <li>Apple</li>
        <li>Orange</li>
        <li>Blueberry</li>
        <li>Cherry</li>
      </>
    )
  }
}

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

Es posible que esté buscando una buena razón para usar Fragmentos en lugar del contenedor div que siempre ha estado usando. dan abramov respondió la pregunta en StackOverflow. Para resumir:

  1. Es un poco 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 se ve afectado por miles de cortes. Este es un corte menos.
  2. Algunos mecanismos de 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 los componentes lógicos.
  3. El inspector DOM está menos abarrotado.

Claves en Fragmentos

Al mapear una lista de elementos, aún debe utilizar las teclas de la misma manera que antes. Por ejemplo, supongamos 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} />
  )
}

Vea Pen React Fragment Pen de Kingsley Silas Chijioke (@kinsomicrote) en CodePen.

Puede ver que ahora, en este caso, no estamos haciendo uso de ningún div en el componente Frameworks. ¡Esa es la diferencia clave!

Renderizar elementos secundarios utilizando una matriz de componentes

La segunda cosa específica que surgió de React 16 que queremos ver es la capacidad de renderizar múltiples elementos secundarios usando una variedad de componentes. Este es un ahorro de tiempo claro porque nos permite meter tantos en un render en lugar de tener que hacerlo uno por uno.

Aquí hay un ejemplo:

class Frameworks extends React.Component {
  render () {
    return (
      [
        <p>JavaScript:</p>
        <li>React</li>,
        <li>Vuejs</li>,
        <li>Angular</li>
      ]
    )
  }
}

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

const Frontend = () => {
  return [
    <h3>Front-End:</h3>,
    <li>Reactjs</li>,
    <li>Vuejs</li>
  ]
}

const Backend = () => {
  return [
    <h3>Back-End:</h3>,
    <li>Express</li>,
    <li>Restify</li>
  ]
}

const App = () => {
  return [
    <h2>JavaScript Tools</h2>,
    <Frontend />,
    <Backend />
  ]
}

Vea el Pen React Fragment 2 Pen de Kingsley Silas Chijioke (@kinsomicrote) en CodePen.

Conclusión

Al igual que la función Context API y Error Boundary que se introdujeron en React 16, la representación de componentes secundarios con Fragment y múltiplos de ellos con Array Components son otras dos funciones increíbles que puede comenzar a utilizar a medida que crea su aplicación.

¿Ha comenzado a utilizar estos en un proyecto? Déjame saber cómo en los comentarios para que podamos comparar notas. 🙂