Componente de Classe
Os componentes de classe são uma das formas tradicionais de criar componentes em React e têm sido fundamentais para o desenvolvimento de aplicações React desde as versões iniciais da biblioteca. Esses componentes são classes JavaScript que estendem a classe React.Component e fornecem uma maneira robusta de gerenciar o estado e o ciclo de vida dos componentes.
Características dos componentes de classe
Estado Interno
Os componentes de classe têm a capacidade de manter um estado interno, acessível por meio do método setState. Isso permite que eles reajam a eventos, armazenem dados e atualizem a interface do usuário conforme necessário.
Métodos do Ciclo de Vida
Componentes de classe possuem métodos específicos do ciclo de vida, como componentDidMount, componentDidUpdate e componentWillUnmount. Esses métodos oferecem pontos de gancho que podem ser utilizados para realizar ações em diferentes estágios do ciclo de vida do componente.
Lógica mais complexa
São adequados para situações em que a lógica do componente é mais complexa e envolve manipulação de estado, efeitos colaterais ou interações mais avançadas.
Sintaxe básica
// Exemplo de Componente de Classe
import React, { Component } from 'react';
class Saudacao extends Component {
constructor(props) {
super(props);
this.state = { nome: 'Visitante' };
}
atualizarNome = () => {
const novoNome = prompt('Digite seu nome:');
this.setState({ nome: novoNome });
};
render() {
return (
<div>
<p>{`Olá, ${this.state.nome}!`}</p>
<button onClick={this.atualizarNome}>Atualizar Nome</button>
</div>
);
}
}Neste exemplo, Saudacao é um componente de classe que possui um estado interno chamado nome. O método atualizarNome é chamado quando o botão é clicado, atualizando o estado e, por consequência, a interface do usuário.
Quando usar?
Componentes de classe são uma boa escolha quando a lógica do componente envolve estado interno complexo, lógica de ciclo de vida ou manipulação de eventos sofisticada.
Em projetos mais antigos ou em código legado, você pode encontrar mais componentes de classe, pois eram a principal abordagem antes da introdução dos Hooks no React 16.8.