Perché i frammenti in React 16 sono migliori dei div container?

In React 16.2 Fragmentsè stato aggiunto un supporto migliorato per . Maggiori informazioni sono disponibili sul post del blog di React qui.

Conosciamo tutti il ​​seguente codice:

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

Sì, abbiamo bisogno di un div container, ma non è un grosso problema.

In React 16.2, possiamo farlo per evitare il div contenitore circostante:

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

In entrambi i casi, abbiamo ancora bisogno di un elemento contenitore che circonda gli elementi interni.

La mia domanda è: perché usare un Fragmentpreferibile? Aiuta con le prestazioni? Se è così, perché? Mi piacerebbe un po 'di intuizione.

1. È un po 'più veloce e ha meno utilizzo della memoria (non è necessario creare un nodo DOM aggiuntivo). Questo ha un reale vantaggio solo su alberi molto grandi e / o profondi, ma le prestazioni dell'applicazione spesso subiscono la morte di mille tagli. Questo è un taglio in meno.
2. Alcuni meccanismi CSS come Flexbox e CSS Grid hanno una relazione genitore-figlio speciale e l'aggiunta di divs nel mezzo rende difficile mantenere il layout desiderato durante l'estrazione di componenti logici.
3. L'ispettore DOM è meno disordinato. :-)

Puoi trovare le descrizioni di alcuni altri casi d'uso in questo problema di React: Aggiungi API frammento per consentire la restituzione di più componenti dal rendering

Aggiungendo a tutte le risposte di cui sopra v'è un altro vantaggio: la leggibilità del codice , Fragmentsupporti componenti una forma di zucchero sintattico, <>. Quindi il codice nella tua domanda può essere scritto più facilmente come:

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

Secondo i documenti ,

In React, questo desugars a un <React.Fragment/>elemento, come nell'esempio della sezione precedente. (I framework non React che utilizzano JSX possono essere compilati in modo diverso.)

Senza confusione, vero?

Si noti che è ancora necessario utilizzare la <Fragment>sintassi se è necessario fornire keyal frammento.

• Aggiunte funzionalità non possibili prima con JSX
• Migliore markup jsx semantico. Gli elementi wrapper vengono utilizzati quando necessario, non perché sono costretti a farlo.
• Meno markup dom complessivo (aumento delle prestazioni di rendering e minore sovraccarico di memoria)

Semplice come quando non hai bisogno di un elemento wrapper non sei obbligato a usarne uno. Avere meno elementi è fantastico, ma penso che il più grande vantaggio sia la possibilità di renderizzare elementi in jsx che prima non erano possibili e aggiungere un migliore significato semantico agli elementi wrapper perché ora sono opzionali.

Questo non era possibile prima:

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

Dando un'occhiata a quanto segue in React 15 non è possibile stabilire se l'elemento wrapper è necessario o meno:

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

Secondo i documenti Reactjs.org, le esigenze più importanti <Fragment> </Fragment>invece di quelle di div sono evitare la rottura della semantica HTML. Quando usiamo div invece di <Fragment> </Fragment>rompere la semantica HTML.

Per saperne di più sulla semantica html. fai clic e inoltre ci sono casi in cui se usi div invece di Fragments sarà html non valido, ad esempio guarda questo codice:

class Columns extends React.Component {
  render() {
    return (
      <div>
        <td>Hello</td>
        <td>World</td>
      </div>
    );
  }
}

<table>
      <tr>
        <div>
          <td>Hello</td>
          <td>World</td>
        </div>
      </tr>
 </table>

I frammenti risolvono questo problema.

1. Usando <React.Fragment>...</React.Fragment>, possiamo aggiungere un tag genitore ai nostri elementi JSX senza aggiungere un nodo extra al DOM.
2. puoi sostituire i tag div extra con React.Fragment
3. scrivere React.Fragment ogni volta che è troppo lungo per te. React.Fragment ha una sintassi abbreviata che puoi usare. È<>...</>.