Componentes de classe

Em React, os componentes são blocos de construção reutilizáveis que ajudam a criar interfaces de usuário. Existem dois tipos principais de componentes em React: componentes de função e componentes de classe.

Os componentes de classe são definidos como classes do JavaScript que estendem a classe React.Component do React. Eles têm um estado interno e podem conter métodos de ciclo de vida do React. Aqui está um exemplo de um componente de classe em React:

    import React from 'react';
    
    class MeuComponente extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          contador: 0
        };
      }
    
      componentDidMount() {
        console.log('O componente foi montado.');
      }
    
      componentDidUpdate() {
        console.log('O componente foi atualizado.');
      }
    
      componentWillUnmount() {
        console.log('O componente será desmontado.');
      }
    
      incrementarContador() {
        this.setState(prevState => ({
          contador: prevState.contador + 1
        }));
      }
    
      render() {
        return (
          <div>
            <h1>Contador: {this.state.contador}</h1>
            <button onClick={() => this.incrementarContador()}>Incrementar</button>
          </div>
        );
      }
    }
    
    export default MeuComponente;

Neste exemplo, temos um componente chamado MeuComponente que possui um estado interno representado pelo contador. Ele também possui três métodos de ciclo de vida do React: componentDidMount, componentDidUpdate e componentWillUnmount. Esses métodos são chamados em diferentes momentos do ciclo de vida do componente.

Além disso, o componente possui o método incrementarContador, que atualiza o estado do contador quando o botão "Incrementar" é clicado. O valor do contador é exibido no elemento <h1> dentro do método render.

Os componentes de classe podem ser renderizados da mesma forma que os componentes de função em React. Por exemplo, em um componente pai, você pode usar <MeuComponente /> para renderizar o componente MeuComponente.

Lembre-se de que os componentes de classe estão sendo gradualmente substituídos pelos componentes de função no React. Os componentes de função são mais simples e têm um desempenho melhor. No entanto, ainda é útil entender os componentes de classe, pois você pode encontrar código legado ou bibliotecas que os usam.