Construindo componentes
Como visto anteriormente, componente é uma pequena parte da interface que pode ser reutilizada em diferentes partes da aplicação. No React, os componentes são funções que retornam um pedaço de código JSX.
É claro que um componente não necessariamente é pequeno e com poucas linhas de código, mas é recomendado que seja. Todavia, boas práticas podem ser aplicadas mas falaremos sobre isso mais adiante.
Um componente pode ser construído de várias maneiras:
- Função
- Classe
- Arrow function
## Função
function Componente() {
return <h1>Olá, mundo!</h1>;
}
## Classe
class Componente extends React.Component {
render() {
return <h1>Olá, mundo!</h1>;
}
}
## Arrow function
const Componente = () => {
return <h1>Olá, mundo!</h1>;
}
Os três formatos estão corretos e funcionam da mesma maneira. A diferença é que a classe pode ter um estado e métodos próprios, enquanto a função e a arrow function não. Com relação a performance, a arrow function é a mais recomendada, pois é a mais rápida, mas a diferença é mínima.
Utilização de Classe não é muito recomendado, é mais verboso e não traz os benefícios do uso de Hooks do React.
Até a versão 16.8 do React, a única maneira de um componente ter estado e métodos próprios era utilizando classe. A partir da versão 16.8, foi introduzido o conceito de Hooks, que permite que um componente funcional tenha estado e métodos próprios.
É importante entender alguns conceitos que são utilizados dentro de um componente, como as props e o estado.
Falarei sobre isso no próximo tópico.