1. WeChat life cycle
Before learning the life cycle of taro, first understand the life cycle of WeChat. The life cycle of WeChat can be divided into the life cycle of the application and the life cycle of the page
1.1 Application Life Cycle
Refer to WeChat development documentation
- Triggered when the onLaunch applet is initialized, it is triggered only once globally.
- onShow Triggered when the applet starts, or enters the foreground display from the background.
- onHide is triggered when the applet enters the background from the foreground.
1.2 Page life cycle
Diagram of the page life cycle in the WeChat development documentation
It can be seen that the page life cycle of WeChat includes:
- onLoad Fires when the page loads.
- onShow fires after the page loads.
- When onReady displays the page for the first time, the onReady method will be triggered to render page elements and styles, and a page will only be called once.
- The onHide method is triggered when the onHide applet runs in the background or jumps to other pages.
- onUnload When using the redirection method wx.redirectTo or closing the current page and returning to the previous page wx.navigateBack, onUnload is triggered. For a detailed explanation of the life cycle of WeChat, you can refer to this blog: Life Cycle of WeChat Mini Programs
2. The life cycle of React
There are many posts on the Nuggets that introduce the life cycle of React, so I won’t go into details here, and put 2 links:
3. The life cycle in Taro
| life cycle | describe | available location |
|---|---|---|
| onLaunch | Corresponding to the app's onLaunch in the applet environment | entry component |
| componentDidShow | Triggered when a program/page is started or switched to the foreground. Corresponds to the onShow of the page in the applet environment. | Entry Components, Page Components |
| onShow | Triggered when the page is started or switched to the foreground. | page components |
| componentDidHide | Triggered when the program/page is switched to the background or hidden; in the applet environment, it corresponds to the onHide of the page. | Entry Components, Page Components |
| onHide | Triggered when the page is hidden or switched to the background. | page components |
| onLoad | OnLoad of the corresponding page in the applet environment | page components |
| onReady | OnReady of the corresponding page in the applet environment | page components |
| componentWillMount | Triggered when the page is about to be mounted | Entry Components, Page Components |
| componentDidMount | Triggered when the page is loaded | Entry Components, Page Components |
| shouldComponentUpdate | Triggered when page props/state is modified, should return boolean type to decide whether to trigger page re-render | Entry Components, Page Components |
| componentDidUpdate | Triggered after the page is re-rendered | Entry Components, Page Components |
| componentWillUnMount | Triggered when the page is about to be unloaded | Entry Components, Page Components |
It can be seen that the life cycle in Taro includes the life cycle of applets and React.