Fragmento de reação s é um recurso simples, mas elegante, lançado com o React v16.2.0. Apenas compreender sua existência permitirá que você escreva melhores componentes do React e economize muito tempo ao criar e estilizar layouts.
Este tutorial foi desenvolvido para ajudá-lo a entender o React Fragments e vários casos de uso em que seria útil.
Aqui está o que vamos cobrir:
- O que são fragmentos de reação?
- Fragmentos em layouts React
- Renderizando listas com fragmentos React
O que são fragmentos de reação?
Fragmentos são uma sintaxe moderna para adicionar vários elementos a um componente React sem envolvê-los em um nó DOM extra.
Fragmentos de React não produzem nenhum elemento extra no DOM, o que significa que os componentes filhos de um Fragmento serão renderizados sem nenhum nó DOM de agrupamento. Fragmentos de React permitem que você agrupe vários componentes irmãos sem introduzir qualquer marcação desnecessária no HTML renderizado.
Fragments in React layouts
Fragmentos de React servem como uma alternativa mais limpa ao uso de div s desnecessários em seu código.
Considere o seguinte exemplo para criar um layout simples de linhas e colunas usando F lexbo x :
import"./styles.css"; const Row=({children})=> {children} ; const Column=({children})=> {children} ; const Box=({color})=> (
); função padrão de exportação App () { Retorna (
);
}
Cada Row renderiza um div com conteúdo delimitador alinhado em uma única linha e uma Coluna renderiza conteúdo delimitador de maneira vertical. Dentro de cada Coluna , há um componente Box que renderiza um div simples com um contêiner de largura fixa e uma cor de fundo passada como suporte para ele.
/* styles.css */
.fileira { display: flex;
}
.col { flex: 1;
}
.caixa { largura mínima: 100px; altura mínima: 100px;
}
O código acima renderiza três colunas em uma única linha, conforme mostrado abaixo:
Vamos refatorar o código acima para separar as duas primeiras colunas em um componente diferente chamado ChildComponent . Imagine isso como um componente reutilizável que você pode querer desacoplar.
exportar função padrão App () { Retorna (
);
} const ChildComponent=()=> (
);
O resultado esperado deve ser o mesmo de antes, mas não é. O desacoplamento das duas primeiras colunas em um componente separado ChildComponent quebra o layout:
O ChildCompoent tem um div envolvendo todos os seus elementos JSX para agrupá-los. No entanto, esse div extra causa uma quebra no layout porque o navegador pensa que faz parte do layout. Seu navegador não sabe que você adicionou esse div para evitar um erro e ele é usado apenas como um empacotador para seu HTML delimitador.
Conforme a árvore de componentes se aninha mais profundamente, pode ser difícil depurar e rastrear de onde os nós extras estão vindo. Da mesma forma, se você estiver usando CSS Grids para estilizar e projetar seus layouts, desnecessário
import React from'react'; const ChildComponent=()=> ();
Existem muitas maneiras de criar e renderizar fragmentos. Você pode criar um Fragment usando a propriedade Fragment no objeto React importado, conforme mostrado acima. Você também pode importar um fragmento do React como um componente do React e usá-lo de maneira semelhante.
import React, {Fragment} de'react'; const ChildComponent=()=> (
);
Finalmente, você pode criar um fragmento React em tempo real usando a sintaxe abreviada para agrupar componentes usando um elemento HTML vazio como a sintaxe. Esta é a maneira mais limpa e fácil de usar Fragments; parece que você está usando um elemento HTML normal.
const ChildComponent=()=> ( <>);
Usar qualquer um dos três métodos acima traz de volta o layout original porque elimina qualquer div inútil em seu DOM.
Listas de renderização com fragmentos de reação
Vejamos outro caso de uso comum para fragmentos. Digamos que você queira renderizar uma lista de itens na página. Essa lista pode ser estática, gerada a partir de um arquivo JSON local ou recuperada de uma API.
Para fins de brevidade, usaremos uma lista estática:
import React from'react'; const items=["Item 1","Item 2","Item 3"]; const ItemRenderer=({item})=> ( Item de renderização:
{item}
); const renderItem=()=> items.map ((item, index)=>
);
Aqui, você está simplesmente percorrendo a matriz de itens e passando cada item como suporte para o componente ItemRenderer , que renderiza cada item da página. Se você inspecionar o código acima em um navegador, terá a seguinte estrutura DOM:
Item de renderização:
Item 1
Item de renderização:
Item 2
Item de renderização:
Item 3
Cada item é renderizado em um div pai que não tem significado como invólucro. Como não há estilo ou dados anexados ao div , ele pode ser substituído com segurança por um Fragmento React, conforme mostrado abaixo:
import React from'react'; const items=["Item 1","Item 2","Item 3"]; const ItemRenderer=({item})=> ( <> Item de renderização:
{item}
); const renderItem=()=> items.map ((item, index)=>
);
A estrutura do DOM parece muito mais limpa agora:
Item de renderização:
Item 1
Item de renderização:
Item 2
Item de renderização:
Item 3
Este é um caso de uso muito simplificado em que você pode renderizar um div extra em seu DOM. Quanto maiores forem as suas listas, mais significativo será o impacto.
Conforme seu aplicativo fica maior em tamanho e complexo em arquitetura, você pode acabar renderizando uma quantidade significativa de div s desnecessários para renderizar grandes listas em seu aplicativo. Isso pode inchar seu HTML, causando problemas de desempenho em dispositivos mais antigos.
Pode não ser tão significativo, mas renderizar elementos HTML desnecessários é sempre uma prática ruim. Se você tiver um componente de lista genérico para seu aplicativo, considere o uso de Fragments como wrappers para evitar a abstração de código e semântica limpos.
Por fim, Fragments permite que você passe uma propriedade-chave como adereços, mas observe que é o único acessório que pode aceitar:
import React from'react'; const items=["Item 1","Item 2","Item 3"]; const ItemRenderer=()=> (); Lista de todos os itens:
{items.map ((item, index)=> ()} Item de renderização:
{item}
Você só pode passar adereços para o seu Fragment se estiver renderizando como mostrado acima. Os adereços não podem ser passados para seus fragmentos se você estiver usando a notação abreviada. Uma boa prática é usar a sintaxe React.Fragment ou Fragment quando precisar passar chaves, especialmente ao renderizar usando um loop.
Conclusão
Os fragmentos permitem que você escreva um código mais limpo, legível e de fácil manutenção. Eles não são uma substituição para div s em seu HTML, mas oferecem uma abordagem melhor para estruturar e renderizar sua marcação se você estiver usando div s desnecessários em seu código.
Você pode evitar problemas que quebram seus layouts ou potencialmente otimizam seu tempo de renderização de marcação usando Fragments. No entanto, você só deve usá-los quando necessário. Se você precisar de um wrapper para seu JSX para estilização, use um div em vez disso.
A postagem React Fragments: Uma visão geral apareceu primeiro em LogRocket Blog .
