web-dev-qa-db-fra.com

ionViewWillEnter vs ionViewDidEnter

Lorsque nous ne voudrions pas relancer une tâche qui est déjà en cache, il ne fait aucun doute que nous utiliserons ionDidLoad.

Supposons maintenant que nous devons effectuer une tâche à chaque fois que nous entrons dans une vue. Comment choisir entre utiliser ionViewWillEnter et ionViewDidEnter.

Je n'ai trouvé aucune directive claire à ce sujet.

Par exemple: 
1) Obtention de navParams 
2) Appel de REST api 
3) Déclaration de variable 
4) Lancer quelque chose après le chargement complet de l’élément DOM (par exemple: google map init)

Remarque additionnelle:  
Je cherche une réponse qui est clairement écrite dans la documentation ionique. Qu'est-ce que j'ai l'intention de savoir, c'est quel est le pour et le contre si mis en ionViewWillEnter vs ionViewDidEnter

par exemple: le lancement de ionViewDidEnter causera un certain retard (par exemple, je ne suis pas sûr à ce sujet) - même l'insignifiant

angulartypescriptionic-frameworkionic2ionic3
15
stackdisplay

La réponse est assez simple et, comme toujours, le meilleur moyen de voir ce qui se passe dans les coulisses est d'inspecter le code source de Ionic.

Longue histoire: le hook ionViewWillEnter lifecycle est déclenché avant le début de la transition de page, et la ionViewDidEnter est déclenchée à la fin de la transition. Veuillez jeter un coup d’œil à la fin de cette réponse pour voir la référence au code source.

Alors, quand devriez-vous utiliser chacun de ces crochets? Il doit y avoir plusieurs scénarios possibles. Ce ne sont donc que quelques idées basées sur certaines applications sur lesquelles j'ai travaillé.

  • Parfois, vous souhaitez mettre à jour des informations sur la page chaque fois que l'utilisateur ouvre cette page; cela peut nécessiter l'envoi d'une requête HTTP à une API distante pour extraire certaines données. Dans ce cas, nous pourrions dire que l’utilisation de la variable IonViewWillEnter semble être la bonne option. Vous pouvez donc faire la demande le plus rapidement possible, tout en obtenant la réponse plus rapidement.

  • Il en va de même lorsque vous devez interagir avec le DOM pour une raison quelconque, car il a déjà été chargé lors de l'exécution de la variable IonViewWillEnter. Cela peut donc vous aider à initialiser la page le plus rapidement possible et, avec un peu de chance, la page. pourrait être montré à l'utilisateur prêt à être utilisé.

  • La même chose est valable lorsque vous devez initialiser la vue avec certains paramètres que vous obtenez de la vue précédente. Dans ce cas, puisqu'il s'agit d'une opération très simple, vous pouvez utiliser le hook ionViewWillEnter lifecycle et la vue sera affichée comme étant déjà initialisée à l'utilisateur.

Alors, quand devriez-vous utiliser la ionViewDidEnter alors? 

  • J'ai remarqué que, parfois, lors de l'exécution de l'application sur de très vieux appareils Android (avec moins de 512 Mo de RAM), l'animation peut être un peu retardée lors d'une requête à l'API dans la ionViewWillEnter, ce serait donc un bonne idée de faire ces requêtes à l'API dans la variable ionViewDidEnter pour s'assurer que l'animation est terminée

  • Dans certaines applications, il m'a été demandé d'inclure des animations de fantaisie aux éléments de la page poussée, par exemple en apportant une partie du contenu à partir du bas, en faisant disparaître certains autres éléments après un délai, etc. Vous pouvez utiliser des animations angulaires pour cela (afin de pouvoir contrôler le minutage), et le meilleur moyen d'éviter un décalage de ces animations serait d'utiliser le hook ionViewDidEnter. Cela vous permettra également de donner à l'utilisateur l'impression que les animations des éléments de cette page sont une continuation de la transition de la page elle-même.

Vous pouvez consulter le code NavControllerBase:

1) IonViewWillEnter

// around line 666...
_transitionStart(...): Promise<NavResult> {

    // ...

    // around line 700...

    // create a callback that needs to run within zone
    // that will fire off the willEnter/Leave lifecycle events at the right time
    transition.beforeAddRead(this._viewsWillLifecycles.bind(this, enteringView, leavingView));

   // ...

}

Et...

  // around line 805...
  _viewsWillLifecycles(enteringView: ViewController, leavingView: ViewController) {
    if (enteringView || leavingView) {
      this._zone.run(() => {
        // Here, the order is important. WillLeave must be called before WillEnter.
        leavingView && this._willLeave(leavingView, !enteringView);
        enteringView && this._willEnter(enteringView);
      });
    }
  }

Si vous inspectez la méthode beforeAddRead à partir de la définition animation.d.ts, vous verrez:

/**
* Add a function which contains DOM reads, which will run
* before the animation begins.
*/
beforeAddRead(domReadFn: Function): Animation;

Alors maintenant, nous pouvons être sûrs que le hook ionViewWillEnter lifecycle est exécuté avant le début de la transition de page

2) IonViewDidEnter

Celui-ci est un peu plus simple. Toujours dans la même NavControllerBase:

// around line 743...
  _transitionFinish(...): NavResult {

    // ...

    // around line 753...
    if (hasCompleted) {
      // transition has completed (went from 0 to 1)
      if (enteringView) {
        enteringName = enteringView.name;
        this._didEnter(enteringView);
      }

      // ..

    }

    // ...

  }

Et 

// around line 939...
  _didEnter(view: ViewController) {
    assert(this.isTransitioning(), 'nav controller should be transitioning');
    assert(NgZone.isInAngularZone(), 'callback should be zoned');

    try {
      view._didEnter();
      this.viewDidEnter.emit(view);
      this._app.viewDidEnter.emit(view);
    } catch (e) {
      this._errHandler && this._errHandler.handleError(e);
    }
  }

Donc, à cause de cela, nous pouvons dire que le hook ionViewDidEnterlifecycle est déclenché à la fin de la transition.

8
sebaferreras

Si vous souhaitez exécuter la tâche avant que l'affichage n'apparaisse, utilisez ionViewWillEnter . Si vous souhaitez effectuer cette tâche après l'affichage, utilisez ionViewDidEnter .

Cela dépend totalement du scénario. Par exemple, si vous souhaitez modifier les propriétés de l'élément ui avant l'affichage de la vue, utilisez ionViewWillEnter. Dans les exemples de votre question: 4) Initiez quelque chose après le chargement complet de l'élément DOM (par exemple: google map init. Donc, dans ce scénario, vous pouvez utiliser ionViewDidEnter 

0
H S Progr