生命周期

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

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

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>

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

0

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>

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

didUnmount

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

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