生命周期 - 移动开发平台 mPaaS

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

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

生命周期	参数	说明	最低版本
onInit	无	组件创建时触发	1.14.0
deriveDataFromProps	nextProps	组件创建时和更新前触发	1.14.0
didMount	无	组件创建完毕时触发	-
didUpdate	(prevProps,prevData)	组件更新完毕时触发	-
didUnmount	无	组件删除时触发	-

说明： onInit、 deriveDataFromProps 自基础库 1.14.0 才支持，可以使用 my.canIUse('component2') 做兼容。

onInit

onInit在组件创建时触发。在onInit中，可以：

访问 this.is、this.$id、this.$page 等属性。
访问 this.data、this.props 等属性。
访问组件 methods 中的自定义属性。
调用 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>

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

deriveDataFromProps

deriveDataFromProps 在组件创建和更新时都会触发。在deriveDataFromProps 中可以实现以下操作：

访问 this.is、this.$id、this.$page 等属性。
访问this.data、this.props 等属性。
访问组件 methods 中的自定义属性。
调用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

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);
      },
    });