El ciclo de vida del componente React es un concepto importante que se debe comprender al desarrollar aplicaciones con React. Permite a los desarrolladores controlar y modificar componentes a lo largo de su ciclo de vida, desde la creación hasta la destrucción. El ciclo de vida del componente de reacción consta de varios métodos en diferentes etapas de la existencia de un componente. Comprender cómo estos métodos interactúan entre sí puede ser (…)
El ciclo de vida del componente React es un concepto importante que se debe comprender al desarrollar aplicaciones con React. Permite a los desarrolladores controlar y modificar componentes a lo largo de su ciclo de vida, desde la creación hasta la destrucción. El ciclo de vida del componente de reacción consta de varios métodos en diferentes etapas de la existencia de un componente. Comprender cómo estos métodos interactúan entre sí puede ser fundamental para crear código eficiente y fácil de mantener.
Este artículo analizará el ciclo de vida del componente React, por qué es importante y cómo puede utilizar sus diversos métodos de manera efectiva en el proceso de desarrollo de su aplicación. Analizaré algunos de los conceptos clave detrás de la implementación de los ciclos de vida de React, incluido el ensamblaje, la actualización, el desensamblaje y los errores. También proporcionaré ejemplos de cómo utilizar mejor cada uno para obtener el máximo beneficio en términos de optimización del rendimiento y prevención/resolución de errores.
Antes de continuar, vale la pena señalar un hecho interesante sobre la popularidad de React en todo el mundo. Según la última encuesta Stack Overflow de 2021 , el 42,62% de los desarrolladores informaron haber usado React más que cualquier otra biblioteca durante el año pasado. Esto resalta la posición de React como la opción clara para construir interfaces de usuario dinámicas y escalables.
¿Qué es un componente en React?
En React, un componente es un componente básico para crear interfaces de usuario. Los componentes son esencialmente piezas de código reutilizables que se pueden combinar para crear una interfaz de usuario más compleja. Se puede considerar un componente como una función de JavaScript que devuelve un fragmento de código (a menudo llamado JSX) que representa una parte de la interfaz de usuario.
Hay dos tipos principales de componentes: componentes funcionales y componentes de clase. Los componentes funcionales son más simples y livianos, mientras que los componentes de clase son más poderosos y pueden acceder a más funciones, como métodos de estado y ciclo de vida.
Aquí hay un ejemplo de un componente simple y funcional en React:
importar Reaccionar desde 'reaccionar';
función Saludo (accesorios) {
devolver (
<h1>¡Hola, {props.name}!</h1>
);
}
exportar saludo predeterminado;
En este ejemplo, el componente Saludo es un componente funcional que toma un nombre y devuelve un elemento h1 con el mensaje "¡Hola, nombre!".
El ciclo de vida del componente React
¿Eres nuevo en el desarrollo de React y te preguntas cómo gestionar el estado de tus componentes? O tal vez sea un desarrollador experimentado que busca optimizar su código y mejorar la experiencia del usuario. Cualquiera que sea su nivel de conocimiento, comprender el ciclo de vida de los componentes de React es fundamental para crear aplicaciones sólidas y eficientes. En esta sección, veremos las diferentes etapas del ciclo de vida del componente y los métodos asociados con cada etapa.
Al final, tendrá una comprensión sólida de cómo funcionan los componentes en React siguiendo un ejemplo paso a paso basado en casos para que esté bien equipado para crear interfaces de usuario dinámicas y atractivas.
El ciclo de vida del componente React se puede dividir en tres fases principales: ensamblaje, actualización y desmontaje. Cada fase tiene varios métodos invocados en puntos específicos del ciclo de vida del componente.
Veamos ahora una tabla que resume las diferentes etapas del ciclo de vida del componente React y los métodos asociados con cada etapa:
| Etapa del ciclo de la vida | Métodos |
| Asamblea | constructor
getDerivedStateFromProps estático prestar componenteDidMount |
| Actualizando | getDerivedStateFromProps estático
debería actualizar componentes prestar obtener instantánea antes de actualizar componenteDidUpdate |
| Desmontaje | componenteWillUnmount |
| Manejo de errores | getDerivedStateFromError estático
componenteDidCatch |
Ahora que conocemos las etapas del ciclo de vida de un componente de React, exploremos cada uno de sus métodos con más detalle para obtener una comprensión más profunda de cómo funcionan y para qué se utilizan.
Asamblea
La fase de ensamblaje ocurre cuando se crea un componente y se inserta en el DOM. Durante esta fase, se invocan los siguientes métodos:
constructor
Cuando se crea un componente, el método constructor es el primero en ser llamado. Se utiliza para inicializar el estado del componente y vincular controladores de eventos.
clase MiComponente extiende React.Component {
constructor(accesorios) {
súper(accesorios);
este.estado = {
contar: 0
};
this.handleClick = this.handleClick.bind(esto);
}
manejarClic {
this.setState({ recuento: this.state.count + 1 });
}
prestar {
devolver (
<div>
<p>Hiciste clic en {this.state.count} veces</p>
<button onClick={this.handleClick}>Haz clic en mí</button>
</div>
);
}
}
getDerivedStateFromProps
Este método se llama justo después del constructor, lo que permite que el componente actualice su estado en función de los cambios en sus accesorios. Este método debe devolver un objeto para actualizar el estado o nulo si no se requiere ninguna actualización.
clase MiComponente extiende React.Component {
getDerivedStateFromProps estático (nextProps, prevState) {
if (siguienteProps.valor! == estadoprev.valor) {
return {valor: nextProps.value};
}
devolver nulo;
}
constructor(accesorios) {
súper(accesorios);
este.estado = {
valor: accesorios.valor
};
}
prestar {
return <div>{this.state.value}</div>;
}
}
prestar
Este método es responsable de representar la interfaz de usuario del componente. Debe devolver un elemento React, una expresión JSX o una llamada a React.createElement.
clase MiComponente extiende React.Component {
prestar {
return <div>¡Hola, {this.props.name}!</div>;
}
}
componenteDidMount
Este método se llama después de que el componente se renderiza por primera vez. Realiza cualquier efecto secundario, como obtener datos de una API o configurar detectores de eventos.
clase MiComponente extiende React.Component {
componenteDidMount {
buscar('
.entonces(respuesta => respuesta.json)
.then(datos => this.setState({datos}));
}
prestar {
devolver (
<div>
{estos.datos.de.estado? (
<ul>
{this.state.data.map(item => <li key={item.id}>{item.name}</li>)}
</ul>
): (
<p>Cargando datos...</p>
)}
</div>
);
}
}
Actualizando
La fase de actualización ocurre cuando cambian las propiedades o el estado de un componente. Durante esta fase, se invocan los siguientes métodos:
getDerivedStateFromProps
Este método se llama nuevamente si las propiedades del componente cambian. Funciona de la misma manera que en la fase de ensamblaje, permitiendo que el componente actualice su estado en función de los cambios en sus accesorios.
clase MiComponente extiende React.Component {
getDerivedStateFromProps estático (nextProps, prevState) {
if (siguienteProps.valor! == estadoprev.valor) {
devolver {
valor: nextProps.valor
};
}
devolver nulo;
}
constructor(accesorios) {
súper(accesorios);
este.estado = {
valor: accesorios.valor
};
}
prestar {
retorno <div> {
este.valor.de.estado
} < /div>;
}
}
debería actualizar componentes
Este método se llama antes de actualizar el componente, lo que permite que el componente determine si se debe volver a renderizar. Debe devolver un valor booleano que indique si el componente debe actualizarse o no.
clase MiComponente extiende React.Component {
deberíaComponentUpdate(nextProps, nextState) {
devolver nextProps.value! == this.props.value;
}
prestar {
devolver <div>{this.props.value}</div>;
}
}
prestar
Este método se llamará nuevamente si el componente se renderiza nuevamente. Debería devolver un nuevo elemento de React que refleje el estado actualizado del componente.
clase MiComponente extiende React.Component {
prestar {
return <div>¡Hola, {this.props.name}!</div>;
}
}
obtener instantánea antes de actualizar
Este método se llama justo antes de que se actualice el componente y permite que el componente capture cierta información del DOM antes de que cambie. Luego, esta información se pasa a componenteDidUpdate.
clase MiComponente extiende React.Component {
getSnapshotBeforeUpdate(propsprev, estadoprev) {
if (prevProps.value! == this.props.value) {
devolver this.myRef.current.getBoundingClientRect .top;
}
devolver nulo;
}
componenteDidUpdate(prevProps, prevState, instantánea) {
if (instantánea! == nulo) {
console.log(`El elemento era ${snapshot}px desde arriba`);
}
}
prestar {
return <div ref={this.myRef}>¡Hola, {this.props.name}!</div>;
}
}
componenteDidUpdate
Este método se llama después de actualizar el componente. Se utiliza para realizar efectos secundarios como actualizar el DOM o enviar una acción a una tienda Redux.
clase MiComponente extiende React.Component {
componenteDidUpdate(propsprev, estadoprev) {
if (prevProps.value! == this.props.value) {
this.props.onValueChange(this.props.value);
}
}
prestar {
devolver <div>{this.props.value}</div>;
}
}
Desmontaje
La fase de desmontaje ocurre cuando un componente se elimina del DOM. Durante esta fase, se invoca el siguiente método.
componenteWillUnmount
El método componenteWillUnmount se llama justo antes de que el componente se elimine del DOM. Se utiliza para realizar tareas de limpieza, como eliminar detectores de eventos o cancelar solicitudes de API.
clase MiComponente extiende React.Component {
componenteDidMount {
this.intervalId = setInterval( => {
this.setState({ hora: nueva fecha });
}, 1000);
}
componenteWillUnmount {
clearInterval(this.intervalId);
}
prestar {
return <div>La hora es {this.state.time.toLocaleTimeString }.</div>;
}
}
Además de los métodos del ciclo de vida para crear, actualizar y eliminar componentes, React proporciona dos métodos para el manejo de errores: getDerivedStateFromError estático y componenteDidCatch.
Manejo de errores
Los componentes de React también pueden experimentar errores durante su ciclo de vida. Un error en un componente secundario puede propagarse al componente principal. Para manejar estos errores, React proporciona dos métodos.
getDerivedStateFromError estático
El método estático getDerivedStateFromError es un método de ciclo de vida llamado cuando hay un error durante la representación, en los métodos del ciclo de vida de los componentes secundarios o en los constructores de cualquier componente secundario. Permite que el componente actualice su estado con un mensaje de error, que luego puede usarse para representar una interfaz de usuario de reemplazo.
clase MiComponente extiende React.Component {
getDerivedStateFromError estático (error) {
return {haError: verdadero};
}
constructor(accesorios) {
súper(accesorios);
this.state = {hasError: falso};
}
prestar {
si (este.estado.hasError) {
return <div>Algo salió mal.</div>;
}
devolver <div>{this.props.children}</div>;
}
}
La aplicación de clase extiende React.Component {
prestar {
devolver (
<MiComponente>
<Componente secundario />
</MiComponente>
);
}
}
componenteDidCatch
El método componenteDidCatch es un método de ciclo de vida que se llama cuando se detecta un error en un componente secundario. Permite que el componente realice efectos secundarios como registrar el error o enviar un informe de error a un servidor.
clase MiComponente extiende React.Component {
constructor(accesorios) {
súper(accesorios);
this.state = {hasError: falso};
}
componenteDidCatch(error, información) {
// Registra el error en un servicio de informes de errores
logErrorToMyService(error, info.componentStack);
}
prestar {
si (este.estado.hasError) {
return <div>Algo salió mal.</div>;
}
devolver <div>{this.props.children}</div>;
}
}
La aplicación de clase extiende React.Component {
prestar {
devolver (
<MiComponente>
<Componente secundario />
</MiComponente>
);
}
}
Ejemplo de ciclo de vida del componente React: una WeatherApp
Después de comprender cómo funcionan los métodos del ciclo de vida de los componentes de React y para qué se utilizan, pongamos este conocimiento en práctica con un ejemplo. En este tutorial, crearemos una aplicación React simple que muestra el clima actual según la ubicación del usuario. Exploraremos cómo utilizar los métodos del ciclo de vida de los componentes para manejar el ensamblaje, la actualización, el desensamblaje y el manejo de errores, brindando un ejemplo del mundo real de cómo integrar estos conceptos en sus aplicaciones.
Requisitos previos
Antes de comenzar, asegúrese de tener lo siguiente instalado en su computadora:
- Node.js (versión 10 o superior)
- npm (versión 6 o superior)
- Un editor de código de reacción de su elección (por ejemplo, Visual Studio Code)
A partir de
Para comenzar, abra su terminal y cree una nueva aplicación React usando el comando create-react-app:
npx crear-reaccionar-aplicación-aplicación meteorológica
Una vez creada la aplicación, navegue hasta el directorio del proyecto e inicie el servidor de desarrollo:
aplicación meteorológica cd inicio de npm
Su aplicación ahora debería estar ejecutándose en http://localhost:3000 .
Creando el componente WeatherApp
Para crear el componente WeatherApp, cree un nuevo archivo llamado WeatherApp.js en la carpeta src. Abra el archivo src/App.js en su editor de código y reemplace el código existente con lo siguiente.
importar Reaccionar desde 'reaccionar';
importar el tiempo desde './components/Weather';
aplicación de función {
devolver (
<div className="Aplicación">
<Aplicación del tiempo/>
</div>
);
}
exportar aplicación predeterminada;
Ahora agregue el siguiente código al archivo src/WeatherApp.js.
importar React, {Componente} de 'react';
clase WeatherApp extiende el componente {
prestar {
devolver (
<div>
<h1>Clima actual</h1>
</div>
);
}
}
exportar WeatherApp predeterminada;
Esto crea un componente React simple que representa un título.
Manejo de la ubicación del usuario
Para buscar la ubicación del usuario utilizaremos la API de Geolocalización proporcionada por el navegador. Usaremos el método del ciclo de vida componenteDidMount para buscar la ubicación cuando se monte el componente.
importar React, {Componente} de 'react';
clase WeatherApp extiende el componente {
constructor(accesorios) {
súper(accesorios);
este.estado = {
latitud: nula,
longitud: nula
};
}
componenteDidMount {
navegador.geolocalización.getCurrentPosition(
(posición) => {
const {latitud, longitud} = posición.coords;
this.setState({latitud, longitud});
},
(error) => {
consola.error(error);
}
);
}
prestar {
const {latitud, longitud} = this.state;
devolver (
<div>
<h1>Clima actual</h1>
<p>Latitud: {latitud}</p>
<p>Longitud: {longitud}</p>
</div>
);
}
}
exportar WeatherApp predeterminada;
En el método componenteDidMount, utilizamos el método getCurrentPosition de la API de geolocalización para obtener la ubicación del usuario. Este método requiere dos devoluciones de llamada: una para controlar el éxito y otra para controlar el error. Si la ubicación se obtiene correctamente, actualizamos el estado del componente con los valores de latitud y longitud. Si hay un error, lo registramos en la consola.
En el método de renderizado, representamos los valores de latitud y longitud del estado del componente.
Buscando datos meteorológicos
Para obtener los datos meteorológicos actuales según la ubicación del usuario, utilizaremos la API OpenWeatherMap. Usaremos el método de recuperación para realizar la solicitud de API. También usaremos el método componenteDidMount para obtener los datos meteorológicos cuando el componente esté montado.
importar React, {Componente} de 'react';
const API_KEY = 'TU_API_KEY';
clase WeatherApp extiende el componente {
constructor(accesorios) {
súper(accesorios);
este.estado = {
latitud: nula,
longitud: nula,
datos meteorológicos: nulo
};
}
componenteDidMount {
// Busca la ubicación del usuario
navegador.geolocalización.getCurrentPosition(
(posición) => {
const {latitud, longitud} = posición.coords;
this.setState({latitud, longitud});
// Obtener los datos meteorológicos
URL constante = `
buscar (url)
.entonces(respuesta => respuesta.json)
.entonces(datos => this.setState({ datos meteorológicos: datos }))
.catch(error => console.error(error));
},
(error) => {
consola.error(error);
}
);
}
prestar {
const {latitud, longitud, datos meteorológicos} = this.state;
devolver (
<div>
<h1>Clima actual</h1>
{latitud longitud && (
<p>
Latitud: {latitud}, Longitud: {longitud}
</p>
)}
{ datos del tiempo && (
<div>
<p>Temperatura: {weatherData.current.temperature}°C</p>
<p>Descripción: {weatherData.current.weather_descriptions(0)}</p>
</div>
)}
</div>
);
}
}
exportar WeatherApp predeterminada;
En el método componenteDidMount, primero recuperamos la ubicación del usuario utilizando el método getCurrentPosition. Una vez que tengamos los valores de latitud y longitud, los usaremos para construir la URL de solicitud de API. También pasamos nuestra clave API y configuramos el parámetro de unidades en métrico para obtener valores de temperatura en grados Celsius.
Luego usamos el método de recuperación para realizar la solicitud de API. Usamos el método then para manejar la respuesta y convertirla al formato JSON. Luego actualizamos el estado del componente con los datos meteorológicos. Si hay un error, lo registramos en la consola.
En el método de renderizado, renderizamos condicionalmente valores de latitud y longitud y datos meteorológicos en función de su existencia en el estado del componente.
Manejo de errores
Finalmente, abordemos los errores que pueden ocurrir durante el ciclo de vida del componente. Usaremos los métodos estáticos getDerivedStateFromError y componenteDidCatch para manejar errores.
importar React, {Componente} de 'react';
const API_KEY = 'TU_API_KEY';
clase WeatherApp extiende el componente {
constructor(accesorios) {
súper(accesorios);
este.estado = {
latitud: nula,
longitud: nula,
datos meteorológicos: nulo
};
}
componenteDidMount {
// Busca la ubicación del usuario
navegador.geolocalización.getCurrentPosition(
(posición) => {
const {latitud, longitud} = posición.coords;
this.setState({latitud, longitud});
// Obtener los datos meteorológicos
URL constante = `
buscar (url)
.entonces(respuesta => respuesta.json)
.entonces(datos => this.setState({ datos meteorológicos: datos }))
.catch(error => console.error(error));
},
(error) => {
consola.error(error);
}
);
}
getDerivedStateFromError estático (error) {
devolver { error: error.mensaje };
}
componenteDidCatch(error, información) {
consola.error(error);
consola.error(información);
}
prestar {
const {latitud, longitud, datos meteorológicos, error} = this.state;
devolver (
<div>
<h1>Clima actual</h1>
{¿error? (
<p>Algo salió mal: {error}</p>
): (
<>
{latitud longitud && (
<p>
Latitud: {latitud}, Longitud: {longitud}
</p>
)}
{ datos del tiempo && (
<div>
<p>Temperatura: {weatherData.current.temperature}°C</p>
<p>Descripción: {weatherData.current.weather_descriptions(0)}</p>
</div>
)}
</>
)}
</div>
);
}
}
exportar WeatherApp predeterminada;
En el constructor, agregamos una nueva propiedad de estado llamada error que usaremos para almacenar cualquier error que ocurra durante el ciclo de vida del componente.
En el método componenteDidMount, agregamos un bloque catch para manejar errores al recuperar datos meteorológicos. Establecemos la propiedad de estado de error en el mensaje de error si ocurre un error.
También utilizamos el método setState para establecer las propiedades del estado de latitud y longitud cuando recuperamos con éxito la ubicación del usuario.
El método estático getDerivedStateFromError se llama cuando se produce un error en cualquier componente secundario del componente actual. Este método debe devolver un objeto para actualizar el estado del componente. En nuestro ejemplo, simplemente actualizamos la propiedad del estado de error con el mensaje de error.
El método componenteDidCatch se llama cuando ocurre un error en cualquier componente secundario del componente actual y se usa para registrar el error en la consola. En nuestro ejemplo, registramos el error y el seguimiento de la pila del componente en la consola.
Finalmente, en el método de renderizado, usamos la propiedad de estado de error para renderizar condicionalmente un mensaje de error si ocurre un error. De lo contrario, mostramos la ubicación del usuario y los datos meteorológicos actuales, si están disponibles.
Conclusión
En conclusión, comprender e implementar eficazmente el ciclo de vida de los componentes de React es esencial para crear aplicaciones eficientes, escalables y mantenibles. Como hemos visto, los métodos de ciclo de vida brindan a los desarrolladores un control detallado sobre el comportamiento de sus componentes, lo que les permite optimizar el rendimiento, administrar el estado y manejar errores. Al aprovechar los métodos de ensamblaje, actualización y desensamblaje, los desarrolladores pueden crear interfaces de usuario complejas que sean receptivas y eficientes.
Si te gustó este artículo sobre React, consulta estos temas;
- Reaccionar mejores prácticas
- Reaccionar bibliotecas de componentes de UI
- Los 6 mejores IDE y editores de React
- Reaccionar frente a Backbone JS
- ¿Por qué React es tan popular?
- Lo que necesitas saber sobre reaccionar
- Reaccionar WebSockets: Tutorial
Preguntas frecuentes (FAQ)
¿Cuáles son los tres métodos principales del ciclo de vida de los componentes?
Los tres métodos principales del ciclo de vida de los componentes en React son ensamblaje, actualización y desensamblaje.
¿Por qué utilizamos métodos de ciclo de vida de React?
Usamos métodos de ciclo de vida de React para manejar diferentes etapas de la vida de un componente, como inicialización, renderizado, actualización y destrucción, y para realizar acciones específicas o agregar comportamientos específicos durante cada etapa.
¿Cuál es la diferencia entre los ganchos de React y los métodos de ciclo de vida?
Los ganchos de React proporcionan una forma más concisa de gestionar el estado y los efectos secundarios en los componentes funcionales. Los métodos de ciclo de vida solo están disponibles en componentes de clase y pueden conectarse a múltiples etapas del ciclo de vida de un componente.
Fuente: BairesDev
