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 export
s 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:
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
.
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.