全部产品

生命周期

更新时间:2019-09-09 14:07:35

组件的生命周期函数在特殊的时间点由框架触发。组件生命周期示意图如下:

生命周期函数具体信息见下表:

生命周期 参数 说明 最低版本
onInit 组件创建时触发 1.14.0
deriveDataFromProps nextProps 组件创建时和更新前触发 1.14.0
didMount 组件创建完毕时触发 -
didUpdate (prevProps,prevData) 组件更新完毕时触发 -
didUnmount 组件删除时触发 -
说明onInitderiveDataFromProps 自基础库 1.14.0 才支持,可以使用 my.canIUse('component2') 做兼容。

onInit

onInit在组件创建时触发。在onInit中,可以:

  • 访问 this.isthis.$idthis.$page 等属性。
  • 访问 this.datathis.props 等属性。
  • 访问组件 methods 中的自定义属性。
  • 调用 this.setDatathis.$spliceData 修改数据。

代码示例一

  1. // /components/counter/index.js
  2. Component({
  3. data: {
  4. counter: 0,
  5. },
  6. onInit() {
  7. this.setData({
  8. counter: 1,
  9. is: this.is,
  10. });
  11. },
  12. })
  1. <!-- /components/counter/index.axml -->
  2. <view>{{counter}}</view>
  3. <view>{{is}}</view>

当组件在页面上渲染后,页面输出如下:

  1. 1
  2. /components/counter/index

代码示例二

  1. // /components/counter/index.js
  2. Component({
  3. onInit() {
  4. this.xxx = 2;
  5. this.data = { counter: 0 };
  6. },
  7. })
  1. <!-- /components/counter/index.axml -->
  2. <view>{{counter}}</view>

当组件在页面上渲染后,页面输出如下:

  1. 0

deriveDataFromProps

deriveDataFromProps 在组件创建和更新时都会触发。在deriveDataFromProps 中可以:

  • 访问 this.isthis.$idthis.$page 等属性。
  • 访问this.datathis.props 等属性。
  • 访问组件 methods 中的自定义属性。
  • 调用this.setDatathis.$spliceData 修改数据。
  • 使用 nextProps 参数获取将要更新的 props 参数。

代码示例

  1. // /components/counter/index.js
  2. Component({
  3. data: {
  4. counter: 5,
  5. },
  6. deriveDataFromProps(nextProps) {
  7. if (this.data.counter < nextProps.pCounter) {
  8. this.setData({
  9. counter: nextProps.pCounter,
  10. });
  11. }
  12. },
  13. })
  1. <!-- /components/counter/index.axml -->
  2. <view>{{counter}}</view>
  1. // /pages/index/index.js
  2. Page({
  3. data: {
  4. counter: 1,
  5. },
  6. plus() {
  7. this.setData({ counter: this.data.counter + 1 })
  8. },
  9. })
  1. <!-- /pages/index/index.axml -->
  2. <counter pCounter="{{counter}}" />
  3. <button onTap="plus">+</button>
说明:在本示例中,点击 + 按钮,页面上的 counter 会一直保持不变,直到 pCounter 的值大于 5。

didMount

didMount 为自定义组件首次渲染完毕后的回调,此时页面已经渲染,通常在这时请求服务端数据。

代码示例

  1. Component({
  2. data: {},
  3. didMount() {
  4. let that = this;
  5. my.httpRequest({
  6. url: 'http://httpbin.org/post',
  7. success: function(res) {
  8. console.log(res);
  9. that.setData({name: 'xiaoming'});
  10. }
  11. });
  12. },
  13. });

didUpdate

didUpdate 为自定义组件数据更新后的回调,每次组件数据变更的时候都会调用。

代码示例

  1. Component({
  2. data: {},
  3. didUpdate(prevProps, prevData) {
  4. console.log(prevProps, this.props, prevData, this.data);
  5. },
  6. });
说明
  • 组件内部调用 this.setData 会触发 didUpdate。
  • 外部调用者调用 this.setData 也会触发 didUpdate。

didUnmount

didUnmount 为自定义组件被卸载后的回调,每当组件实例从页面卸载的时候都会触发此回调。

代码示例

  1. Component({
  2. data: {},
  3. didUnmount() {
  4. console.log(this);
  5. },
  6. });