Quando nós falamos em React, um dos principais e mais poderosos conceitos da biblioteca está na criação de componentes.
Leia!
Diferente de outros frameworks JavaScript populares, o React usa objetos para criar seus elementos e gerar os recursos finais que serão renderizados na tela do usuário.
O que são componentes React?
Geralmente, componentes React são como funções JavaScript. Eles aceitam entradas como propriedades (chamadas “props”) e retornam novos elementos React, os chamados JSX.
Os componentes permitem que a UI seja dividida em partes independentes e reutilizáveis, ou seja, trata cada parte da aplicação como um bloco isolado, livre de outras dependências externas.
>> Leitura Recomendada:
Leia nosso artigo sobre front-end: diferenças entre UI X UX
Componentes funcionais sem estado e componentes de classe
Em uma aplicação React do mundo real, é comum encontrar vários tipos de componentes distribuídos na aplicação, dentre os mais usados: componente de classe e componente funcional sem estado.
De modo prático, alguns componentes irão controlar o estado da aplicação e fazer chamadas em uma API externa para popular dados enquanto outros irão se preocupar apenas com a renderização desses dados para o usuário.
>>Leitura Recomendada:
Um guia para usar React JS
Componentes de classe
Componentes de classe são componentes que possuem um alto nível de poder dentro da aplicação, pois além gerenciar o próprio estado, herdam os chamados métodos de ciclo de vida do React, lidam com partes lógicas da aplicação e manipulam eventos através de métodos que podem ser invocados em qualquer lugar do componente ou em seus filhos.
Componentes funcionais sem estado
Os componentes funcionais sem estado, são representados por funções JavaScript e como o nome sugere, não se preocupam (e nem devem se preocupar) com o gerenciamento de estado do componente, mas apenas com a apresentação dos dados na aplicação.
>> Leitura Recomendada:
Svelte: o framework JavaScript que não é um framework
Exemplos de componentes React
Em ambos os casos, geralmente, esses componentes recebem dados via propriedades. O React os encapsula em um objeto “props” que fica disponível para ser consumido dentro do componente.
Vamos ver na prática um simples exemplo de como poderíamos criar um componente que desse boas vindas à um usuário utilizando as duas formas.
Componente de classe
Componente funcional sem estado
Uma vez atribuído seus valores, o resultado final de ambos os componentes será o mesmo, pois a ideia por trás desse exemplo é mostrar como declarar cada tipo de componente e entender como o React trabalha com essas informações.
Embora os componentes façam exatamente a mesma coisa, algo um tanto diferente ocorre na forma como acessamos os dados recebidos por props. No componente de classe precisamos estender a classe Component padrão do React e acessar seus valores através do objeto this.
Já no componente funcional, o this não existe, pois o mesmo é apenas uma função que pode acessar os valores do objeto diretamente, exatamente como se estivesse recebendo esses dados por parâmetros.
Outra diferença bastante notável está na simplicidade e na quantidade de linhas de código que são usadas para criar cada tipo de componente, o que reflete também na performance da aplicação uma vez que funções são executadas um pouco mais rapidamente do que classes.
Componentes de classe ou componentes funcionais?
Aqui vai a receita do bolo!
Escolha componentes funcionais sempre que possível (por serem mais simples e mais rápidos), ou seja, quando você apenas quer exibir alguma UI.
Use componentes de classe sempre que existir tarefas mais complexas a serem feitas, como lidar com alguma lógica, gerenciar o estado e manipular eventos.
Cenários de escolha reais
- Você quer criar um componente que exibe o avatar do usuário
- Você quer criar um componente padrão para exibir posts
- Você quer criar um componente de dropdown
- Você quer criar um componente de busca
- Você quer criar uma tabela para exibir uma lista de dados
- Você quer criar um componente que valide os dados de um formulário
- Você quer criar um componente que exiba um loader
Escolhas reais para cada cenário
Se você fosse criar tais componentes, de que tipo eles seriam? Vamos dar uma olhada mais de perto em cada item.
- Componente funcional sem estado
- Componente funcional sem estado
- Componente de classe
- Componente de classe
- Componente funcional sem estado
- Componente de classe
- Componente funcional sem estado
O motivo da escolha de cada item se baseia na responsabilidade de cada componente. Note que o padrão citado acima se torna cada vez mais evidente em cada caso de uso.
Para os casos 1, 2, 5 e 7 sempre vamos preferir usar componentes funcionais, pois eles sempre irão exibir informações, sem a necessidade de executar tarefas mais complexas.
Para os casos 3, 4 e 6 sempre vamos preferir usar componentes de classe, pois eles sempre irão executar mais tarefas além de apenas exibir algum dado na tela do usuário.
Um dropdown, por exemplo, precisaria de pelo menos 1 estado (aberto/fechado) para funcionar como esperado, assim como uma busca precisa fazer requisições em uma API e um formulário de contato validar as entradas do usuário.
De forma mais prática, o componente de avatar poderia ser escrito da seguinte forma.
Note que o nosso componente Avatar exibe uma imagem com os estilos aplicados aplicados por meio de um objeto style e a url da imagem que será exibida por meio de uma url que é passado como prop.
Diferente do nosso primeiro exemplo Hello, aqui nós conseguimos extrair a propriedade url do objeto props, graças ao destructuring presente nas novas versões do JavaScript (ES6), embora o mesmo pudesse ser acessado como props.url.
Voltando ao modelo de classe, vamos ver como seria um componente de busca. Para isso, iremos utilizar a API do github para pesquisar por usuários.
Nesse exemplo, podemos observar que temos tarefas mais complexas a serem executadas.
Primeiro iniciamos o componente com um objeto state que será responsável por guardar a query digitada no input e os dados quando a chamada na API for concluída.
Temos um método que é chamado sempre que o valor do input muda, e por fim uma lista que mostra os usuários retornados na busca.
Algo importante a ser observado aqui, está na forma como o React lida com os dados. Após a chamada na API ser resolvida, usamos this.setState que define os novos valores que serão mantidos no estado do componente.
Um componente de classe também fornece o método render que é responsável por exibir os dados na interface do usuário.
Com isso, nós temos um componente de classe que inicia com um estado inicial, faz chamadas em uma API externa e monta uma lista com os resultados encontrados.
Composição de componentes React
Composição de componentes é uma das features mais poderosas em aplicações React, e por si só mereciam um post exclusivo só para isso.
Se você já usa React no seu dia a dia e quer saber mais sobre boas práticas em componentes React, fique à vontade para ler “Boas práticas na criação e separação de responsabilidades em componentes React“.
De modo simples, composição nada mais é do que combinarmos pequenas funções para construirmos algo maior. Nesse caso, combinar outros componentes para criar componentes mais completos.
Um bom exemplo nesse sentido, seria pegarmos ambos os exemplos citados acima, e combiná-los para construir um componente mais completo.
Vamos ver como ficaria isso na prática.
Nesse exemplo, simplesmente importamos o componente de Avatar na linha 2, removemos a estilização nos itens da lista e por fim, invocamos o componente Avatar passando a url do usuário para ele.
Wow! Agora temos um componente mais mais bonito, mais completo e composto. 🎉🎉🎉
Espero que você tenha lido até aqui e se divertido criando componentes React.
Fique à vontade para fazer um fork dos exemplos citados e fazer suas próprias implementações, ou ainda melhor: composições.
Um forte abraço e até a próxima!
return <ThankYou />
Crie um perfil na GeekHunter e receba propostas alinhadas ao seu perfil. São mais de 1000 vagas abertas, inclusive Vagas React e Vagas React Native.
