Por mi experiencia, la mayoría de los estudiantes conocen este concepto. Si no sabes mucho, entonces debes saber que el navegador activará un evento onload cuando se carga una página web, y normalmente usamos el método $(document).load() en windows.onload o jquery para definir qué debe hacer una página web al cargarla.
En una APP, este tipo de evento es más intenso. Muchas veces, tienes que hacer algo por los usuarios antes de que vean la página, lo más común es extraer datos del servidor; O hacer algo cuando estén a punto de dejar una página.
1. Entender el gancho del ciclo de vida iónico
A partir de Ionic 3.8.0, el framework proporciona 8 funciones hook que se activan en varias etapas del ciclo de vida de la página.
1.1 ionViewDidLoad
El disparador de completación de carga de página, aquí "carga completada", se refiere al estado de la página en la que los recursos requeridos han sido cargados, pero aún no han entrado en el estado de la página (el usuario sigue viendo la página anterior).
Cabe señalar que es un gancho muy arrogante, que solo se llamará una vez en todo el proceso, es decir, se llama cuando entras en la página por primera vez y, después de eso, no importa cómo entres y salgas, estará desierta y miserable. A menos que desactives su segundo plano y vuelvas a entrar en el software (también está bien pulsar actualizar mientras depuras la página web).
Por lo tanto, este gancho es adecuado para que realices algún procesamiento puntual, como extraer datos del usuario del servidor y almacenarlos en la caché.
1.2 ionViewWillEnter
La comprensión literal es el momento en que "voy a entrar", cuando la página empieza a cambiar. Puedes preprocesar los datos de la página en este punto, y este hook se llamará cada vez.
1.3 ionViewDidEnter
Cuando se activa este gancho, el usuario ha entrado en una nueva página (la página está activa) y se la llamará cada vez.
Hablando de esto, tengo que intervenir: la forma en que Ionic nombra los ganchos es muy amigable para la mayoría de los estudiantes chinos, y uno lo hará y el otro SÍ resolverá el problema. A diferencia de algunos marcos glamurosos (erróneos) fuera, hay un montón de lista, actualizar, cumplir, destory, etc., recuerda una vez y olvida una vez. (Por supuesto, esto es una broma, la denominación de los componentes está estrechamente relacionada con el mecanismo de funcionamiento del marco)
1.4 iónViewWillLeave
Page Ready (está a punto de hacerlo) se activa cuando el usuario acaba de activar el botón de retroceso o el evento relacionado.
1.5 iónVistaDejóDejó
Se activa cuando la página ha terminado, la página queda inactiva.
1.6 iónVistaDescargaDescargará
Se activa cuando un recurso en una página está a punto de ser destruido, ¿crees que este gancho, como ionViewDidLoad, solo se activará una vez?
1.7 Pruebas
Tomemos la página que creamos en la sección anterior y hagamos una prueba sobre la carga del gancho.
En la sección anterior, implementamos el proceso de saltar de HomePage a TestPage usando botones, y ahora añadimos los seis ganchos anteriores a TestPage y observamos su invocación a través de la consola.
El código de la sección tema de página es el siguiente
Ten en cuenta que también añadí una instrucción de prueba al constructor. Abre la depuración de Servicio, haz clic en el botón, ve a Página de Prueba y observa qué muestra la consola.
Primera vez en la página
Vuelve a la página principal y observa qué muestra la consola.
Salir de la página por primera vez
Entra y sal de la Página de Prueba de nuevo y observa qué muestra la consola.
Segunda entrada y salida
Se pueden extraer las siguientes conclusiones:
- El constructor se dispara antes de ionViewDidLoad
- ionViewDidLoad solo se activa cuando entras en la página por primera vez
- ionViewWillUnload se activa cada vez que sales de la página
2. También hay dos ganchos de guardia
Mencioné al principio que Ionic ofrece 8 ganchos, mientras que solo introduje 6. Los primeros 6 ganchos tienen una similitud, y sus valores de retorno son todos nulos, es decir, se llaman en el momento correspondiente y no devuelven ninguna información.
Los otros dos ganchos son un poco diferentes, son ionViewCanEnter e ionViewCanLeave, que pueden devolver booleanos.
Mira, acabo de hablar de tiempos verbales, y ahora voy a hablar de verbos modales. Si los primeros 6 ganchos son una respuesta pasiva de la página a la visita del usuario, entonces ahora la página tiene la conciencia para permitirte venir o permitirte ir, ¡ah, la página ha estado en pie desde ahora!
Estos dos ganchos juegan un papel más importante en el control de la autoridad, y recientemente hay un término muy de moda llamado Guardia, cómo entender a este guardia, puedes entenderlo como el guardián de la comunidad, el amable director y el viejo avutardo 2333 con miles de posturas en el antiguo edificio de la flor de albaricoque.
Ahora que ya sabemos que devuelve un valor booleano, vamos a probarlo. Como no hay lógica de negocio en nuestro programa, usemos una API de tiempo para juzgar aquí
El acceso a la página está bloqueado
De manera similar, si quieres dejar en una página, si ionViewCanLeave devuelve false, serás bloqueado.
La operación de retorno es interceptada
Información impresa en consola
3 Resumen
Ejem, no más tonterías, para resumir, Ionic tiene los siguientes ganchos de ciclo de vida
- ionViewDidLoad se llama la primera vez que devuelve void
- ionViewWillEnter devuelve void cada vez que se llama
- ionViewDidEnter devuelve el void cada vez que se llama
- ionViewWillLeave devuelve el vacío cada vez que se llama
- ionViewDidLeave devuelve el vacío cada vez que se llama
- ionViewWillUnload devuelve vacío cada vez que se llama
- ionViewCanEnter devuelve boolean cada vez que se llama
- ionViewCanLeave devuelve boolean cada vez que se llama
|
Publicado en 21/6/2018 10:30:06
|
|
|
|
