• 下载
  • 社区

生命周期

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

lifecycle

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

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

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

onInit

onInit在组件创建时触发。在onInit中,可以进行以下操作:

  • 访问 this.isthis.$idthis.$page 等属性
  • 访问 this.datathis.props 等属性
  • 访问组件 methods 中的自定义属性
  • 调用 this.setDatathis.$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 中可以:

  • 访问 this.isthis.$idthis.$page 等属性
  • 访问this.datathis.props 等属性
  • 访问组件 methods 中的自定义属性
  • 调用this.setDatathis.$spliceData 修改数据
  • 可以使用 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);
  },
});

注意:

  • 组件内部调用 this.setData 会触发 didUpdate
  • 外部调用者调用 this.setData 也会触发 didUpdate

didUnmount

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

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