Taro v4框架开发微信小程序（页面生命周期）

每个Taro应用至少包含一个页面组件，页面组件不仅能通过Taro的路由系统实现页面间的跳转，而且能够访问并利用小程序页面的生命周期事件来处理业务逻辑。本文将重点关注几个关键的生命周期钩子函数------useLoad、useDidShow、useReady、useEffect、useUnload与useDidHide，以及它们在页面被打开和关闭时的调用顺序。

javascript 复制代码

import {useEffect} from 'react';
import {View} from '@tarojs/components'
import {useDidHide, useUnload, useDidShow, useLoad, useReady} from '@tarojs/taro'
import './index.scss'

export default function Index() {
  // 1. 页面加载完成时的回调。
  useLoad((options) => {
    console.log('useLoad')
  })
  // 2. 页面展示时的回调。
  useDidShow(() => {
    console.log('useDidShow')
  })
  // 3. 页面初次渲染完成的回调。 此时页面已经准备妥当，可以和视图层进行交互。
  useReady(() => {
    console.log('useReady')
  })
  // 4. 可以使用所有的 React Hooks
  useEffect(() => {
    console.log('useEffect')
  }, [])


  // 页面卸载时的回调。
  useUnload(() => {
    console.log('useUnload')
  })

  // 页面隐藏时的回调。
  useDidHide(() => {
    console.log('useDidHide')
  })

  return (
    <View className='index'>
      <View>
        
      </View>
    </View>
  )
}

运行代码可以看到生命周期钩子函数的执行顺序

useLoad ： useLoad 是一个在页面加载时触发的钩子函数，与小程序的 onLoad 生命周期对应。这个钩子通常用于读取页面参数和初始化数据。

useDidShow ： useDidShow 类似于小程序的 onShow 钩子。它在页面显示或切换到前台时被调用。可以用来刷新页面数据，或者执行一些如启动定时器的操作。

useReady ： useReady 对应于小程序的 onReady 生命周期函数。它表示页面已经准备好，DOM 结构已被创建。这个钩子适合进行一些渲染后的操作或者第三方库的初始化等。

useEffect ： useEffect 是一个来自 React 的钩子函数，不是特定于 Taro 的，但在 Taro 开发中会经常使用。它可以在组件渲染到屏幕之后执行某些副作用（side effects），如数据获取、订阅或手动更改 DOM。相较于上述 Taro 特有钩子，useEffect 更加通用，可以在组件加载、更新及卸载时执行清理或执行代码。

useUnload ： useUnload 对应于小程序的 onUnload 生命周期函数，它在页面卸载时触发。可以用于执行清理工作，比如清除定时器、取消网络请求等。

useDidHide ： useDidHide 对应于小程序的 onHide 生命周期函数，在页面隐藏或切换到后台时调用。可以利用这个钩子来暂停页面上一些不需要在后台运行的活动，比如视频播放。

接下来我们在终端中使用Taro CLI创建一个my页面

bash 复制代码

taro create my

在 index 页面中添加一个点击事件，从而触发页面跳转。关于页面跳转，在后面的章节中会详细介绍，这里只需要简单了解一下即可。

tsx 复制代码

// index页面
const onTextClick = () => {
    Taro.navigateTo({
      url: '/pages/my/index'
    })
}

<Text onClick={onTextClick}>点击我跳转到my页面</Text>

my 页面的基础结构，我们可以如下编写：

tsx 复制代码

// my页面
import { View, Text } from '@tarojs/components'
import { useLoad } from '@tarojs/taro'
import './index.scss'

export default function My() {

  useLoad(() => {
  })

  return (
    <View className='my'>
      <Text>辰火流光!</Text>
    </View>
  )
}

从index页面跳转到my页面之后再返回，我们会注意到index页面的 useDidShow 和 useDidHide 钩子被触发了。

如果我们将点击事件的跳转方式由 Taro.navigateTo 改为 Taro.redirectTo：

javascript 复制代码

const onTextClick = () => {
  Taro.redirectTo({
    url: '/pages/my/index'
  })
}

跳转之后，index页面的 useUnload 钩子被触发，这是因为 redirectTo 会卸载当前页面，并跳转到新的页面。

相对于 navigateTo，redirectTo 更适用于不需要返回当前页面的场景。

对于其它钩子函数，将会在后续文章中进一步讨论。