React recommends to define components as functions instead of classes. See how to migrate.

Component es la clase base para los componentes de React definidos como clases de JavaScript. Los componentes de clases aún son soportados por React, pero no se recomienda que sean usados en código nuevo.

Para definir un componente de React como una clase, extend la clase integrada Component y defina un método [render](<https://beta.reactjs.org/reference/react/Component#render>).

import { Component } from 'react';
class Saludo extends Component {
  render() {    
			return <h1>Hola, {this.props.name}!</h1>;  
	}
}

Solo el método render es requerido, los otros métodos son opcionales.

state

El estado de un componente de tipo clase está disponible como this.state. El state debe ser un objeto. No modifiques el estado directamente. Si deseas cambiar el estado, invoca la función setState con el nuevo estado y pasa como parámetro un objeto que contenga solo los cambios que deseas hacer. Ejemplo:

class Counter extends Component {
  state = {
    age: 42,
		date: 1/12/2005,
  };

  handleAgeChange = () => {
    this.setState({
      age: this.state.age + 1 
    });
  };

  render() {
    return (
      <>
        <button onClick={this.handleAgeChange}>
        Increment age
        </button>
        <p>You are {this.state.age}.</p>
      </>
    );
  }
}

Se puede ver como gracias a setState podemos modificar solo una parte del estado sin necesidad de volver a definir todos los datos.

Ciclo de vida

A diferencia de los componentes de tipo función, los de tipo clase no deben usar los efectos de React (”React.useEffect”). Estos tienen otra forma de comportarse. Este tipo de comportamiento, es replicable gracias a los métodos de ciclos de vida de los componentes.

Aviso: Características obsoletas o descontinuadas hasta la fecha, no serán tomadas en cuenta.

componentDidMount()

Se ejecuta después que la salida del componente ha sido renderizada en el DOM. Este es un lugar común para empezar a llamar datos, configurar subscripciones, o manipular nodos del DOM.