web-dev-qa-db-fra.com

Pourquoi les fragments dans React 16 sont-ils meilleurs que les divs en conteneur?

Dans React16.2, la prise en charge améliorée de Fragments a été ajoutée. Plus d'informations peuvent être trouvées sur le blog de React ici.

Nous connaissons tous le code suivant:

render() {
  return (
    // Extraneous div element :(
    <div>
      Some text.
      <h2>A heading</h2>
      More text.
      <h2>Another heading</h2>
      Even more text.
    </div>
  );
}

Oui, nous avons besoin d'un conteneur, mais ce n'est pas si grave.

Dans React 16.2, nous pouvons le faire pour éviter le div de conteneur environnant:

render() {
  return (
    <Fragment>
      Some text.
      <h2>A heading</h2>
      More text.
      <h2>Another heading</h2>
      Even more text.
    </Fragment>
  );
}

Dans les deux cas, nous avons toujours besoin d'un élément conteneur qui entoure les éléments internes.

Ma question est la suivante: pourquoi utiliser un Fragment préférable? Cela aide-t-il avec la performance? Si oui, pourquoi? J'aimerais avoir un aperçu.

reactjs
134
Max Millington
  1. Il est un peu plus rapide et utilise moins de mémoire (pas besoin de créer un nœud DOM supplémentaire). Cela n'a qu'un avantage réel sur les arbres très grands et/ou profonds, mais les performances des applications souffrent souvent de la mort par mille coupes. C'est une coupe de moins.
  2. Certains mécanismes CSS tels que Flexbox et CSS Grid ont une relation parent-enfant spéciale et l'ajout de divs au milieu rend difficile la conservation de la présentation souhaitée lors de l'extraction de composants logiques.
  3. L'inspecteur DOM est moins encombré. :-)

Vous pouvez trouver les descriptions de quelques autres cas d'utilisation dans ce problème React: Ajout d'une API de fragment pour permettre le renvoi de plusieurs composants à partir du rend

263
Dan Abramov

L'ajout à toutes les réponses ci-dessus présente un avantage supplémentaire: lisibilité du code , le composant Fragment prend en charge une forme sucre syntaxique, <>. Ainsi, le code de votre question s’écrit plus facilement comme suit:

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

Selon docs ,

Dans React, cela désugare un élément <React.Fragment/>, comme dans l'exemple de la section précédente. (Les frameworks non-React qui utilisent JSX peuvent compiler quelque chose de différent.)

Sans encombrement, non?

Notez que vous devez toujours utiliser la syntaxe <Fragment> si vous devez fournir key au fragment.

20
Dane
  • Ajout de fonctionnalités impossibles auparavant avec JSX
  • Meilleur balisage sémantique jsx. Les éléments d'emballage sont utilisés en cas de besoin, non pas parce qu'ils sont obligés de le faire.
  • Moins de balisage dom (performances de rendu améliorées et surcharge de mémoire)

C'est aussi simple que lorsque vous n'avez pas besoin d'un élément wrapper, vous n'êtes pas obligé de l'utiliser. Avoir moins d'éléments, c'est bien, mais je pense que le principal avantage est de pouvoir restituer des éléments dans jsx qui n'étaient pas possibles auparavant et d'ajouter une meilleure signification sémantique aux éléments d'emballage, car ils sont maintenant facultatifs.

Ce n'était pas possible avant:

 <select>
    {this.renderOptions()}
 </select>

En examinant les éléments suivants dans React 15, vous ne pouvez pas savoir si l'élément wrapper est nécessaire ou non:

<span>
  <h1>Hello</h1>
  {this.getContent()}
</span>
6
pllee

Selon reatjs.org docs , les besoins les plus importants de <Fragments> <Fragments/> au lieu de div sont d'éviter de rompre la sémantique HTML. Lorsque nous utilisons div au lieu de <Fragments> <Fragments/>, nous cassons la sémantique HTML. en savoir plus sur la sémantique HTML. s'il vous plaît cliquez et il y a aussi des cas où si vous utilisez div au lieu de Fragments, il sera invalide html par exemple, regardez ce code.

class Columns extends React.Component {
  render() {
    return (
      <div>
        <td>Hello</td>
        <td>World</td>
      </div>
    );
  }
}
Result in table output of Columns Component  
<table>
      <tr>
        <div>
          <td>Hello</td>
          <td>World</td>
        </div>
      </tr>
 </table>

Les fragments résolvent ce problème.

0
Seeta Ram Yadav