React : <React.Fragment> vs tableau

Question

Je lisais la documentation sur React et j'ai été troublé par le sujet. Fragments . Puisque nous pouvons retourner un tableau dans React, dans quelle situation aurait-on besoin de <Fragements /> ?

Voici un exemple de code :

const ReturnArray = () => {
  const items = [
    <div key={1}>Item 1</div>,
    <div key={2}>Item 2</div>,
    <div key={3}>Item 3</div>,
  ]
  return items
}

const ReturnFragments = () => {
  const items = 
    <React.Fragment>
      <div key={1}>Item 1</div>
      <div key={2}>Item 2</div>
      <div key={3}>Item 3</div>
    </React.Fragment>

  return items
}

Je pense que ce sont les mêmes.

La plupart des sujets existants traitent de "questions d'alerte clés" telles que este sur github, mais je veux juste connaître les cas d'utilisation de <Fragments />

---

Editar:

Dites-moi s'il y a une ambiguïté.

Pour être précis :

Veuillez expliquer la différence entre <ReturnArray /> y <ReturnFragments /> . Ils renvoient tous deux des éléments multiples sans que cela ne soit inutile <div> étiquette. Pourquoi utiliser la balise supplémentaire <React.Fragment /> partie ?

Answer 1

Document officiel dit

L'utilisation de la notation des tableaux présente des différences déroutantes par rapport à la notation normale. JSX :

1. Les enfants d'un tableau doivent être séparés par des virgules.

2. Les enfants d'un tableau doivent avoir une clé pour éviter l'avertissement de React concernant les clés.

3. Les chaînes de caractères doivent être placées entre guillemets.

Pour simplifier les choses, React fournit le composant Fragment qui peut être utilisé à la place des tableaux.

Considérez comment nous pouvons envelopper plusieurs enfants en utilisant un tableau

render() {
 return [
  "Some text.",
  <h2 key="heading-1">A heading</h2>,
  "More text.",
  <h2 key="heading-2">Another heading</h2>,
  "Even more text."
 ];
}

Et comment y parvenir en utilisant des fragments.

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

Tiré directement du document officiel.

Les fragments peuvent également être écrits comme ci-dessous.

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

Answer 2

Il y a deux avantages majeurs à utiliser les fragments plutôt que les tableaux dans l'instruction de retour.

1. Syntaxe simplifiée similaire à celle des autres composants, de sorte que vous n'avez pas à vous soucier du retour de valeurs séparées par des virgules, de la mise entre guillemets des chaînes de caractères, etc.
2. Les fragments peuvent prendre des attributs tels que la clé, ce qui est souvent important lorsque vous renvoyez des données à partir d'une carte. Vous ne pouvez pas le faire en utilisant un tableau.

Exemple

const ReturnFragments = () => {
  const items = list.map((item) => {
    <React.Fragment key={item.id}>
      <div key={1}>Item 1</div>
      <div key={2}>Item 2</div>
      <div key={3}>Item 3</div>
    </React.Fragment>
   })
  return items
}

Answer 3

Les fragments et les tableaux sont destinés à répondre à des cas d'utilisation différents et se comportent différemment sur un point important.

Les fragments n'émettront pas d'avertissement si vous omettez l'élément key alors que les tableaux le feront.

Si votre composant renvoie plusieurs enfants statiques, retourner un fragment .

<Fragment>
  <li>One advantage of our product is lorem</li>
  <li>Another is ipsum!</li>
</Fragment>

Si votre composant renvoie des enfants générés dynamiquement, retourner un tableau .

items.map(item => <li key={item}>{item}</li>);

Je paraphrase les réponses des mainteneurs à un problème que j'ai ouvert dans le repo React à propos d'une question similaire. Je vous recommande vivement de le lire pour plus de détails : https://github.com/facebook/react/issues/12776

Answer 4

Lorsque vous créez un nouveau composant, la méthode de rendu doit renvoyer un et un seul élément. En général, il s'agit donc d'un wrapper de plusieurs éléments, au lieu de créer un div inutile au dom, vous pouvez utiliser le composant fragment.

Citation de la documentation de React Fragments :

Un modèle courant dans React est qu'un composant renvoie plusieurs éléments. Les fragments vous permettent de regrouper une liste d'enfants sans ajouter de nœuds supplémentaires au DOM.

Sans Fragments

    render() {
      return {
       <div> ---> Useless root
          <div>fake</div>
          <div>fake</div>
          <div>fake</div>
       </div>
     }
}

Avec des fragments

  render() {
      return {
       <React.Fragment> ----> Not rendered to the DOM
          <div>fake</div>
          <div>fake</div>
          <div>fake</div>
       </React.Fragment>
     }
   }