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 | - |
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
, andthis.$page
properties. - Access the
this.data
andthis.props
properties. - Access the custom properties of the methods component.
- Call
this.setData
andthis.$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.
0
deriveDataFromProps
deriveDataFromProps
is triggered when the component is created and updated. In deriveDataFromProps
, you can:
- Access the
this.is
,this.$id
, andthis.$page
properties. - Access the
this.data
andthis.props
properties. - Access the custom properties of the methods component.
- Call
this.setData
andthis.$spliceData
to modify data. - Use
nextProps
to obtain theprops
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>
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);
},
});
didUpdate
is triggered whenthis.setData
is called in the component.didUpdate
can also be triggered whenthis.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);
},
});