Ciclo de vida de React – Movimiento vernáculo de React 10

React10-React-ciclo de vida

Prefacio

El artículo anterior explica con más detalle la sintaxis de React. React JSX – Reaccionar movimiento vernáculo 06 Aprendí cómo crear un componente React y la relación entre los componentes padre e hijo.Este artículo explicará el ciclo de vida de los componentes, que incluye:

  1. Tres etapas del ciclo de vida.
  2. Ciclo de vida del objeto de clase
  3. El ciclo de vida de los objetos funcionales.

Tres etapas del ciclo de vida de React

¿Qué es el ciclo de vida?

Podemos imaginar que el componente en sí tiene algunos estados, como ser creado, actualizado por el usuario, actualizado debido a la modificación de datos y finalmente eliminado cuando el componente ya no es necesario. Normalmente estos estados son secuenciales, por lo que existe un ciclo de vida.

Por lo general, el ciclo de vida se explica con el siguiente diagrama. Este diagrama explica claramente las tres etapas del ciclo de vida.

Reaccionar ciclo de vida-hogantech
Reaccionar ciclo de vida

fuente:https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

Como puede ver en la imagen de arriba, hay tres bloques, a saber:

  1. Montaje
  2. Actualizando
  3. Desmontaje

En los componentes de React, estas tres etapas también giran en torno a la carga, actualización, renderizado y eliminación de componentes.

Ciclo de vida del componente de clase

Los componentes de clase tienen sus propios ciclos de vida. Como el componente de clase en sí es un objeto, tendrá las propiedades de un objeto.

Sin embargo, actualmente se utilizan componentes funcionales. La aparición de Hook hace que los componentes funcionales sean relativamente simples y fáciles de entender.

Aquí hay un código de muestra para un componente de clase:

				
					importar React, { Componente } de la clase 'react' Prueba extiende Componente { constructor(props) { super(props) this.state = { mensaje: '' } this.setMessage = this.setMessage.bind(this) } setMessage() { this.setState({ mensaje: '¡Hola mundo!' }) } render() { return (
            <div>
                <button onclick="{this.setMessage}">Hacer clic</button>
                <p>{este.mensaje.de.estado}</p>
            </div>
        )
    }
}

				
			

Montaje

  • constructor() es equivalente al concepto de constructor en programación orientada a objetos.

  • El valor inicial se puede establecer, y esto se puede establecer y vincular en esta función.

  • El nombre chino de render() es renderizado, que representa componentes en la página. Representa el contenido de la página a través de JSX en el valor devuelto.

Fase de actualización (Actualización)

  • setMessage() permite al usuario actualizar los datos del mensaje al hacer clic en el botón.
  • render() Cuando se actualiza el estado de los datos, se activará una representación.

Ciclo de vida del componente funcional.

Los componentes funcionales deben utilizar el Hook integrado de React para tener un ciclo de vida. Hook solo fue lanzado por el equipo de Facebook en 2018, por lo que antes de 2018, usábamos principalmente componentes de categorías.

El siguiente es el código de muestra en el componente de función, que es relativamente simple.

				
					importar React, { useState } de la función &#039;react&#039; Test() { const [mensaje, setMessage] = useState(&#039;&#039;) return (
        <main>
            <button onclick="{()" > setMessage(&#039;¡Hola mundo!&#039;)}&gt; Haga clic
            </button>
            <p>{mensaje}</p>
        </main>
    )
}

				
			

Fase de carga (Montaje)

  • useState() es una función del gancho de React que inicializa datos o estado.

Fase de actualización (Actualización)

  • setMessage() permite al usuario actualizar los datos del mensaje al hacer clic y usar una función de flecha para hacerlo en onClick.

Aquí solo usamos código simple para mostrar el ciclo de vida de un objeto, pero hay más situaciones de ciclo de vida, que se presentarán una por una en el artículo del gancho más adelante.

Conclusión

Este artículo presenta principalmente el ciclo de vida de los componentes y utiliza categorías simples y componentes funcionales para describir el ciclo de vida.

En el futuro, se introducirán en detalle los ganchos para los componentes funcionales principales.

Si tiene alguna sugerencia o pregunta, ¡deje un mensaje!

Si le gusta esta serie de artículos, no dude en hacer clic en Me gusta y compartir para que más personas puedan verla ~

Reaccionar serie de deportes vernáculos

React Props - React Movimiento vernáculo 09

Configuración de un proyecto React – React Vernacular Movement 08

Babel, Webpack y NPM – Reaccionar el movimiento vernáculo 07

React JSX – Reaccionar movimiento vernáculo 06

Cómo funciona React – React Vernacular Movement 05

Funciones de alto orden de JavaScript: React Vernacular Movement 04

JavaScript Async Await - Reaccionar movimiento vernáculo 03

Objeto JavaScript ES6 - Reaccionar movimiento vernáculo 02

JavaScript ES6 - Reaccionar movimiento vernáculo 01

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

es_ESEspañol