Por que os fragmentos no React 16 são melhores que os divs do contêiner?

No React 16.2, Fragmentsfoi adicionado suporte aprimorado para . Mais informações podem ser encontradas no post do React aqui.

Todos conhecemos o seguinte código:

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

Sim, precisamos de uma div de contêiner, mas não é grande coisa.

No React 16.2, podemos fazer isso para evitar a div do contêiner ao redor:

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

Nos dois casos, ainda precisamos de um elemento contêiner cercando os elementos internos.

Minha pergunta é: por que usar um Fragmentpreferível? Isso ajuda com o desempenho? Se sim, por quê? Amaria alguma introspecção.

1. É um pouco mais rápido e possui menos uso de memória (não é necessário criar um nó DOM extra). Isso só tem um benefício real em árvores muito grandes e / ou profundas, mas o desempenho do aplicativo geralmente sofre com a morte por mil cortes. Este é um corte a menos.
2. Alguns mecanismos CSS, como o Flexbox e o CSS Grid, têm um relacionamento pai-filho especial, e adicionar divs no meio dificulta a manutenção do layout desejado ao extrair componentes lógicos.
3. O inspetor DOM está menos confuso. :-)

Você pode encontrar as descrições de alguns outros casos de uso neste problema do React: Adicione API de fragmento para permitir o retorno de vários componentes da renderização

Adicionando a todas as respostas acima, há mais uma vantagem: legibilidade do código , o Fragmentcomponente suporta uma forma sintática de açúcar <>,. Assim, o código na sua pergunta pode ser escrito mais facilmente como:

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

De acordo com documentos ,

Em React, isso desugura para um <React.Fragment/>elemento, como no exemplo da seção anterior. (Estruturas sem reação que usam JSX podem ser compiladas para algo diferente.)

Livre de desordem, certo?

Observe que você ainda precisará usar a <Fragment>sintaxe se precisar fornecer keyao fragmento.

• Recursos adicionados não possíveis antes com JSX
• Melhor marcação jsx semântica. Os elementos do invólucro são usados ​​quando necessário, não porque são forçados.
• Menos marcação geral do Dom (desempenho aprimorado de renderização e menos sobrecarga de memória)

Tão simples quanto quando você não precisa de um elemento wrapper, não é obrigado a usá-lo. Ter menos elementos é ótimo, mas acho que o maior benefício é poder renderizar elementos em jsx que não eram possíveis anteriormente e adicionar melhor significado semântico aos elementos do wrapper, porque agora são opcionais.

Isso não era possível antes:

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

Olhando para o seguinte no React 15, você não pode dizer se o elemento wrapper é necessário ou não:

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

De acordo com os documentos do reactjs.org, as necessidades mais importantes, em <Fragment> </Fragment>vez das divs , são evitar a quebra da semântica do HTML. Quando usamos div em vez de <Fragment> </Fragment>quebrar a semântica do HTML.

Para saber mais sobre semântica html. por favor clique e também há casos em que se usam div é em vez de fragmentos Será html inválido, por exemplo olhada neste código:

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>

Fragmentos resolvem esse problema.

1. Usando <React.Fragment>...</React.Fragment>, podemos adicionar uma tag pai aos nossos elementos JSX sem adicionar um nó extra ao DOM.
2. você pode substituir as tags div extras por React.Fragment
3. escrever React.Fragment sempre é muito longo para você. React.Fragment possui uma sintaxe abreviada que você pode usar. Isto é<>...</>.