I. wechat life cycle

Before learning taro’s life cycle, learn about wechat’s life cycle. The life cycle of wechat can be divided into application life cycle and page life cycle

1.1 Application Life Cycle

Refer to wechat development documentation

  • onLaunch Triggered when the applet initialization is complete, globally only once.
  • onShow Triggered when the small program starts, or enters the foreground display from the background.
  • onHide Triggered when a small program enters the background from the foreground.

1.2 Page life cycle

Diagram of page life cycle in wechat development document

It can be seen that the page life cycle of wechat includes:

  • onLoad Triggered when the page loads.
  • onShow Triggered after the page loads.
  • onReady When the page is displayed for the first time, the onReady method is triggered, rendering the page elements and styles, and a page is called only once.
  • onHide The onHide method is triggered when an applet runs in the background or jumps to another page.
  • onUnload OnUnload is triggered when using the redirection method wx.redirectTo or closing the current page to return to the previous page wx.navigateBack.

For a detailed explanation of the life cycle of wechat, please refer to this blog: The life cycle of wechat Applets (iii).

React lifecycle

There are a lot of posts on the React lifecycle on the Nuggets, but I won’t go into detail here.

  • Do you really understand the React lifecycle
  • My understanding of the React V16.4 lifecycle

The life cycle in Taro

The life cycle describe Available position
onLaunch Corresponding to app onLaunch in applets environment Entrance to the component
componentDidShow Program/page, triggered when start or cut foreground. OnShow of the corresponding page in the applet environment. Entry component, page component
onShow Page, triggered when starting or cutting foreground. Page components
componentDidHide Procedures/pages, cut background or hidden trigger; The onHide of the corresponding page in the applet environment. Entry component, page component
onHide Pages are triggered when hidden or cut in the background. Page components
onLoad OnLoad of the corresponding page in the applet environment Page components
onReady OnReady for the corresponding page in the applet environment Page components
componentWillMount Triggered when the page is about to mount Entry component, page component
componentDidMount Triggered when the page is mounted Entry component, page component
shouldComponentUpdate When the page props/state is modified, return Boolean to decide whether to trigger the page to rerender Entry component, page component
componentDidUpdate Triggered after the page is rerendered Entry component, page component
componentWillUnMount Triggered when the page is about to unload Entry component, page component

As you can see, the life cycle in Taro includes the life cycle of applet and React.