Wechat applet_ 16. Component life cycle

All lifecycle functions of components :

The full life cycle of the applet is shown in the following table :

The main life cycle functions of components :

In the applet , The most important life cycle functions are 3 individual , Namely created,attached,detached. Their respective characteristics are as follows :

1. When the component instance is just created ,created The lifecycle function will be triggered

• You can't call setData
• Usually in this life cycle function , Should only be used for components this Add some custom attribute fields

2. After the component is fully initialized , Just after entering the page node tree ,attached The lifecycle function will be triggered

• here ,this.data Has been initialized
• This life cycle is very useful , Most initialization can be done at this time ( For example, send a request to get the initial data )

3. After the component leaves the page node tree ,detached The lifecycle function will be triggered

• When exiting a page , It will trigger the of each custom component in the page detached Life cycle function
• At this time, it is suitable to do some cleaning work

Define the lifecycle function of the component :

lifetimes node :

In the applet , Life cycle functions can be defined directly in Component In the first level parameters of the constructor , Can be in lifetimes Declaration in field ( This is the recommended way , It has the highest priority ), The sample code is as follows :

Component({
    
  /** *  A list of properties of a component  */
  properties: {
    

  },
  //  Recommended use :
  lifetimes: {
    
    //  Execute when the component instance enters the page node tree 
    attached() {
    },
    //  Execute when the component instance is removed from the page section tree 
    detached() {
    }
  },
  //  Here's the old definition ：
  //  Execute when the component instance enters the page node tree 
  attached() {
    },
  //  Execute when the component instance is removed from the page section tree 
  detached() {
    },
})

When both old and new methods exist , Will give priority to new , It is not recommended to use the old way in the future

What is the lifecycle function of the page where the component is located :

Sometimes , The behavior of custom components depends on the change of page state , At this point, you need to use the life cycle of the page where the component is located
for example : Whenever the page is triggered show When it comes to life cycle functions , We hope to regenerate a random RGB Color value :
In custom components , The life cycle functions of the page where the component is located are as follows 3 individual , Namely :

pageLifetimes

The lifecycle function of the page where the component is located , Need to be defined in pageLifetimes In nodes , The sample code is as follows :

// components/lifetimes/lifetimes.js
Component({
    
  /** *  A list of properties of a component  */
  properties: {
    

  },
  pageLifetimes: {
    
    show: function () {
    
      console.log(' The page is displayed ');
    },
    hide: function () {
    
      console.log(' The page is hidden ');
    },
    resize: function () {
    
      console.log(' The page has changed ');
    },
  },
})

Generate random RGB Color value :

Component({
    
  pageLifetimes: {
    
    show: function () {
    
      console.log(' The page is displayed , Generate random colors ');
      this._randomColor()
    },
    hide: function () {
    
      console.log(' The page is hidden ');
    },
    resize: function () {
    
      console.log(' The page has changed ');
    },
  },
    //  Generate random RGB Color value ：
    _randomColor() {
    
      this.setData({
    
        _rgb: {
    
          r: Math.floor(Math.random() * 256),
          g: Math.floor(Math.random() * 256),
          b: Math.floor(Math.random() * 256),
        }
      })
    }
})

function :

Here is the status of the component listening to the page , Every time you enter the page , Generate a random RGb value ,