Hemos visto hasta ahora qué es una aplicación web de React, los estados y el ciclo de vida de un componente de React. También creamos un reloj básico usando una función para volver a renderizar la página cada segundo, lo que si crees que se puede lograr con o sin React. React no recomienda usar renderizaciones múltiples, sino que utiliza un enfoque con estado en el que la página se vuelve a renderizar una vez que se modifica un estado.
Nuestro objetivo para este artículo será retomar el código que habíamos escrito en el artículo anterior y crear una solución con estado que nos ayude a lograr el mismo resultado. Para empezar recordemos lo que habíamos desarrollado en el artículo anterior,
Abra el directorio de su proyecto de reacción y edite el archivo Index.js de la carpeta src:
índice src.js:
javascript
import React from 'react';
import ReactDOM from 'react-dom';
function showTime()
{
const myElement = (
<div>
<h1>Welcome to GeeksforGeeks!</h1>
<h2>{new Date().toLocaleTimeString()}</h2>
</div>
);
ReactDOM.render(
myElement,
document.getElementById("root")
);
}
setInterval(showTime, 1000)
Ahora, ¿cuál es el componente en el ejemplo anterior? En realidad, si prestas atención, no hay ningún componente. Estamos asignando un elemento JSX anidado llamado «myElement» para que contenga la hora más reciente y represente lo mismo cada segundo, que es una de las peores formas de implementar usando React. Ahora comenzaremos a implementarlo utilizando los métodos de estado y ciclo de vida que requerirán un componente con clase, comencemos creando uno de antemano.
Abra el directorio de su proyecto de reacción y edite el archivo Index.js de la carpeta src:
índice src.js:
javascript
import React from 'react';
import ReactDOM from 'react-dom';
class Clock extends React.Component {
}
Ahora que hemos definido la clase como «Reloj», primero debemos pensar en el proceso. «Accesorios» es el conjunto de atributos que rara vez cambian, mientras que «Estado» es el conjunto de atributos observables que se supone que cambian con el tiempo. Ahora, si pensamos en nuestra propia situación, nuestro reloj tiene exactamente dos partes, una es el título que dice «¡Bienvenido a GeeksforGeeks!» esto debe implementarse utilizando accesorios, ya que no cambiará a lo largo de la vida; la otra parte es el tiempo mismo que debe cambiarse en cada segundo. Solo usemos el constructor y el método de representación para crear primero el método principal para mostrar el título y la hora sin actualizarlo a intervalos regulares.
javascript
import React from 'react';
import ReactDOM from 'react-dom';
class Clock extends React.Component {
constructor(props)
{
super(props);
this.state = { time : new Date() };
}
render()
{
return (
<div><h1>Welcome to { this.props.title } !</h1>
<h2>{this.state.time}</h2></div>
);
}
}
ReactDOM.render(
<Clock title="GeeksforGeeks" />,
document.getElementById('root'));
Ahora que hemos creado nuestro propio componente Clock y hemos renderizado lo que requerimos, solo necesitamos encontrar una forma de actualizar la hora cada segundo. Ahora está claro que tenemos que establecer un intervalo para actualizar el estado en cada segundo y esto debe hacerse tan pronto como se monte el componente del reloj. Por lo tanto, tenemos que usar una función de ciclo de vida componentDidMount() donde estableceremos un intervalo para actualizar el estado y, para que la aplicación sea eficiente, usaremos el método componentWillUnmount() para borrar el intervalo. Veamos la siguiente implementación.
Abra el directorio de su proyecto de reacción y edite el archivo Index.js de la carpeta src:
índice src.js:
javascript
import React from 'react';
import ReactDOM from 'react-dom';
class Clock extends React.Component {
constructor(props)
{
super(props);
this.state = { time : new Date() };
}
// As soon as the Clock is mounted.
// Start the interval "timer".
// Call tick() every second.
componentDidMount()
{
this.timer = setInterval(
() => this.tick(),
1000);
}
// Before unmounting the Clock,
// Clear the interval "Timer"
// This step is a memory efficient step.
componentWillUnmount()
{
clearInterval(this.timer);
}
// This function updates the state,
// invokes re-render at each second.
tick()
{
this.setState({
time : new Date()
});
}
render()
{
return (
<div><h1>Welcome to { this.props.title } !</h1>
<h2>{this.state.time.toLocaleTimeString()}</h2></div>
);
}
}
ReactDOM.render(
<Clock title="GeeksforGeeks" />,
document.getElementById('root'));
¡Felicidades! Acaba de crear una aplicación web React utilizando Estados, Props y algunos métodos de ciclo de vida. Te estarás preguntando ¿eso es todo? No, ni siquiera es un bocado de todo el plato. Estén atentos a los próximos artículos en los que profundizaremos en React y crearemos algunos proyectos más sobre la marcha.