Tabla de contenido
PalancaPrefacio
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:
- Tres etapas del ciclo de vida.
- Ciclo de vida del objeto de clase
- 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.

fuente:https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
Como puede ver en la imagen de arriba, hay tres bloques, a saber:
- Montaje
- Actualizando
- 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 (
{este.mensaje.de.estado}
)
}
}
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 'react' Test() { const [mensaje, setMessage] = useState('') return (
{mensaje}
)
}
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