Tutorial de React Parte 19: Métodos del ciclo de vida de los componentes

En la parte de hoy de la traducción del tutorial React, se le presentará una descripción general de los métodos del ciclo de vida de los componentes.



→ Parte 1: descripción general del curso, razones de la popularidad de React, ReactDOM y JSX
→ Parte 2: componentes funcionales
→ Parte 3: archivos de componentes, estructura del proyecto
→ Parte 4: componentes principales y secundarios
→ Parte 5: inicio del trabajo en una aplicación TODO, los fundamentos del estilo
→ Parte 6: sobre algunas características del curso, JSX y JavaScript
→ Parte 7: estilos en línea
→ Parte 8: trabajo continuo en la aplicación TODO, familiaridad con las propiedades de los componentes
→ Parte 9: propiedades del componente
→ Parte 10: Taller sobre trabajo con propiedades de componentes y estilo
→ Parte 11: generación de marcado dinámico y método de matrices de mapas
→ Parte 12: taller, tercera etapa de trabajo en una aplicación TODO
→ Parte 13: componentes basados ​​en clases
→ Parte 14: taller sobre componentes basados ​​en la clase, estado de los componentes.
→ Parte 15: talleres de componentes de salud
→ Parte 16: la cuarta etapa de trabajo en una aplicación TODO, manejo de eventos
→ Parte 17: quinta etapa de trabajo en una aplicación TODO, modificando el estado de los componentes
→ Parte 18: la sexta etapa de trabajo en una aplicación TODO
→ Parte 19: métodos del ciclo de vida de los componentes.
Parte 20: la primera lección de representación condicional
→ Parte 21: segunda lección y taller sobre representación condicional
→ Parte 22: la séptima etapa de trabajo en una aplicación TODO, descargando datos de fuentes externas
→ Parte 23: primera lección sobre trabajar con formularios
→ Parte 24: Segunda lección de formularios
→ Parte 25: Taller sobre trabajo con formularios
→ Parte 26: arquitectura de la aplicación, patrón de contenedor / componente
→ Parte 27: proyecto del curso

Lección 34. Métodos del ciclo de vida de los componentes, parte 1

→ Original

Una de las características del desarrollo de aplicaciones React es el hecho de que escribimos un código JavaScript bastante simple que impulsa los mecanismos internos de React y, por lo tanto, nos brinda grandes oportunidades para desarrollar interfaces de aplicaciones y trabajar con datos. Al mismo tiempo, los componentes que utilizamos durante su ciclo de vida pasan por ciertas etapas. A menudo, lo que le sucede a un componente en una aplicación se compara con la vida de una persona. Las personas nacen, viven, en su vida ocurren algunos eventos importantes, después de los cuales mueren. Los componentes de React en esto son similares a las personas, ya que también son "nacidos", "vivos" y "muertos". Cuando trabajamos con componentes, podemos responder a lo que les sucede, gracias a los métodos de su ciclo de vida que se invocan en momentos especiales de su "vida".

Recientemente, el equipo de desarrollo de React ha desactualizado los métodos de ciclo de vida de tres componentes. Sin embargo, consideraremos estos métodos, ya que todavía se pueden usar, y dado que se pueden encontrar en el código existente. Además, se agregaron dos nuevos métodos de ciclo de vida de componentes a React, que discutiremos en la próxima lección.

Consideraremos solo los métodos más importantes que sean más relevantes para aquellos que acaban de comenzar a estudiar React. Cuando continúe dominando esta biblioteca, podrá experimentar con otros métodos.

Aquí hay un buen material sobre los métodos del ciclo de vida de los componentes de React que eran relevantes antes de React 16.3. Aquí , en una publicación del blog oficial de desarrolladores de React, puede conocer los cambios que se han producido en React 16.3.

Ahora, comencemos la discusión sobre los métodos del ciclo de vida de los componentes React que encontrará con más frecuencia.

Usaremos, como siempre, el proyecto de demostración aquí. En este caso, comenzamos con un proyecto estándar creado usando create-react-app, en el archivo App.js que contiene el siguiente código:

 import React, {Component} from "react" class App extends Component {   constructor() {       super()       this.state = {}   }     render() {       return (           <div>               Code goes here           </div>       )   } } export default App 

Para comenzar, echemos un vistazo al método que ya ha utilizado con componentes basados ​​en clases. Este es el método render() .

A menudo, no se le menciona cuando habla sobre los métodos del ciclo de vida del componente. Creo que este método, cuando se compara un componente con una persona, se puede comparar con vestirse antes de salir. El objetivo de este método es determinar qué se mostrará en la pantalla, es decir, cómo se verá el componente. El método render() se puede llamar varias veces durante la vida útil de un componente. Entonces, cuando React determina que algo relacionado con un componente ha cambiado, como un estado o propiedades, es decir, algo que puede afectar la apariencia de un componente, React puede llamar a este método. Esto se puede comparar, si continuamos la analogía con las personas, para que una persona pueda decidir cambiarse de ropa. Por ejemplo, para, después de un día de trabajo, prepararse para algún tipo de evento de vacaciones.

Ahora echemos un vistazo a otro método del ciclo de vida del componentDidMount() : componentDidMount() . Este método se declara, al igual que cualquier otro método de componente basado en clases, en el cuerpo de una clase de componente:

 componentDidMount() { } 

Este método se llama en el momento del ciclo de vida del componente, que se puede comparar con el "nacimiento" de este componente. Este método se activa una vez que el componente está montado (insertado) en el árbol DOM. En este caso, por ejemplo, si después de cambiar algunos datos que afectan la apariencia del componente, se volverá a representar, no se llamará al método componentDidMount() . Esto sucede debido al hecho de que al realizar tales operaciones, el componente no se elimina del árbol DOM y luego se vuelve a incluir en el árbol.

El método componentDidMount() se usa generalmente para realizar llamadas a ciertas API en casos en los que el desarrollador necesita datos de fuentes externas. Supongamos que el componente que estamos considerando aquí en realidad se llama TodoList y es un componente que forma una lista de tareas en una aplicación Todo. El método componentDidMount() de dicho componente puede cargar materiales de la base de datos del servidor que son necesarios para la visualización correcta de la lista de tareas almacenada en el servidor. Como resultado, una vez completada la instalación del componente, nosotros, en el método componentDidMount() , podemos cargar los datos necesarios para que el componente se muestre correctamente en la página. También hablaremos sobre la carga de datos que necesitan los componentes, pero por ahora puede recordar que este es el caso de uso más común para componentDidMount() .

El siguiente método de ciclo de vida del componente que discutimos se llama componentWillReceiveProps() . Este método se puede comparar con lo que sucede cuando alguien recibe un regalo de alguien. Entonces, un componente puede recibir propiedades de un componente padre. Cada vez que un componente toma propiedades, se llama a este método. Al mismo tiempo, este método se llama cada vez que el componente primario pasa las propiedades al componente secundario, y no solo cuando esto ocurre por primera vez. Por ejemplo, si el componente primario decide cambiar las propiedades pasadas al componente secundario, entonces, en el método componentWillReceiveProps() , podemos, por ejemplo, verificar si las nuevas propiedades difieren de las que ya se pasaron al componente. El hecho es que si las nuevas propiedades no difieren de las antiguas, esto significa que su recibo no cambia nada, lo que significa que, después de descubrirlo, no podemos hacer nada más. Si las nuevas propiedades son diferentes de las antiguas, podemos realizar ciertas acciones. Normalmente, este método se declara en el cuerpo de la clase de componente de la siguiente manera:

 componentWillReceiveProps(nextProps) { } 

Aquí generalmente se usa, como el nombre del parámetro, nextProps , pero puede nombrar este parámetro como desee. Para comparar algunas propiedades específicas que ya se han transferido al componente con lo que ya se le pasó anteriormente, y decidir sobre otras acciones, puede utilizar esta construcción:

 componentWillReceiveProps(nextProps) {   if (nextProps.whatever !== this.props.whatever) {       //   -    } } 

Por lo general, este método se usa de esa manera.

Sin embargo, como ya se mencionó, después del lanzamiento de React 16.3, algunos métodos del ciclo de vida del componente quedaron en desuso, y componentWillReceiveProps() es uno de esos métodos.

Hasta la Reacción 17, estos métodos heredados todavía se pueden usar, aunque es mejor no hacerlo. Si no puede prescindir del método en cuestión, debe llamarlo UNSAFE_componentWillReceiveProps() . Después de React 17, el nombre del método componentWillReceiveProps() no significará nada especial.

Es útil conocer este método para poder comprender el código desactualizado, pero no se utilizará en el desarrollo de las aplicaciones modernas de React.

Otro método interesante del ciclo de vida del componente se llama shouldComponentUpdate() . Él, si continuamos comparando el componente con una persona, recuerda el momento en que una persona está pensando si necesita cambiarse de ropa o no. En condiciones normales, si React no está muy seguro de volver a representar un componente, lo hará por si acaso. No importa si esto es necesario, de acuerdo con la lógica de la aplicación, o no.

Esto hace que React vuelva a representar los componentes, incluso cuando nada relacionado con el componente cambia. Esto puede ralentizar la aplicación, porque según este principio, React procesa todos los componentes que componen la aplicación. El método shouldComponentUpdate() permite al desarrollador optimizar la aplicación. Aquí puede implementar alguna lógica que ayude a descubrir la necesidad de actualizar el componente. Este método generalmente se declara así:

 shouldComponentUpdate(nextProps, nextState) {   //  true        //  false    } 

Además, a partir de este método, si el componente necesita una nueva representación, teniendo en cuenta las nuevas propiedades y el estado, debe devolver true . De lo contrario, debe devolverse false . En realidad, devolver false de este método lleva al hecho de que el componente no se actualiza y la aplicación se ejecuta más rápido, pero al hacerlo, debe asegurarse de que el componente realmente no necesita volver a procesarse. Si el componente necesita ser actualizado, y este método devuelve false , esto conducirá a errores que serán difíciles de manejar.

Otro método de ciclo de vida del componente del que hablaremos se llama componentWillUnmount() . Este método marca el final de la "vida" del componente: el momento en que se elimina del árbol DOM y desaparece de la pantalla.

Este método se utiliza principalmente para liberar recursos ocupados por un componente y poner las cosas en orden antes de eliminarlo. Por ejemplo, si en el método componentDidMount() se configuró algo así como un detector de eventos, debido a que, cuando el usuario desplaza la página, se ejecuta algún código, es en componentWillUnmount() puede eliminar dicho detector de eventos. De hecho, este método tiene muchas aplicaciones que tienen como objetivo eliminar de la aplicación todo lo que resulta innecesario después de que el componente desaparece.

Aquí está el código completo de nuestro componente de App , en el que se agregan métodos de ciclo de vida:

 import React, {Component} from "react" class App extends Component {   constructor() {       super()       this.state = {}   }     componentDidMount() {       //  ,        }     componentWillReceiveProps(nextProps) {       if (nextProps.whatever !== this.props.whatever) {           //   -        }   }     shouldComponentUpdate(nextProps, nextState) {       //  true            //  false      }     componentWillUnmount() {       //            // ( -   )   }     render() {       return (           <div>               Code goes here           </div>       )   } } export default App 

Esto concluye esta lección, aunque debe tenerse en cuenta que los métodos del ciclo de vida de los componentes React no se limitan a los que revisamos hoy.

Lección 35. Métodos del ciclo de vida de los componentes, parte 2

→ Original

Como ya se mencionó en la lección anterior, cuando salió React 16.3, se informó que los métodos de ciclo de vida de los tres componentes estaban desactualizados. Estos métodos son componentWillMount() , componentWillReceiveProps() y componentWillUpdate() . También se informaron dos nuevos métodos. Este es el getDerivedStateFromProps() estático getDerivedStateFromProps() y el método getSnapshotBeforeUpdate() . No se puede decir que estos métodos jugarán un papel importante en futuras clases de este curso, pero a pesar de esto, los conoceremos aquí.

Experimentaremos en el mismo proyecto que utilizamos la última vez.

getDerivedStateFromProps() es como se ve la declaración del método getDerivedStateFromProps() :

 static getDerivedStateFromProps(props, state) { } 

Tenga en cuenta la static antes del nombre del método. Él, sobre la base de las propiedades aceptadas por él, debe devolver un estado actualizado. Se utiliza en aquellos casos en que un determinado componente debe aceptar las propiedades entrantes que recibe del componente principal y configurar su estado en función de estas propiedades. Los detalles sobre este método se pueden encontrar aquí . Este material, publicado en el blog React, dice que el uso de este método está lejos de estar justificado en todas aquellas situaciones en las que parece ser útil. Su uso incorrecto puede conducir a varios errores, a una caída en el rendimiento de la aplicación, así que úselo con precaución. No debe intentar resolver problemas con su ayuda, para cuya solución no está destinada. Aquí está la documentación para este método.

Ahora hablemos sobre el método getSnapshotBeforeUpdate() . Así es como se ve su declaración en el cuerpo de la clase:

 getSnapshotBeforeUpdate() { } 

Se puede considerar como un método de ciclo de vida, que le permite crear algo así como una copia de seguridad de lo que hay en el componente antes de actualizarlo. Se asemeja a una instantánea del estado de una aplicación. Cabe señalar que los desarrolladores de React dicen que el alcance de este método es limitado. Aquí está la documentación para ello.

Resumen

Hoy hablamos sobre los métodos del ciclo de vida de los componentes. Cuando avance en el desarrollo de aplicaciones React, sin duda serán útiles. En las siguientes clases de este curso, nos encontraremos con estos métodos, en particular, con componentDidMount() . La próxima vez hablaremos sobre renderizado condicional.

Estimados lectores! Si está desarrollando profesionalmente aplicaciones React, cuéntenos cómo utiliza los métodos de ciclo de vida de los componentes.