ionic3ページライフサイクルイベント(フック)

クズども · 掲載地 2018/06/21 10:30:06

私の経験では、ほとんどの学生はこの概念を知っています。あまり詳しくない場合は、ウェブページが読み込まれたときにブラウザがオンロードイベントをトリガーし、通常はwindow.onloadやjqueryの$(document).load()メソッドを使ってウェブページが読み込まれたときに何をすべきかを定義します。

APPでは、この種のイベントがより豊かです。多くの場合、ユーザーがページを見る前に何かをしなければなりません。最も一般的なのはサーバーからデータを取得することです。あるいは、ページを離れようとしたときに何かをしてください。

1. イオン生命循環フックを理解する
Ionic 3.8.0以降、フレームワークはページライフサイクルのさまざまな段階でトリガーされる8つのフック関数を提供しています。

1.1 ionViewDidLoad
ページロード完了トリガー、ここでの「ロード完了」とは、必要なリソースが読み込まれているものの、まだページの状態に入っていない状態を指します(ユーザーはまだ前のページを見ています)。

ただし、これは非常に傲慢なフックであり、プロセス全体で一度だけ呼ばれます。つまり、ページに初めて入ったときに呼ばれ、その後はどのように入って退出しても、そのページは無人で惨めな状態になります。バックグラウンドを終了してソフトウェアを再入力しない限り(ウェブページのデバッグ中にリフレッシュを押すことも問題ありません)。

したがって、このフックはユーザーデータをサーバーから取得してキャッシュに保存するなど、一度きりの処理を行うのに適しています。

1.2 ionViewWillEnter
文字通りの理解とは、「入る」という瞬間、ページが切り替わり始める瞬間です。この時点でページのデータを前処理でき、このフックは毎回呼び出されます。

1.3 ionViewDidEnter
このフックがトリガーされると、ユーザーは新しいページ(ページはアクティブ)に入ったことになり、毎回呼び出しされます。

この点に関連して、Ionicのフック名付けは中国の学生の大多数に非常に友好的で、一方と一方が問題を解決します。外の華やかな(間違った)フレームワークとは違い、準備済み、更新、修正済み、削除など、一度覚えて一度忘れるものがたくさんあります。 (もちろんこれは冗談で、コンポーネントの名前はフレームワークの操作メカニズムと密接に関連しています)

1.4 ionViewWillLeave
ページ準備完了(もうすぐ)は、ユーザーが戻るボタンや関連イベントを直後にトリガーします。

1.5 ionViewDidLeave
ページが終了した時点でトリガーされ、ページは非アクティブです。

1.6 ionViewWillUnload
ページ内のリソースが破壊されそうなときにトリガーされますが、このフックはionViewDidLoadのように一度きりしか発動しないと思いますか?

1.7 テスト
前回のセクションで作成したページを使って、フックの負荷をテストしてみましょう。
前回のセクションでは、ボタンを使ってHomePageからTestPageへジャンプするプロセスを実装し、今度は上記の6つのフックをTestPageに追加し、コンソールを通じてそれらの呼び出しを観察します。

ページテーマセクションコードは以下の通りです

ログインが見えます。

コンストラクタにテスト文も追加しました。 Serve Debuggingを開き、ボタンをクリックし、TestPageにアクセスしてコンソールの出力を観察してください。

初めてのページ登場

ホームページに戻ってコンソールの出力を観察してください。

初めてページを離れる

TestPageに再度入って終了し、コンソールの出力を観察してください。

2回目の出入口

以下の結論が導き出されます。

コンストラクタはionViewDidLoadが始まる前に起動されます
ionViewDidLoadはページに最初に入ったときだけ発動します
ionViewWillUnloadはページを離れるたびにトリガーされます

2. ガードフックも2つあります

最初に述べたように、Ionicは8つのフックを提供しているのに対し、私は6つしか導入していません。最初の6つのフックには共通点があり、それぞれの返り値はすべて空(void)です。つまり、対応する瞬間に呼び出しられ、情報を返しません。

他の2つのフックは少し異なり、ionViewCanEnterとionViewCanLeaveで、ブール値を返すことができます。
見てください、先ほど時制について話しましたが、今度はモーダル動詞について話します。最初の6つのフックがページの受動的な反応であれば、ページはあなたが来ることを許可したり、許可したりする意識を持っている。ああ、ページはこれから立ち上がった!

この二つのフックは権威の支配により大きな役割を果たしており、最近では「ガード」という非常に流行した言葉が登場しました。このガードの理解方法として、コミュニティの門番、親しみやすい校長、そして古代のアプリコット・ブロッサム・ビルディングで何千ものポーズを持つ老ハスタード2333として理解できます。

ブール値を返すことが既に分かったので、試してみましょう。私たちのプログラムにはビジネスロジックがないので、ここで判断するために時間APIを使って判断しましょう

ログインが見えます。

ページへのアクセスはブロックされています

同様に、ページに残したい場合、ionViewCanLeaveがfalseを返すとブロックされます。

帰還操作は傍受されます

コンソール印刷情報

3 概要

ええと、もう無意味な話はやめましょう。まとめると、Ionicには以下のライフサイクルフックがあります

ionViewDidLoadはvoidを返すために初めて呼び出されます
ionViewWillEnter は呼び出されるたびに void を返します
ionViewDidEnter は呼び出すたびに void を返します
ionViewWillLeaveは呼び出されるたびにvoidを返します
ionViewDidLeaveは呼び出されるたびにvoidを返します
ionViewWillUnloadが呼び出されるたびにvoidを返す
ionViewCanEnter は呼び出すたびにブール値を返します
ionViewCanLeaveは呼び出されるたびにブール値を返します

[イオン式] ionic3ページライフサイクルイベント(フック)

関連記事

閲覧したセクション