Component lifecycle - Mobile Platform as a Service - Alibaba Cloud Documentation Center

The life cycle function of a component is triggered by the framework at a special time point . The following diagram shows the life cycle of a component.

Detailed information of the life cycle function is as follows.

Life cycle	Field	Description	Minimum version
onInit	N/A	Triggered when the component creation starts	1.14.0
deriveDataFromProps	nextProps	Triggered when the component creation starts and before the component is updated	1.14.0
didMount	N/A	Triggered when the component creation completes	-
didUpdate	(prevProps,prevData)	Triggered when the component is updated	-
didUnmount	N/A	Triggered when the component is deleted	-

Note: onInit and deriveDataFromProps apply to basic library 1.14.0 and later versions. You can use my.canIUse('component2') for compatibility.

onInit

onInit is triggered when a component is created. In onInit, you can:

Access the this.is, this.$id, and this.$page properties.
Access the this.data and this.props properties.
Access the custom properties of the methods component.
Call this.setData and this.$spliceData to modify data.

Code sample 1

// /components/counter/index.js
Component({
  data: {
    counter: 0,
  },
  onInit() {
    this.setData({
      counter: 1,
      is: this.is,
    });
  },
})

<!-- /components/counter/index.axml -->
<view>{{counter}}</view>
<view>{{is}}</view>

After the component is rendered on the page, the following output is displayed.

1
/components/counter/index

Code sample 2

// /components/counter/index.js
Component({
  onInit() {
    this.xxx = 2;
    this.data = { counter: 0 };
  },
})

<!-- /components/counter/index.axml -->
<view>{{counter}}</view>

After the component is rendered on the page, the following output is displayed.

deriveDataFromProps

deriveDataFromProps is triggered when the component is created and updated. In deriveDataFromProps, you can:

Access the this.is, this.$id, and this.$page properties.
Access the this.data and this.props properties.
Access the custom properties of the methods component.
Call this.setData and this.$spliceData to modify data.
Use nextProps to obtain the props parameter to be modified.

Code sample

// /components/counter/index.js
Component({
  data: {
    counter: 5,
  },
  deriveDataFromProps(nextProps) {
    if (this.data.counter < nextProps.pCounter) {
      this.setData({
        counter: nextProps.pCounter,
      });
    }
  },
})

<!-- /components/counter/index.axml -->
<view>{{counter}}</view>

// /pages/index/index.js
Page({
  data: {
    counter: 1,
  },
  plus() {
    this.setData({ counter: this.data.counter + 1 })
  },
})

<!-- /pages/index/index.axml -->
<counter pCounter="{{counter}}" />
<button onTap="plus">+</button>

Note: In this example, after you tap the “+” button, the counter on the page remains unchanged until the value of pCounter is greater than 5.

didMount

didMount is the callback after the custom component is rendered for the first time. At this time, the page has been rendered, and the server data is usually requested at this time.

Code sample

Component({
  data: {},
  didMount() {
    let that = this;
    my.httpRequest({
      url: 'http://httpbin.org/post',
      success: function(res) {
        console.log(res);
        that.setData({name: 'xiaoming'});               
      }
    });
  },
});

didUpdate

didUpdate is the callback after the data of the custom component is updated. It will be called every time the data of the component changes.

Code sample

Component({
  data: {},
  didUpdate(prevProps, prevData) {
    console.log(prevProps, this.props, prevData, this.data);
  },
});

Notes:

didUpdate is triggered when this.setData is called in the component.
didUpdate can also be triggered when this.setData is called by an external caller.

didUnmount

didUnmount is the callback after the custom component is deleted. It is triggered every time the component instance is deleted from the page.

Code sample

Component({
  data: {},
  didUnmount() {
    console.log(this);
  },
});