文档中心 > 店铺动态卡片-开发指引

店铺动态卡片-开发指引

生命周期

更新时间：2023/02/06 访问次数：19072

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


image.png


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


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


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


一、onInit


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


1）访问 this.is、this.$id、this.$page 等属性；

2）访问 this.data、this.props 等属性；

3）访问组件 methods 中的自定义属性；

4）调用 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 中可以:


1）访问 this.is、this.$id、this.$page 等属性；

2）访问this.data、this.props 等属性；

3）访问组件 methods 中的自定义属性；

4）调用this.setData、this.$spliceData 修改数据；

5）可以使用 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);
  },
});


注意：

1）组件内部调用 this.setData 会触发 didUpdate；

2）外部调用者调用 this.setData 也会触发 didUpdate。


五、didUnmount


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


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


FAQ

关于此文档暂时还没有FAQ
有用(0) 我要提问
返回
顶部
阿里巴巴集团 | 淘宝网 | 天猫 | 聚划算 | 全球速卖通 | 阿里巴巴国际交易市场 | 1688 | 阿里妈妈 | 阿里旅行·去啊 | 阿里云计算 | YunOS | 阿里通信 | 万网 | 高德 | 优视 | 友盟 | 酷盘 | 虾米 | 天天动听 | 来往 | 钉钉 | 11Main | 支付宝
关于淘宝 合作伙伴 营销中心 联系客服 开放平台 诚征英才 联系我们 网站地图 法律声明 © 2016 Taobao.com 版权所有
网络文化经营许可证：文网文[2010]040号 | 增值电信业务经营许可证：浙B2-20080224-1 | 信息网络传播视听节目许可证：1109364号