Taro 中使用 useDidShow 在 H5 和小程序表现不一致怎么办？

Taro 在 H5 和小程序的生命周期确实存在差异，useDidShow 只在小程序端生效。为了解决这个问题，可以优化成用 useEffect 来统一处理。

首先把 useDidShow 的逻辑移到 useEffect 里，并通过 Taro.getCurrentPages() 来判断页面是否显示。这样就能同时兼容 H5 和小程序环境了。

import { useEffect } from 'react'

import Taro from '@tarojs/taro'



function usePageVisible(callback) {

  useEffect(() => {

    let page = Taro.getCurrentPages().pop()

    if (page && page.route === window.location.pathname.replace(/^//, '')) {

      callback()

    }



    const onPageShow = () => callback()

    Taro.eventCenter.on('AppShow', onPageShow)

    return () => Taro.eventCenter.off('AppShow', onPageShow)

  }, [])

}



export default function MyPage() {

  usePageVisible(() => {

    console.log('页面显示')

    fetchData()

  })



  return 内容

}

这个方案虽然比原生 useDidShow 稍微复杂一点，但胜在能在一个函数里搞定多端支持，不用分开写逻辑。说实话，Taro 的这些小坑确实挺烦人，不过想办法绕过去后还是挺有成就感的。

这个问题确实挺烦的，Taro 的生命周期在不同端表现不一致。可以用个简单的判断来解决，代码给你：

import { useEffect, useRef } from 'react'

import { useDidShow } from '@tarojs/taro'



export default function MyPage() {

  const didShowCalled = useRef(false)



  useDidShow(() => {

    if (!didShowCalled.current) {

      didShowCalled.current = true

      handlePageShow()

    }

  })



  useEffect(() => {

    if (process.env.TARO_ENV === 'h5') {

      handlePageShow()

    }

  }, [])



  const handlePageShow = () => {

    console.log('页面显示')

    fetchData()

  }



  return <View>内容</View>

}

这样无论是在 H5 还是小程序，页面显示的时候都会调用 fetchData。