Component lifecycle

The following table describes each lifecycle function.

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

onInit

onInit is triggered when a component is created. In onInit, you can perform the following operations:

• Access the this.is, this.$id, and this.$page properties.

• Access the this.data and this.props properties.

• Access custom properties defined in the component's methods.

• 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 output is as follows:

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 output is as follows:

0

deriveDataFromProps

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

• Access the this.is, this.$id, and this.$page properties.

• Access the this.data and this.props properties.

• Access custom properties defined in the component's methods.

• Call this.setData and this.$spliceData to modify data.

• Use nextProps to get the upcoming props values.

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>

didMount

didMount is called after the custom component is rendered for the first time. At this point, the page is fully rendered. You typically request server data in this callback.

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 called after the custom component data updates. It runs every time the component data changes.

Code sample

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

didUnmount

didUnmount is called after the custom component is removed. It runs every time the component instance is removed from the page.

Code sample

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