深入理解小程序组件的生命周期

一、小程序组件的生命周期概述

小程序组件作为页面中的一种内部元素，具有自身的生命周期。组件的生命周期由组件实例上的函数钩子控制，这些钩子提供给开发者在组件不同的生命周期中添加自定义逻辑的机会。

小程序组件可以理解为“自定义标签”，由组件的WXML、样式WXSS和逻辑JS三个文件组成。组件是由组件构造器构造出来的实例。组件构造器是使用Component()函数创建的。

小程序组件的生命周期包括创建、挂载、更新和卸载等阶段。在不同阶段，组件会触发不同的函数钩子，开发者可以在这些钩子中编写自己的代码，以达到想要的效果。

二、小程序组件的生命周期函数

1.创建阶段

小程序组件的创建阶段包括组件实例的创建和属性的初始化。组件的创建阶段包含以下生命周期函数:

1.1. created() 组件实例刚刚被创建时触发，此时组件数据绑定等不能使用，在这个周期内，我们可以给组件添加一些属性、数据等。

Component({
  created() {
    // 组件实例创建完成后
    this.setData({
      message: 'Hello World'
    })
  }
})

1.2. attached() 组件实例进入页面节点树时触发，即将插入页面时。此时可以获取父组件实例对象、节点信息等。

Component({
  attached() {
    console.log('component attached ')
  }
})

1.3. ready() 组件视图层已经构建完毕，可以获取节点信息和宽高信息等。在这个阶段，可以开发一些使用组件去获取父页面里的节点等操作。

Component({
  ready() {
    console.log('component ready')
  }
})

2.更新阶段

小程序组件的更新阶段主要是借助属性和数据的变化来触发的，触发更新会引发生命周期函数执行，此时可以调用组件的一个或多个的属性或方法进行更新，从而使得组件重新渲染。

2.1. moved() 组件节点从原位置移动到新的位置时触发。此时可以获取到移动的方向和移动的位置等信息。

Component({
  moved() {
    console.log('component moved')
  }
})

2.2. detached() 组件从页面节点树中被移除时触发。在此阶段，可以完成一些清理工作。

Component({
  detached() {
    console.log('component detached')
  }
})

三、小程序组件生命周期实例演示

下面是一个简单的小程序组件生命周期实例，以一个目录列表组件为例，演示组件生命周期函数的使用方法。

目录列表组件示例

根据需要添加wxml、js、wxss文件即可。

<!-- 目录列表组件.wxml -->
<view class="directory-list">
  <view class="directory-list__item" wx:for="{{list}}" wx:key="index" bindtap="handleTap">
    {{item.name}}
  </view>
</view>

<!-- 目录列表组件.wxss -->
.directory-list {
  background-color: #fff;
}

.directory-list__item {
  padding: 16px;
  border-bottom: 1px solid #eee;
}
.directory-list__item:last-child {
  border-bottom: none;
}

<!-- 目录列表组件.js -->
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    // 接收传递的list数据
    list: {
      type: Array,
      value: []
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    message: ''
  },

  /**
   * 组件的方法列表
   */
  methods: {
    handleTap(e) {
      this.triggerEvent('onTap', e.currentTarget.dataset.index)
    },

    /**
     * 组件实例刚刚被创建时触发
     */
    created() {
      console.log('component created')
    },

    /**
     * 组件实例进入页面节点树时触发，即将插入页面时
     */
    attached() {
      console.log('component attached')
    },

    /**
     * 组件视图层已经构建完毕，可以获取节点信息和宽高信息等
     */
    ready() {
      console.log('component ready')
    },

    /**
     * 组件实例从页面中移除时触发
     */
    detached() {
      console.log('component detached')
    }
  }
})

使用目录列表组件

在页面中引用目录列表组件，并给组件传递数据。在组件的生命周期函数中添加自定义代码。

<!-- canvas.wxml -->
<navigator class="page-navigation" url="../index/index"></navigator>

<view class="canvas">
  <!-- 引用目录列表组件 -->
  <directory-list 
    class="directory-list" 
    list="{{catalogList}}" 
    onTap="handleTap"
  />
  <canvas class="canvas-chart" type="2d" id="myCanvas" canvas-id="myCanvas" bindtouchstart="bindingtap" />
</view>

<!-- canvas.wxss -->
.canvas-chart {
  height: 240px;
  width: 100%;
  background-color: #f5f5f5;
}

.directory-list {
  margin-top: 10px;
}

<!-- canvas.js -->
const app = getApp()

Page({
  data: {
    canvasWidth: 0,
    canvasHeight: 0,
    catalogList: [
      { id: '1', name: '绘制矩形' },
      { id: '2', name: '绘制圆形' },
      { id: '3', name: '绘制文本' }
    ]
  },

  onLoad() {
    this.setCanvasSize()
  },

  handleTap: function (event) {
    // 预留回调事件 - 点击事件
  },

  bindingtap() {
    // 预留回调事件 - 滑动事件
  },

  setCanvasSize: function () {
    const that = this
    wx.getSystemInfo({
      success: function (res) {
        that.setData({
          canvasWidth: res.windowWidth,
          canvasHeight: res.windowHeight - 80
        })
      },
    })
  }
})

结语

小程序组件的生命周期在小程序开发中占据了很重要的地位，非常值得开发者去了解、掌握。熟练掌握小程序组件的生命周期，可以帮助我们更好地构建组件化、易维护的小程序应用。