父组件和子组件的componentDidShow钩子只会执行一个

[hellosanbao]

相关平台

微信小程序

小程序基础库: 2.12.2
使用框架: React

复现步骤

import React,{Component} from 'react'
import { View } from '@tarojs/components'
class Test extends Component<any,any>{
  componentDidShow(){
    console.log('Test:11111111')
  }
  render(){
    return (
      <View>
        {this.props.children}
      </View>
    )
  }
}

// @BtPage
class List extends Component<ComponentExtendsProps> {
  state:any = {
    msg:111
  }
  componentDidShow(){
    console.log('List:0000000')
  }
  render(){
    return (
      <Test>
        <View>
          <View>{this.state.msg}</View>
        </View>
      </Test>
    )
  }
}
export default List

期望结果

两个都执行

实际结果

只有子组件的componentDidShow执行了

环境信息

👽 Taro v3.0.5


  Taro CLI 3.0.5 environment info:
    System:
      OS: macOS 10.15.4
      Shell: 5.7.1 - /bin/zsh
    Binaries:
      Node: 14.2.0 - /usr/local/bin/node
      Yarn: 1.22.4 - /usr/local/bin/yarn
      npm: 6.14.4 - /usr/local/bin/npm
    npmPackages:
      @tarojs/components: 3.0.5 => 3.0.5 
      @tarojs/mini-runner: 3.0.5 => 3.0.5 
      @tarojs/react: 3.0.5 => 3.0.5 
      @tarojs/runtime: 3.0.5 => 3.0.5 
      @tarojs/taro: 3.0.5 => 3.0.5 
      @tarojs/webpack-runner: 3.0.5 => 3.0.5 
      babel-preset-taro: 3.0.5 => 3.0.5 
      eslint-config-taro: 3.0.5 => 3.0.5 
      react: ^16.10.0 => 16.13.1 

[wuchangming]

应该是只有父组建执行吧？
只执行一个感觉是正常的，因为componentDidShow是针对小程序page级别的生命周期。组件级别好像没办法定义这样的生命周期

[hellosanbao]

应该是只有父组建执行吧？
只执行一个感觉是正常的，因为componentDidShow是针对小程序page级别的生命周期。组件级别好像没办法定义这样的生命周期

如果需要在组件里面监听页面的onshow方法怎么办呢？如何实现小程序自定义组件的pageLifetimes.show方法呢

[fuersite]

遇到类似问题，我只有父组件执行了， 子组件未执行

[Chen-jj]

子组件监听页面 onShow/onHide 需要使用事件实现：https://taro-docs.jd.com/taro/docs/next/react#%E5%AD%90%E7%BB%84%E4%BB%B6%E7%9A%84-onshow