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

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

小程序組件作為頁面中的一種內部元素，具有自身的生命周期。組件的生命周期由組件實例上的函數鉤子控制，這些鉤子提供給開發者在組件不同的生命周期中添加自定義邏輯的機會。

小程序組件可以理解為“自定義標籤”，由組件的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
        })
      },
    })
  }
})

結語

小程序組件的生命周期在小程序開發中佔據了很重要的地位，非常值得開發者去了解、掌握。熟練掌握小程序組件的生命周期，可以幫助我們更好地構建組件化、易維護的小程序應用。