支付寶小程序框架 自定義組件·生命周期

組件的生命周期函數(shù)在特殊的時(shí)間點(diǎn)由框架觸發(fā)。組件生命周期示意圖如下：

生命周期函數(shù)具體信息見(jiàn)下表：

注意：onInit、deriveDataFromProps 自基礎(chǔ)庫(kù) 1.14.0 才支持，可以使用 my.canIUse('component2') 做兼容，并且，需要在開(kāi)發(fā)者工具中的 詳情 > 項(xiàng)目配置 中，勾選 component2。

onInit

onInit在組件創(chuàng)建時(shí)觸發(fā)。在onInit中，可以進(jìn)行以下操作：

• 訪問(wèn) this.is、this.$id、this.$page 等屬性
• 訪問(wèn) this.data、this.props 等屬性
• 訪問(wèn)組件 methods 中的自定義屬性
• 調(diào)用 this.setData、this.$spliceData 修改數(shù)據(jù)

示例一

// /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>

當(dāng)組件在頁(yè)面上渲染后，頁(yè)面輸出如下：

1
/components/index/index

示例二

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

當(dāng)組件在頁(yè)面上渲染后，頁(yè)面輸出如下：

0

deriveDataFromProps

deriveDataFromProps 在組件創(chuàng)建和更新時(shí)都會(huì)觸發(fā)。

在deriveDataFromProps 中可以：

• 訪問(wèn) this.is、this.$id、this.$page 等屬性
• 訪問(wèn)this.data、this.props 等屬性
• 訪問(wèn)組件 methods 中的自定義屬性
• 調(diào)用this.setData、this.$spliceData 修改數(shù)據(jù)
• 可以使用 nextProps 參數(shù)獲取將要更新的 props 參數(shù)

// /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>

注意：本示例中點(diǎn)擊 + 按鈕，頁(yè)面上的 counter 會(huì)一直保持不變，直到 pCounter 的值大于 5。

didMount

didMount 為自定義組件首次渲染完畢后的回調(diào)，此時(shí)頁(yè)面已經(jīng)渲染，通常在這時(shí)請(qǐng)求服務(wù)端數(shù)據(jù)。

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 為自定義組件數(shù)據(jù)更新后的回調(diào)，每次組件數(shù)據(jù)變更的時(shí)候都會(huì)調(diào)用。

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

注意：

• 組件內(nèi)部調(diào)用 this.setData 會(huì)觸發(fā) didUpdate。
• 外部調(diào)用者調(diào)用 this.setData 也會(huì)觸發(fā) didUpdate。

didUnmount

didUnmount 為自定義組件被卸載后的回調(diào)，每當(dāng)組件實(shí)例從頁(yè)面卸載的時(shí)候都會(huì)觸發(fā)此回調(diào)。

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