likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 40

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

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>
  )
}

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

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

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页面

taro create my

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

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

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

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

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

// 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 v4框架开发微信小程序（页面生命周期）

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

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

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

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

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

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

转载自:https://juejin.cn/post/7345071716680859648
评论
请登录