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.
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.