Mobile Platform as a Service：生命週期

生命週期函數具體資訊見下表：

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