3

Sou um iniciante em React e estou com uma dúvida bem simples, eu quero saber qual a diferença a criação e exportação de um componente, acontece que já vi 3 formas diferentes e quero saber se existe diferença entre elas.

//Primeira forma:
export default function Home() {</
    return()
}

//Segunda forma:
function Home(){
  return()
}
export default Home;

//Terceira forma:
const Home = () => {
   return()
}
export default Home;

2 Respostas 2

4

Na verdade, sua pergunta não é sobre React, e sim sobre funções e módulos.

1. A parte export se refere aos módulos

(Documentação da MDN sobre módulos)

Os módulos foram integrados ao ECMAscript/javascript há poucos anos, e decorrem da necessidade de maior organização de partes reutilizáveis de código que, antes, tinham que ser feitos com bibliotecas de terceiros ou referenciados com a tag script, que precisavam ser declaradas seguindo estritamente a ordem de dependências para seu script não quebrar.

Em síntese, você apresentou duas formas diferentes de disponibilizar um módulo: colocar o export antes do nome da função ou declarar a função normalmente e colocar os exports após o nome da função a ser exportada, ou todos juntos no final do módulo. O resultado é o mesmo, a diferença é só do ponto de vista de organização de código (que geralmente é um consenso da equipe que trabalha em um projeto; as grandes empresas costumam ter guias de estilo, e alguns até viram referência para além da empresa).

Portanto, quanto aos exports, as duas formas que você apresentou são idênticas.

Duas observações:

  1. Um módulo pode ter mais de uma função ou variável exportada. A explicação refoge ao âmbito da pergunta, mas uma costuma (embora não seja obrigatório) ser marcada como default.

  2. As opções de exportação têm o mesmo resultado, mas a importação não. É possível fazer a importação na raiz do módulo (nesse caso, o outro módulo será carregado de imediato), mas também é possível fazer a importação em locais posteriores do seu código, o que pode melhorar a performance (por exemplo, só importar uma biblioteca de frontend de ferramentas de admin se o usuário for um admin, etc). Segue documentação (em inglês).

2. A outra parte se refere a como declarar uma função (Documentação da MDN sobre function expressions, com link para arrow functions).

As duas primeiras formas que você apontou usam uma function expression; a terceira, uma arrow function. São apenas formas diferentes de declarar funções. A principal diferença é que, na arrow function (a terceira forma), a função não tem um contexto próprio e usa o contexto do lugar onde foi declarada; porém, se é um componente React declarado em um módulo, não fará diferença.

Observação: existe uma forma diferente de declarar um componente, aí sim seria uma pergunta típica do React: você pode ter componentes de classe e componentes funcionais. Todos os seus 3 exemplos são componentes funcionais (declarados mediante funções). Existe também a possibilidade de declará-los como classes. Essa era, inclusive, a única forma. Os componentes funcionais são relativamente recentes no React, e foram criados com a intenção de substituir os componentes de classe (embora isso não seja uma regra obrigatória, hoje em dia quem usa componentes de classe o faz por padronização quando tem um código legado, ou porque, por qualquer motivo, está mais familiarizado com eles, mas a tendência clara é usar componentes funcionais, e não de classe).

Portanto, sim: no âmbito do React, as três formas que você apontou são similares.

1

Man, na verdade se resume a duas maneiras de exportar, basicamente é sobre o uso do default.

  1. IMPLÍCITA:
export default function Home() {
 // code...
}

onde você importa usando o nome que quiser, ex:

import NomeQueQuiser from './home'
  1. NOMEADA:
export function Home() {
 // code...
}

já dessa maneira, o modo de importar o modulo/função muda, obrigando a utilizar o mesmo nome da função, inclusive podendo usar destructuring, ex:

import { Home } from './home'



Sobre a forma que você declara a função, é indiferente para a exportação. ex:

// declarativa (function declaration)
function Home () {}

// seta (arrow function)
const Home = () => {}



Espero ter ajudado, man! abraço!

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .