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

Question

Dans React 16.2, un meilleur support pour les Fragments a été ajouté. Vous pouvez trouver plus d'informations sur le billet de blog de React ici.

Nous sommes tous familiers avec le code suivant:

render() {
  return (
    // Élément div superflu :(

      Un peu de texte.
      Un titre
      Encore un peu de texte.
      Un autre titre
      Encore un peu plus de texte.

  );
}

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

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

render() {
  return (

      Un peu de texte.
      Un titre
      Encore un peu de texte.
      Un autre titre
      Encore un peu plus de texte.

  );
}

Dans les deux cas, nous avons encore besoin d'un élément conteneur entourant les éléments internes.

Ma question est, pourquoi utiliser un Fragment est-il préférable? Est-ce que cela aide pour les performances? Si oui, pourquoi? J'aimerais avoir quelques informations.

Answer 1

1. Il est un tout petit peu plus rapide et utilise moins de mémoire (pas besoin de créer un nœud DOM supplémentaire). Cela n'a un réel avantage que sur des arbres très grands et/ou profonds, mais les performances de l'application souffrent souvent de la mort par mille coupures. C'est donc une coupure en moins.
2. Certaines mécanismes CSS comme Flexbox et CSS Grid ont une relation parent-enfant spéciale, et ajouter des div au milieu rend difficile le maintien de la mise en page désirée tout en extrayant des 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 : Ajouter une API fragment pour permettre le retour de plusieurs composants depuis render

Answer 2

Ajoutant à toutes les réponses ci-dessus, il y a un autre avantage: lisibilité du code, le composant Fragment prend en charge une forme de sucre syntaxique, <>. Ainsi, le code dans votre question peut être écrit plus facilement comme suit:

render() {
  return (
    <>
      Some text.
      Un titre
      Plus de texte.
      Un autre titre
      Encore plus de texte.

  );
}

Selon les docs,

En React, cela se transforme en un élément , 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 encombre, n'est-ce pas ?

Remarquez que vous devez toujours utiliser la syntaxe si vous avez besoin de fournir une key au fragment.

Answer 3

• Fonctionnalités ajoutées non possibles auparavant avec JSX
• Meilleur balisage JSX sémantique. Les éléments d'enveloppe sont utilisés lorsque nécessaire et non parce qu'ils sont obligatoires.
• Moins de balisage dom global (augmentation des performances de rendu et moins de surcharge mémoire)

C'est aussi simple que lorsque vous n'avez pas besoin d'un élément d'enveloppe, vous n'êtes pas obligé d'en utiliser un. Avoir moins d'éléments est génial, mais je pense que le plus grand avantage est de pouvoir rendre des éléments en JSX qui n'étaient pas précédemment possibles et d'ajouter une meilleure signification sémantique aux éléments d'enveloppe car ils sont désormais facultatifs.

Cela n'était pas possible auparavant :

    {this.renderOptions()}

En regardant le code suivant en React 15, vous ne pouvez pas dire si l'élément d'enveloppe est nécessaire ou non :

  Hello
  {this.getContent()}

Answer 4

Conformément à la documentation de reactjs.org docs, les besoins les plus importants de au lieu de divs sont de éviter de casser la sémantique HTML. Lorsque nous utilisons des divs au lieu de , nous cassons la sémantique HTML.

Pour en savoir plus sur la sémantique HTML, veuillez cliquer et il y a aussi des cas où si vous utilisez des divs au lieu de Fragments, cela sera un html invalide, par exemple regardez ce code :

class Columns extends React.Component {
  render() {
    return (

        Hello
        World

    );
  }
}

        Hello
          World

Les Fragments résolvent ce problème.

Answer 5

1. En utilisant ..., nous pouvons ajouter une balise parent à nos éléments JSX sans ajouter un nœud supplémentaire au DOM.
2. vous pouvez remplacer les balises div supplémentaires par React.Fragment
3. écrire React.Fragment à chaque fois est trop long pour vous. React.Fragment a une syntaxe abrégée que vous pouvez utiliser. Il est <>....