El ciclo de vida de los componentes en React
By s4pcademy
Cuando implementas componentes en React, pueden ocurrir situaciones en las que tengas que intervenir en el ciclo de vida del componente en diferentes momentos.
Los ejemplos típicos incluyen la creación del componente en el constructor, la actualización de accesorios o estados, o el desmontaje del componente. Aunque las estaciones en el ciclo de vida de un componente de clase son las mismas que en un componente de función, con los componentes de clase se tienen más opciones de intervención. muestra una representación gráfica de los diferentes ganchos del ciclo de vida disponibles para usted.
El ciclo de vida de un componente de clase se divide en diferentes secciones:
- En la primera sección—la montaje Sección: el componente se crea y se monta en la aplicación para que sea visible.
- El actualizando La sección describe el tiempo durante el cual el componente está visible y los usuarios pueden interactuar con él. Los principales eventos que ocurren aquí son los cambios desde fuera del componente a los accesorios y dentro de un componente al estado.
- La última sección es la desmontar sección, que se activa cuando se elimina el componente. Esta sección trata principalmente sobre la limpieza.
Hay diferentes ganchos disponibles en cada sección. Estos son métodos que usted implementa y que se ejecutan tan pronto como el componente está en la sección respectiva. Cada tramo se divide a su vez en hasta tres fases diferentes. Las fases tienen diferentes características a la hora de acceder al componente y crear efectos secundarios así como acceder al DOM:
- El prestar La fase es responsable de renderizar el componente. La ejecución del método render marca el final de esta fase. Esta fase no tiene relevancia para la sección de desmontaje. Los métodos de esta fase no deben tener efectos secundarios porque pueden detenerse, abortarse y reiniciarse mediante Reaccionar.
- En el pre cometido fase, puede acceder al DOM del componente en modo de solo lectura. Esta fase existe solo en la sección de actualización del ciclo de vida del componente.
- La fase final del ciclo de vida de un componente es la comprometerse Existe en cada sección y le permite acceder al DOM. Además, se pueden realizar efectos secundarios, como la comunicación con un servidor, y se pueden programar actualizaciones.
Para demostrar los diferentes enlaces del ciclo de vida, puede implementar un componente de temporizador que cuente el tiempo utilizando los diferentes enlaces del ciclo de vida. Para este ejemplo, suponga que tiene una aplicación React recién creada que consta de dos componentes, Aplicación y Temporizador:
import React from 'react';
import './App.css';
import Timer from './Timer';
class App extends React.Component {
state = {
time: 0,
};
handleClick() {
this.setState({ time: Math.floor(Math.random() * 10) });
}
render() {
return (
<div className="App">
<Timer time={this.state.time} />
<button onClick={() => this.handleClick()}>set</button>
</div>
);
}
}
export default App;
5
Como puede ver, el componente de la aplicación tiene su propio estado, que contiene el número de tiempo. Esto se pasa al componente del temporizador en el método de renderizado a través de la propiedad time. También hay un botón que puede restablecer el valor a través de su controlador de clic. Aquí, tenga en cuenta que pierde el contexto dentro de una función de controlador de eventos. Entonces, si pasara el método handleClick directamente al accesorio onClick, this dentro del método ya no apuntaría a la instancia del componente. Por este motivo, envuelve la llamada a la función en una función de flecha, lo que garantiza que se mantenga el contexto.
Constructor
Utiliza el constructor para realizar la inicialización del componente. Como ya sabes, el constructor recibe los accesorios pasados como argumento. Antes de poder usar esto en el constructor, debes llamar al constructor principal a través del objeto props. Dentro del constructor, puedes acceder al estado a través de la propiedad state y configurarlo directamente en este punto sin usar el método setState:
import React from 'react';
export default class Timer extends React.Component {
constructor(props) {
console.log('Constructor');
super(props);
this.state = {
time: 0,
};
}
}
Primero escribe en la consola la información de que se ha llamado al constructor. Finalmente, establece la propiedad de tiempo del objeto de estado en su valor inicial de 0.
“getDerivedStateFromProps”
El método estático getDerivedStateFromProps se llama en cada cambio. Este método reemplaza el método componenteWillReceiveProps y rara vez se utiliza. El método se utiliza para determinar si los accesorios han cambiado y si es necesario ajustar el estado. En el método getDerivedStateFromProps, tiene acceso a los accesorios y al objeto de estado. El método devuelve un nuevo objeto de estado o nulo si el estado permanece sin cambios.
import React from 'react';
export default class Timer extends React.Component {
constructor(props) {
console.log('Constructor');
super(props);
this.state = {
initial: 0,
time: 0,
};
}
static getDerivedStateFromProps(props, state) {
console.log('getDerivedStateFromProps');
if (props.time !== state.initial) {
return {
initial: props.time,
time: props.time,
};
}
return null;
}
}
En el ejemplo anterior, agrega la propiedad inicial al estado. Utilice esta propiedad para comprobar si los accesorios han cambiado. En el método getDerivedStateFromProps, primero genera la información de que se llamó a la función. Si los accesorios han cambiado, establece el tiempo y los valores iniciales en el valor pasado.
«prestar»
Si no implementa el método de renderizado, React no puede mostrar el componente. Este componente debe devolver una estructura JSX, que luego React representa.
import React from 'react';
export default class Timer extends React.Component {
constructor(props) {…}
static getDerivedStateFromProps(props, state) {…}
render() {
console.log('render');
return <div>{this.state.time}</div>;
}
}
El último paso en la sección de montaje implica el método componenteDidMount.
“componenteDidMount”
Con los métodos utilizados hasta ahora, no debería provocar ningún efecto secundario todavía, ya que React puede cancelarlos, lo que a su vez puede causar inconsistencias. Puede desencadenar efectos secundarios utilizando el método componenteDidMount. Normalmente, consisten en solicitudes asincrónicas a un servidor o, como en nuestro ejemplo actual, establecer un intervalo:
import React from 'react';
export default class Timer extends React.Component {
interval = null;
constructor(props) {…}
static getDerivedStateFromProps(props, state) {…}
render() {…}
componentDidMount() {
console.log('componentDidMount');
this.interval = setInterval(
() => this.setState(state => ({ time: state.time + 1 })),
1000,
);
}
}
Vuelve a generar la información sobre la ejecución del método en la consola. Luego crea un intervalo que incrementa el valor de tiempo del estado en uno cada segundo. Después de iniciar su aplicación en la consola, cambie al navegador. Allí deberías ver un resultado como el que se muestra aquí.
Una vez que se ha ejecutado el método componenteDidMount, el componente pasa directamente a la sección de actualización de su ciclo de vida. Los métodos getDerivedStateFromProps y render continuarán ejecutándose en cada actualización. Estas actualizaciones son causadas por las llamadas setState en el método componenteDidMount.
“debería actualizar componentes”
Puede utilizar el método shouldComponentUpdate para especificar si el componente debe volver a dibujarse después de una llamada a setState. Si este método devuelve falso, el método de renderizado no se ejecutará. El valor predeterminado verdadero garantiza que el componente se mostrará nuevamente. Como argumentos, obtienes acceso a los accesorios actuales y al nuevo estado. En el ejemplo, se asegura de que solo se muestren las entradas de tiempo con un valor par:
export default class Timer extends React.Component {
interval = null;
constructor(props) {…}
static getDerivedStateFromProps(props, state) {…}
render() {… }
componentDidMount() {…}
shouldComponentUpdate(newProps, newState) {
console.log('shouldComponentUpdate');
return newState.time % 2 === 0;
}
}
Cuando regrese al navegador después de este cambio, verá en la consola que el método de renderizado solo se ejecuta en cada dos setState. Los métodos getDerivedStateFromProps y shouldComponentUpdate todavía se llaman cada segundo.
“obtener instantánea antes de actualizar”
El método getSnapshotBeforeUpdate le permite implementar un enlace que se ejecuta después de ejecutar el método de renderizado y antes de que se muestren los cambios. En este método, tiene acceso al estado y a los accesorios anteriores. El valor de retorno de este método debe ser nulo o un valor. Esto luego está disponible en el método componenteDidUpdate. El método getSnapshotBeforeUpdate no se ejecuta si el método deberíaComponentUpdate devuelve falso.
export default class Timer extends React.Component {
interval = null;
constructor(props) {…}
static getDerivedStateFromProps(props, state) {…}
render() {…}
componentDidMount() {…}
shouldComponentUpdate(newProps, newState) {…}
getSnapshotBeforeUpdate(oldProps, oldState) {
console.log('getSnapshotBeforeUpdate');
return Date.now();
}
}
Simplemente genera la marca de tiempo actual y la devuelve. Luego puede acceder a este valor en el método componenteDidUpdate. Esto también marca el final de una sección de actualización.
“componenteDidUpdate”
En el método componenteDidUpdate, al igual que en el método componenteDidMount, puede colocar efectos secundarios. Los valores de los accesorios anteriores y el estado anterior están disponibles como argumentos en este método. Puede usarlos para saber si ciertos valores han cambiado en la sección de actualización actual. Para este propósito, puede acceder a los valores actuales de los accesorios y el estado, respectivamente, a través de las propiedades de los accesorios y del estado:
export default class Timer extends React.Component {
interval = null;
constructor(props) {…}
static getDerivedStateFromProps(props, state) {…}
render() {…}
componentDidMount() {…}
shouldComponentUpdate(newProps, newState) {…}
getSnapshotBeforeUpdate(oldProps, oldState) {…}
componentDidUpdate(oldProps, oldState, snapshot) {
console.log('componentDidUpdate');
if (oldState.initial !== this.state.initial) {
console.log(`${snapshot}: Time was reset`);
}
}
}
La lista de códigos anterior muestra un ejemplo concreto del método componenteDidUpdate. Aquí se comprueba si la propiedad inicial del estado ha cambiado. Si ese es el caso, es decir, se ha hecho clic en el botón, la consola del navegador mostrará que la hora se ha restablecido. También genera la marca de tiempo que creó anteriormente en el método getSnapshotBeforeUpdate.
La siguiente figura muestra la salida de la consola durante la sección de actualización; en este caso, también con la salida después de que los usuarios hayan hecho clic en el botón.
La última etapa del ciclo de vida de un componente se inicia cuando se elimina el componente.
“componenteSeDesmontará”
Un componente se puede eliminar mediante el uso de renderizado condicional, que le permite mostrar un componente solo bajo ciertas condiciones. Si la condición ya no es cierta, se elimina el componente. Sin embargo, si asigna recursos dentro de un componente, debe asegurarse de que estos recursos se liberen nuevamente cuando desmonte el componente. Un ejemplo clásico de un recurso de este tipo es un intervalo, como el que se inicia en el componente del temporizador. Este tipo de trabajo de limpieza se lleva a cabo mediante el método componenteWillUnmount.
El método componenteWillUnmount se llama directamente antes de eliminar un componente y no recibe argumentos. Dentro del método, no debes volver a llamar al método setState porque el componente no se renderizará nuevamente después de la ejecución del método componenteWillUnmount.
Para demostrar el método componenteWillUnmount, puede agregar un botón adicional en el componente de la aplicación que establece alternativamente la propiedad show del estado del componente en verdadero o falso. Debe establecer el valor predeterminado de esta propiedad en verdadero en el componente. Dependiendo del valor de la propiedad show, muestra u oculta el componente del temporizador. Puede lograr esto, por ejemplo, utilizando el operador &&, como se muestra aquí.
class App extends Component {
state = {
time: 0,
show: true,
};
getClickHandler() {…}
handleToggleShow() {
this.setState((state) => ({ ...state, show: !state.show }));
}
render() {
return (
<div className="App">
{this.state.show && <Timer time={this.state.time} />}
<button onClick={() => this.handleClick()}>set</button>
<button onClick={() => this.handleToggleShow()}>toggle</button>
</div>
);
}
}
En el componente del temporizador, implementa el método componenteWillUnmount y usa la función clearInterval para finalizar el intervalo. Puede ver el código fuente requerido en este listado.
export default class Timer extends React.Component {
interval = null;
constructor(props) {…}
static getDerivedStateFromProps(props, state) {…}
render() {…}
componentDidMount() {…}
shouldComponentUpdate(newProps, newState) {…}
getSnapshotBeforeUpdate(oldProps, oldState) {…}
componentDidUpdate(oldProps, oldState, snapshot) {…}
componentWillUnmount() {
console.log('componentWillUnmount');
clearInterval(this.interval);
}
}
Ganchos inseguros
Los métodos de enlace presentados aquí han estado disponibles en este formulario solo desde la versión 16.3. Antes de esa versión, había otros métodos que ahora están marcados como obsoletos y se eliminarán en versiones futuras. Con los métodos obsoletos, algunas características nuevas no se pueden implementar, como la representación asincrónica, por ejemplo. Por este motivo, se introdujo el nuevo ciclo de vida.
Los métodos que se eliminarán son los siguientes:
- componenteWillMount: Este método se ejecuta en la sección de montaje antes del renderizado.
- componenteWillReceiveProps: El método componenteWillReceiveProps se llama antes de actualizar los accesorios. El argumento proporciona acceso a los nuevos accesorios.
- componenteWillUpdate: Este método se ejecuta una vez que se han actualizado los accesorios y el estado y antes de que se represente el componente.
Estos métodos de ciclo de vida reciben el prefijo UNSAFE_ para indicar que pueden ocurrir problemas cuando se utilizan. Los componentes existentes se pueden actualizar automáticamente utilizando el codemod rename-unsafe-lifecycles. Para obtener más información sobre este y otros codemods, visite https://github.com/reactjs/react-codemod.
Los diferentes métodos de ciclo de vida se utilizan en las aplicaciones React. Un ejemplo típico es la comunicación con un servidor para cargar los datos para su visualización.
Nota del editor: esta publicación ha sido adaptada de una sección del libro. Reaccionar: la guía completa Por Sebastián Springer.
