组件的生命周期函数在特殊的时间点由框架触发。组件生命周期示意图如下:
生命周期函数具体信息见下表:
生命周期 | 参数 | 说明 | 最低版本 |
---|---|---|---|
onInit | 无 | 组件创建时触发 | 1.14.0 |
deriveDataFromProps | nextProps | 组件创建时和更新前触发 | 1.14.0 |
didMount | 无 | 组件创建完毕时触发 | - |
didUpdate | (prevProps,prevData) | 组件更新完毕时触发 | - |
didUnmount | 无 | 组件删除时触发 | - |
onInit
、deriveDataFromProps
自基础库 1.14.0
才支持,可以使用 my.canIUse('component2')
做兼容。onInit
在组件创建时触发。在onInit中,可以:
this.is
、this.$id
、this.$page
等属性。this.data
、this.props
等属性。this.setData
、this.$spliceData
修改数据。
// /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>
当组件在页面上渲染后,页面输出如下:
1
/components/counter/index
// /components/counter/index.js
Component({
onInit() {
this.xxx = 2;
this.data = { counter: 0 };
},
})
<!-- /components/counter/index.axml -->
<view>{{counter}}</view>
当组件在页面上渲染后,页面输出如下:
0
deriveDataFromProps
在组件创建和更新时都会触发。在deriveDataFromProps
中可以:
this.is
、this.$id
、this.$page
等属性。this.data
、this.props
等属性。this.setData
、this.$spliceData
修改数据。nextProps
参数获取将要更新的 props
参数。
// /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>
+
按钮,页面上的 counter 会一直保持不变,直到 pCounter 的值大于 5。didMount 为自定义组件首次渲染完毕后的回调,此时页面已经渲染,通常在这时请求服务端数据。
Component({
data: {},
didMount() {
let that = this;
my.httpRequest({
url: 'http://httpbin.org/post',
success: function(res) {
console.log(res);
that.setData({name: 'xiaoming'});
}
});
},
});
didUpdate 为自定义组件数据更新后的回调,每次组件数据变更的时候都会调用。
Component({
data: {},
didUpdate(prevProps, prevData) {
console.log(prevProps, this.props, prevData, this.data);
},
});
this.setData
会触发 didUpdate。this.setData
也会触发 didUpdate。didUnmount 为自定义组件被卸载后的回调,每当组件实例从页面卸载的时候都会触发此回调。
Component({
data: {},
didUnmount() {
console.log(this);
},
});
在文档使用中是否遇到以下问题
更多建议
匿名提交