Ciclo de vida de creación de un componente de React basado en clases

Muy buenas, me llamo Miguel y aquí les traigo este tutorial.

Índice

Ganchos de ciclo de vida

Después de que se introdujeron React Hooks en React 16.8, los hooks del ciclo de vida, que solo estaban disponibles en componentes basados en clases, ahora también están disponibles en componentes funcionales con la ayuda de useEffect gancho.

A pesar de que useEffect nos da un control similar sobre el ciclo de vida de un componente, los enlaces de ciclo de vida solo están disponibles en componentes basados en clases.

Los siguientes son los enlaces de ciclo de vida llamados durante la creación de un componente basado en clases:

Ciclo de vida de creación de un componente basado en clases

1. Constructor ()

Cuando se va a crear un componente, lo primero que se ejecuta no es un enlace del ciclo de vida, sino el constructor. El constructor es una característica de clase ES6 predeterminada y se agrega a una clase automáticamente si no especificamos una. Se puede usar un constructor para establecer el estado inicial del componente, inicializar variables y vincular funciones. Dado que el constructor es esencial en una clase, se llama antes de los enlaces del ciclo de vida al crear un componente basado en clases.

2. getDerivedStateFromProps ()

Después del constructor, getDerivedStateFromProps carreras. Se invoca justo antes de que lo haga la función de renderizado. getDerivedStateFromProps se llama durante el montaje inicial del componente y en las actualizaciones posteriores.

Es un gancho de ciclo de vida que rara vez se usa, ya que cuando el estado de nuestro componente debe derivarse de los cambios realizados en los accesorios a lo largo del tiempo. La razón por la que este enlace del ciclo de vida no se usa con frecuencia se debe a que existen alternativas más simples. Estas alternativas hacen que nuestro código sea menos detallado y, por lo tanto, se utilizan en lugar de este gancho. Dicho esto, este gancho no es completamente inútil.

POST RELACIONADO: Reaccionar el desglose de renderizado y re-renderizado con Vanilla Hooks

Un caso de uso útil sería usarlo para implementar un <Transition> componente que compara sus hijos anteriores y siguientes para determinar cuál de ellos debe animarse. Puede leer más sobre este enlace del ciclo de vida en la página de documentos de React.

3. render ()

Después de invocar el constructor del componente y el gancho del ciclo de vida getDerivedStateFromProps, el render llama a la función. Devuelve todo nuestro JSX.

La función de renderizado debería permanecer pura y solo debería usarse para preparar los datos que necesitaríamos para renderizar el JSX. Cualquier solicitud HTTP o tiempo de espera que pueda bloquear el proceso de renderizado no debe usarse aquí.

4. componentDidMount ()

Después de que el JSX de la función de render termine de renderizarse componenteDidMount se invoca. Aquí se pueden ejecutar tareas asincrónicas como solicitudes HTTP. Por ejemplo, si necesita obtener datos de un punto final remoto, este es un buen lugar para hacerlo.

La inicialización que requiere elementos DOM se realiza aquí.

Hay varios ganchos involucrados durante el ciclo de vida de un componente de React basado en clases. Los ganchos mencionados en este artículo son los que están involucrados durante la creación de un componente. Cuando se actualiza el componente, se invocan algunos enlaces más. Los repasaremos en el próximo artículo.