Normalmente creamos nuestros componentes como funciones. Sin embargo, también puedes usar clases para crear componentes en React.
De hecho, se preferían las clases para crear componentes complejos y las funciones se limitaban a componentes simples.
En esta lección de nuestro curso completo y gratuito para principiantes sobre React 18, aprenderá cómo convertir nuestro componente de función del último tutorial en un componente de clase.
Crear un componente de clase
Creamos un componente de clase en React extendiendo React.Component como se muestra a continuación. El nombre de la clase es el mismo que el nombre de la función del tutorial anterior.
class RandomGenerator extends React.Component {
// Other code for our class
}Comencemos agregando un constructor a nuestra clase que se encargará de la inicialización.
class RandomGenerator extends React.Component {
constructor(props) {
super(props);
this.state = {
randomNumber: Math.floor(Math.random() * 1000) + props.low
};
}
}Pasamos props al método constructor donde llamamos a la superclase Componente usando super(props). También usamos el constructor para inicializar el estado de nuestro componente con la ayuda de la propiedad state. La propiedad state es en realidad un objeto que podemos usar para almacenar cualquier tipo de información que necesitemos. En nuestro caso, lo usamos para almacenar nuestro número aleatorio (randomNumber).
Ahora agregaremos un método render() a la clase que renderizará nuestro componente. Simplemente contendrá el código JSX que escribimos para representar el componente.
render() {
return (
<div class="container">
<h1>Random Number Generator</h1>
<h2>{this.state.randomNumber}</h2>
</div>
);
}Es posible que hayas notado que reemplazamos randomNumber con this.state.randomNumber. Esto se debe a que el número aleatorio se almacena dentro de la propiedad de state de nuestra clase de componente.
En este punto, nuestro componente generará un número aleatorio y lo mostrará en pantalla solo una vez. Esto tiene sentido porque no hemos escrito ningún código para generar un nuevo número aleatorio periódicamente.
Actualización del state del componente
Ahora, me gustaría presentarles el concepto de mounting y unmounting en React. Se considera que un componente está montado cuando se representa por primera vez en el DOM. Se considera que un componente está desmontado siempre que el DOM producido por el componente se elimina de la página web.
El montaje y desmontaje son parte del ciclo de vida de un componente. Hay métodos especiales llamados componenteDidMount() y componenteWillUnmount() que se ejecutan después de montar y desmontar un componente respectivamente.
El código dentro de componenteDidMount() se ejecutará después de que el componente se haya representado en el DOM. Podemos configurar un temporizador aquí que actualizará el state de nuestro componente cada dos segundos. Aquí está el código del método:
componentDidMount() {
this.numTimer = setInterval(() => {
let tempVal = Math.floor(Math.random() * 1000) + this.props.low;
this.setState({ randomNumber: tempVal });
}, 2000);
}¿Notaste la llamada a this.setState() dentro de la función de flecha? Esta llamada le permite a React saber que el estado del componente ha cambiado y es necesario renderizarlo nuevamente. Esto activará una llamada al método render(). El método render() verá que el valor de this.state.randomNumber ha cambiado y React actualizará el DOM para reflejar el nuevo valor.
Almacenamos una referencia a nuestro temporizador en el campo numTimer para poder destruirlo más tarde cuando nuestro componente se desmonte. El código para componenteWillUnmount() debería verse así:
componentWillUnmount() {
clearInterval(this.numTimer);
}Aquí está el código completo de nuestra clase de componente RandomGenerator para evitar confusiones.
class RandomGenerator extends React.Component {
constructor(props) {
super(props);
this.state = {
randomNumber: Math.floor(Math.random() * 1000) + props.low
};
}
componentDidMount() {
this.numTimer = setInterval(() => {
let tempVal = Math.floor(Math.random() * 1000) + this.props.low;
this.setState({ randomNumber: tempVal });
}, 2000);
}
componentWillUnmount() {
clearInterval(this.numTimer);
}
render() {
return (
<div class="container">
<h1>Random Number Generator</h1>
<h2>{this.state.randomNumber}</h2>
</div>
);
}
}Conclusiones
Ahora hemos implementado con éxito nuestro generador de números aleatorios como componente de clase. Usar componentes de clase era el camino a seguir cuando se trabajaba con el estado en el pasado. Sin embargo, las cosas han cambiado con la introducción de hooks y muchos desarrolladores ahora prefieren utilizar componentes funcionales. Sigue siendo una buena idea sentirse cómodo con ambos enfoques.
Puedes consultar el artículo original en inglés en
https://code.tutsplus.com/react-fundamentals-writing-components-as-classes–cms-42010t?_ga=2.73708757.631530200.1700595341-398450809.1700595341