El ciclo de vida de un componente se refiere al proceso desde que se crea un componente hasta que se monta y ejecuta en la página, y luego cuando el componente se desinstala cuando no está en uso. Solo los componentes de clase tienen un ciclo de vida (los componentes de clase son instanciados, los componentes de función no necesitan ser instanciados)
El cuadro comparativo entre la nueva versión y la versión anterior del ciclo de vida es el siguiente:
Ciclo de vida (constructor())
Los componentes de clase heredan la clase base del componente de reacción y, por lo tanto, heredan esta clase base de reacción para que se puedan usar render (), ciclo de vida y otros métodos. Esto también explica por qué los componentes de función no pueden usar estos métodos.
constructor (): sus parámetros de entrada son accesorios (propiedades personalizadas pasadas desde el alcance principal y los secundarios [estructura de vista anidada dentro del componente]). La primera línea de código debe ser super (props), que llama al constructor de la clase principal. función
- El propio estado del componente sólo se puede definir aquí (defínelo primero y luego úselo) El estado es una llamada variable declarativa.
- Los accesorios no se pueden modificar aquí, ni se pueden usar accesorios para realizar operaciones aquí (porque el constructor solo ocurre una vez en el ciclo de declaración).
- No asigne accesorios y estados aquí. En la lógica del código React, siempre mantenga la independencia de los accesorios y el estado.
- No utilice this.setState para modificar el estado aquí. El renderizado se realiza tan pronto como se asigna el valor, pero en el constructor aún no se ha generado el ciclo de vida del renderizado.
- En general, no escriba aquí lógica empresarial. A veces solo permitimos esto cuando necesitamos cambiar el punto, por ejemplo, las operaciones DOM, BOM, etc., no deben realizarse aquí.
- Generalmente, herede la clase principal, defina el estado y cambie este punto.
Ciclo de vida (fase de montaje)
| función de gancho |
tiempo de activación |
efecto |
| constructor |
Al crear un componente, se ejecuta primero y solo una vez durante la inicialización. |
1. Inicializar estado 2. Crear referencia 3. Utilice bind para resolver este problema de señalización, etc. |
| prestar |
Se activa cada vez que se renderiza el componente. |
Representar la interfaz de usuario (nota: setState() no se puede llamar internamente) |
| componenteDidMount |
Se ejecuta después de montar el componente (representación DOM completa), se ejecuta una vez durante la inicialización y se llama antes de que el navegador actualice la vista. |
1. Enviar una solicitud de red 2.Operaciones DOM |
componenteWillMount(): antes de reaccionar 16.3
Se llama antes de que el componente se monte en el DOM y solo se llamará una vez. Llamar a this.setState aquí no hará que el componente se vuelva a representar y el contenido escrito aquí también se puede avanzar al constructor (), por lo que Es muy fácil en el proyecto, usa menos.
componenteDidMount(): después de reaccionar 17
- Equivalente a montado () en Vue, lo que indica que la fase de montaje se ha completado y este ciclo de declaración solo se ejecuta una vez.
- Aquí se pueden realizar varias lógicas de negocios (DOM, ref, desconectar interfaces, iniciar temporizadores, etc.)
- This.setState() se puede utilizar varias veces aquí y el valor predeterminado es asincrónico.
- Este ciclo de vida está en la fase de actualización y ocurre después del renderizado.
Ciclo de vida (fase de actualización)
Antes de reaccionar 16.3
- componenteWillReceiveProps(nextProps,nextState)
- Este ciclo de vida nos proporciona principalmente monitoreo de cambios en los accesorios. Si necesita cambiar algún estado del componente en consecuencia después del cambio de accesorios, cambiar el estado en este método no lo representará dos veces, sino que fusionará el estado directamente.
- debería actualizar componentes (siguientesprops,siguienteestado)
- Devolverá un valor booleano para determinar si el componente de renderizado necesita ser actualizado. Si devuelve falso, no ejecutará el ciclo de vida hacia abajo. Es uno de los principales medios para optimizar las aplicaciones de reacción. No se puede llamar a SetState() este método, lo que conducirá a llamadas circulares.
- componenteWillUpdate
- Este ciclo de vida se utiliza para manejar cosas antes de que se actualice Dom. No se puede llamar a SetState en esta etapa, lo que generará llamadas circulares.
- prestar
- componenteDidUpdate(preProps,preState)
- En este punto, se completó la renderización, Dom y el estado cambiaron y los parámetros son todos los valores del estado anterior.
Después de reaccionar 17
- getDerivedStateFromProps(nextProps,preState)
- Se puede devolver un objeto al estado de actualización.
- deberíaComponentUpdate renderizar getSnapshotBeforeUpdate(preProps,preState)
- En esta etapa, puede obtener las coordenadas, el tamaño y otra información relacionada del elemento Dom del estado anterior. Se utiliza para reemplazar el componenteWillUpdate en el ciclo de vida anterior.
- Aparece el tercer parámetro de componenteDidUpdate.
- Se ejecuta antes de que se envíe la última representación al árbol DOM y se puede utilizar para obtener la información DOM antes de la actualización.
- componenteDidUpdate(preProps,preState,instantánea)
- No se llamará en la primera representación, pero se llamará inmediatamente después de que se actualice el componente. Cuando se usa this.setState en este ciclo de vida, debe envolverse en una declaración condicional, de lo contrario provocará un bucle infinito.
La fase de actualización se activa en tres situaciones:
1. El componente principal cambia los accesorios: un componente no puede cambiar activamente los atributos de accesorios que posee. Sus atributos de accesorios se los pasa su componente principal. Forzar la reasignación de accesorios hará que el programa informe un error.
- Úselo directamente: siempre que el componente principal vuelva a renderizar y retransmitir accesorios, el componente secundario se volverá a renderizar directamente, independientemente de si los accesorios han cambiado. Se puede optimizar mediante el método shouldComponentUpdate.
- En el método componenteWillReceiveProps, convierta los accesorios a su propio estado
2. Cambiar estado: El cambio de estado se logra a través de la interfaz setState. Una gran parte de la razón por la que se actualizan los componentes se debe a que se llama a la interfaz setState para actualizar el estado. A menudo llamamos a setState de forma sincrónica, pero en realidad el método setState es asíncrono.
- El propio componente llama a setState independientemente de si el estado ha cambiado o no. Se puede optimizar mediante el método shouldComponentUpdate.
3. Llame al método forceUpdate: fuerce la actualización del componente.
Ciclo de vida (fase de desinstalación)
| función de gancho |
tiempo de activación |
efecto |
| componenteWillUnmount |
Desinstalaciones de componentes (desaparece de la página) |
Realizar trabajos de limpieza (como: temporizador de limpieza, etc.) |
En la nueva versión, algunas razones del ciclo de vida están en desuso: los tres enlaces del ciclo de vida componenteWillMount, componenteWillReceiveProps y componenteWillUpdate se ejecutan en la fase de renderizado.
(1) Antes de aplicar la arquitectura de fibra, la fase de renderizado no se puede interrumpir. Una vez que la página es compleja, puede bloquear el renderizado de la página;
(2) Entonces, React introdujo la arquitectura de fibra, que convirtió el proceso de renderizado originalmente sincrónico en asincrónico, dividiendo una gran tarea de actualización en muchas tareas pequeñas, y la fase de renderizado de tareas de baja prioridad puede ser interrumpida por tareas de alta prioridad;
(3) Esto hace que las funciones del ciclo de vida ejecutadas en la fase de renderizado se llamen varias veces. Si se realizan algunas operaciones con efectos secundarios en estas funciones, como enviar solicitudes de red, la misma solicitud de red se llamará varias veces. . , por lo que se necesita un nuevo ciclo de vida para solucionar este problema;
(4) Utilice la función estática getDerivedStateFromProps para reemplazar varias funciones de ciclo de vida abandonadas. Los desarrolladores no podrán obtener instancias de componentes a través de esto, ni podrán enviar solicitudes de red ni llamar a this.setState. Al obligar a los desarrolladores a no hacer nada antes de renderizar, Side -Efectuar operaciones para evitar abusos de por vida.