支付宝小程序框架 自定义组件·生命周期

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

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

注意：onInit、deriveDataFromProps 自基础库 1.14.0 才支持，可以使用 my.canIUse('component2') 做兼容，并且，需要在开发者工具中的 详情 > 项目配置 中，勾选 component2。

onInit

onInit在组件创建时触发。在onInit中，可以进行以下操作：

• 访问 this.is、this.$id、this.$page 等属性
• 访问 this.data、this.props 等属性
• 访问组件 methods 中的自定义属性
• 调用 this.setData、this.$spliceData 修改数据

示例一

// /components/index/index.js
Component({
  data: {
    counter: 0,
  },
  onInit() {
    this.setData({
      counter: 1,
      is: this.is,
    });
  },
});
<!-- /components/index/index.axml -->
<view>{{counter}}</view>
<view>{{is}}</view>

当组件在页面上渲染后，页面输出如下：

1
/components/index/index

示例二

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

当组件在页面上渲染后，页面输出如下：

0

deriveDataFromProps

deriveDataFromProps 在组件创建和更新时都会触发。

在deriveDataFromProps 中可以：

• 访问 this.is、this.$id、this.$page 等属性
• 访问this.data、this.props 等属性
• 访问组件 methods 中的自定义属性
• 调用this.setData、this.$spliceData 修改数据
• 可以使用 nextProps 参数获取将要更新的 props 参数

// /components/index/index.js
Component({
  data: {
    counter: 5,
  },
  deriveDataFromProps(nextProps) {
    if (this.data.counter < nextProps.pCounter) {
      this.setData({
      counter: nextProps.pCounter,
      });
    }
  },
});
<!-- /components/index/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 -->
<my-component pCounter="{{counter}}" />
<button onTap="plus">+</button>

注意：本示例中点击 + 按钮，页面上的 counter 会一直保持不变，直到 pCounter 的值大于 5。

didMount

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

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

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

注意：

• 组件内部调用 this.setData 会触发 didUpdate。
• 外部调用者调用 this.setData 也会触发 didUpdate。

didUnmount

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

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