In my experience, most students know this concept. If you don't know much, then you must know that the browser will trigger an onload event when a web page is loaded, and we usually use the $(document).load() method in window.onload or jquery to define what a web page should do when it is loaded.
In an APP, this kind of event is richer. Many times, you have to do something for users before they see the page, the most common is pulling data from the server; Or do something when they are about to leave a page.
1. Understand the ionic life cycle hook
As of Ionic 3.8.0, the framework provides 8 hook functions that are triggered at various stages of the page lifecycle.
1.1 ionViewDidLoad
The page load completion trigger, here "load complete" refers to the state of the page that the required resources have been loaded, but have not yet entered the state of the page (the user is still seeing the previous page).
It should be noted that it is a very arrogant hook, which will only be called once in the whole process, that is, it is called when you enter the page for the first time, and after that, no matter how you enter and exit, it will be deserted and miserable. Unless you kill its background and re-enter the software (it is also okay to press refresh while debugging the web page).
Therefore, this hook is suitable for you to do some one-time processing, such as pulling user data from the server and storing it in the cache.
1.2 ionViewWillEnter
The literal understanding is the moment "I'm coming in", when the page just starts to switch. You can preprocess the page's data at this point, and this hook will be called every time.
1.3 ionViewDidEnter
When this hook is triggered, the user has entered a new page (the page is active), and it will be called every time.
Speaking of this, I have to interject, ionic's naming of hooks is really friendly to the majority of Chinese students, and one will and one DID solve the problem. Unlike some glamorous (wrong) frameworks outside, there are a bunch of ready, update, complied, destory, etc., remember once and forget once. (Of course, this is a joke, the naming of components is closely related to the operation mechanism of the framework)
1.4 ionViewWillLeave
Page Ready (is about to) is triggered when the user has just triggered the back button or related event.
1.5 ionViewDidLeave
Triggered when the page has finished, the page is inactive.
1.6 ionViewWillUnload
Triggers when a resource in a page is about to be destroyed, would you guess that this hook, like ionViewDidLoad, will only be triggered once?
1.7 Testing
Let's take the page we created in the previous section and do a test on the loading of the hook.
In the previous section, we implemented the process of jumping from HomePage to TestPage using buttons, and now we add the above six hooks to TestPage and observe their invocation through the console.
The page theme section code is as follows
Note that I also added a test statement to the constructor. Open Serve debugging, click the button, go to TestPage, and observe what the console outputs.
First time on the page
Go back to the home page and observe what the console outputs.
Leaving the page for the first time
Enter and exit the TestPage again and observe what the console outputs.
Second entry and exit
The following conclusions can be drawn:
- The constructor is fired before ionViewDidLoad
- ionViewDidLoad only fires when you first enter the page
- ionViewWillUnload is triggered after each time you leave the page
2. There are also two guard hooks
I mentioned at the beginning that ionic offers 8 hooks, while I only introduced 6. The first 6 hooks have a commonality, and their return values are all void, that is, they are called at the corresponding moment and do not return any information.
The other two hooks are a bit different, they are ionViewCanEnter and ionViewCanLeave, which can return booleans.
Look, I just talked about tenses, and now I'm going to talk about modal verbs. If the first 6 hooks are a passive response of the page to the user's visit, then now, the page has the consciousness to allow you to come or allow you to go, ah, the page has stood up from now on!
These two hooks play more of a role in authority control, and recently there is a very trendy term called Guard, how to understand this guard, you can understand it as the gatekeeper of the community, the amiable head teacher, and the old bustard 2333 with thousands of postures in the ancient apricot blossom building.
Now that we already know that it returns a boolean value, let's give it a try. Because there is no business logic in our program, let's use a time API to judge here
The access to the page is blocked
Similarly, if you want to leave in a page, if ionViewCanLeave returns false, you will be blocked.
The return operation is intercepted
Console printed information
3 Summary
Ahem, no more nonsense, to sum up, Ionic has the following lifecycle hooks
- ionViewDidLoad is called the first time to return void
- ionViewWillEnter returns void every time it is called
- ionViewDidEnter returns void every time it is called
- ionViewWillLeave returns void every time it is called
- ionViewDidLeave returns void every time it is called
- ionViewWillUnload returns void every time it is called
- ionViewCanEnter returns boolean every time it is called
- ionViewCanLeave returns boolean every time it is called
|
Posted on 6/21/2018 10:30:06 AM
|
|
|
|
