自定义组件--纯数据字段＆组件的生命周期

1.1 概念：纯数据字段指的是那些不用于界面渲染的data字段

应用场景：在有些情况下，某些data中的字段既不会展示在界面上，也不会传递给其他组件，仅仅在当前组件内部使用，带有这种特性的data字段适合被设置为纯数据字段

 好处：纯数据字段有助于提升页面更新的性能（不懂怎样提升页面的更新性能）

1.2 使用规则

在构造器的options节点中，指定pureDataPattern为一个正则表达式，字段名符合这个正则表达的字段成为纯数据字段

Component（{
    options：{
//指定所有_开头的数据字段为纯数据字段
        pureDataPattern：/^_/
    }，
    data：{
    a：true//普通数据字段
    _b:true//纯数据字段
    }
}）

 2.1组件全部可用的生命周期函数

生命周期函数	参数	描述说明
created	无	在组件实例刚刚被创建时执行
attached	无	在组件实例进入页面节点树时执行（还未渲染）
ready	无	在组件在视图层布局完成后执行
moved	无	在组件实例被移动到节点树另一个位置时执行
detached	无	在组件实例被从页面节点树移除时执行
error	Object Error	每当组件方法抛出错误时执行

 2.2lifetimes节点

在小程序组件中，生命周期函数可以直接定义在Component构造器的第一级参数中，可以在lifetimes字段声明（推荐，其优先级最高）

 2.3组件所在页面的生命周期

有时，自定义组件的行为依赖于页面状态的变化，此时就需要用到组件所在页面的生命周期

生命周期函数	参数	描述
show	无	组件所在的页面被展示时执行
hide	无	组件所在的页面被隐藏时执行
resize	Object Size	组件所在的页面尺寸变化时执行

2.4pageLifetimes节点

组件所在页面的生命周期，需要定义在pageLifetimes节点中

Component（{
    pageLifetimes：{
        show:(){}
        hide:(){}
        resize:(){}
    }
}）

2.5案例

展示页面时，随机生成RGB颜色值

 

//组件js 
methods：{
     _randomColor(){
            this.setData({
                _rgb:{
                    r:Math.floor(Math.random()*256),//Math.floor()向下取整，即像马太效应里的小的让它更小
                    g:Math.floor(Math.random()*256),
                    b:Math.floor(Math.random()*256)
                }
            })
        }
}

  pageLifetimes:{
        show:function(){
            this._randomColor()
        }
    }

Math.floor()函数可参考：http://t.csdn.cn/kole7