Tipos de componente React

Componentes react são a base de toda interface construida em react, neste post abordaremos os tipos de componente React disponíveis. De um simples TODO app até algo como rede social, componentes são essenciais para construir as nossas Interfaces.

O que são componentes react?

Antes de falar dos tipos de componente react precisamos entender os princípios de um componente react.

1. São os elementos base para construção de uma interface.
2. São independentes e reutilizáveis.
3. Permite agilizar a construção de aplicações.

Tipos de Componente react

Existem duas formas clássicas de se trabalhar com componentes React, são os componentes de classe e os componentes de função, cada um terá uma particularidade e um caso que melhor se encaixa.

Componente de Classe

É uma classe JavaScript que herda da classe Component do React. Assim possuindo todos os métodos necessários para um componente React. O componente deve possuir um método render().

O componente de classe é instanciado e o método de ciclo de vida diferente é mantido ativo e sendo executado e invocado dependendo da fase do componente de classe.

Além disso, os componentes de classe são stateful, ou seja, possuem um estado próprio, para saber mais sobre confira o post stateful vs. stateless. E o componente de classe pode invocar os métodos de ciclo de vida de um componente.

class Cabecalho extends React.Component {
  render() {
   return (
    <h1> Olá, {this.props.name} </h1>
   );
  }
}Code language: JavaScript (javascript)

Componente funcionais

Um componente funcional é apenas uma função pura de JavaScript simples que aceita props como um argumento e retorna um elemento React (JSX). O componente funcional é executado de cima para baixo e, uma vez que a função é retornada, ela não pode ser mantida viva.

Também conhecidos como componentes stateless, pois aceitam simplesmente dados e os exibem de alguma forma, são os principais responsáveis ​​por renderizar a interface do usuário. Os métodos de ciclo de vida do React (por exemplo, componentDidMount) não podem ser usados em componentes funcionais.

function Cabeçalho(props) {
 return (
  <h1>Olá, {props.name}</h1>
 );
}Code language: JavaScript (javascript)

Quando devo usar componentes de classe ou funcional

Antes de decidir quais tipos de componente react são necessários para a sua aplicação, você precisa ter um entendimento sobre o conceito de estado. Mas quando temos componentes que são independentes e possuem alguma lógica interna e depende de um estado devemos optar por componentes de classe.

Componentes com um objetivo apenas visual devem ser criados como funcionais, esse é a regra básica na criação de componentes, sempre comece criando componentes funcionais.

Na versão do React 16.8 ou superior é possível a utilização de hooks assim utilizar o estado de outros recursos sem a necessidade de utilizar Componentes de classe.