Os Componentes de Classe no React

Os componentes de classe são uma forma de escrever componentes React que possuem estado interno e métodos. Eles são escritos usando uma classe ECMAScript 6 que estende a classe React.Component. Essa é uma abordagem diferente da utilização de componentes funcionais, que não possuem estado interno e são definidos como funções.

Veja um exemplo de um componente de classe simples em React:

import React, { Component } from 'react';

class ExampleComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      message: 'Hello World'
    };
  }

  render() {
    return <div>{this.state.message}</div>;
  }
}

export default ExampleComponent;

Vamos entender o código que acabamos de ver:

Neste exemplo, o componente de classe ExampleComponent estende a classe React.Component. No construtor, usamos o método super() para passar as propriedades para o construtor da classe pai, React.Component.

Logo após, definimos o estado inicial do componente usando this.state. E incluímos o método render() que é invocado pelo React para renderizar o componente this.state.message na tela.

Além disso eles apresentam algumas características específicas que os diferenciam das funções ou Componentes de Função, como:

• Eles são conhecidos também como componentes “inteligentes” ou “com estado”, pois tendem a implementar lógica e estado.( Como dito no artigo).

• Os métodos de ciclo de vida React podem ser usados ​​dentro de componentes de classe (por exemplo, componentDidMount).

• Podemos passar props para componentes e acessá-los por this.props.

Para reforçar a compressão de estrutura de escrita e como funciona Componentes dde Classe no React, veja um código baseado no código anterior, mas utilizando um botão de clique que pode alterar o estado, que é possível nessa linguagem.

import React, { Component } from 'react';

class ExampleComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      message: 'Hello World'
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState({
      message: 'You clicked the button!'
    });
  }

  render() {
    return (
      <div>
        <div>{this.state.message}</div>
        <button onClick={this.handleClick}>Click me</button>
      </div>
    );
  }
}

export default ExampleComponent;

O que mudamos? Adicionamos um método handleClick() que é chamado quando o usuário clica no botão. Usamos this.setState() para alterar o estado interno do componente.

Em resumo, os componentes de classe são uma abordagem mais poderosa e flexível para escrever componentes React que possuem estado interno e métodos personalizados. Eles são uma opção valiosa quando precisamos de mais controle sobre o comportament