反向继承和mobx装饰器配合时在h5端生命周期问题

[ben-lau]

问题描述
使用反向继承装饰器和mobx的装饰器配合时，observer应该是最深处的装饰器，当我的装饰器放在最深处时，super.onMyLoaded能找到，放在inject外的话在h5端就找不到了

const HBBPage = (_Component: typeof HBBPageComponent) => {
  return class _C extends _Component {
    async componentWillMount() {
      console.log(super.onMyLoaded) // 这里在h5端有问题
      console.log('wrapper_will_mount');
      super.componentWillMount && super.componentWillMount();
      await utils.wait(0);
      super.onMyLoaded&& super.onMyLoaded();
    }
  };
};


// Index
@HBBPage  // （二选一） 放这里就拿不到super.onMyLoaded
@inject('main')
@observer
@HBBPage  // （二选一）放这里就能调用super.onMyLoaded
class Index extends Component<IProps> {
  config: Config = {
    navigationBarTitleText: '首页'
  };

  onMyLoaded() {
    console.log('loaded done');
  }

  componentWillMount() {
    console.log('will_mount');
  }

  componentDidMount() {
    console.log('did_mount');
  }

  componentWillReact() {
    console.log('componentWillReact');
  }

  componentWillUnmount() {
    console.log('componentWillUnmount');
  }

  componentDidShow() {
    console.log('did_show');
  }

  componentDidHide() {
    console.log('componentDidHide');
  }

  render() {
    console.log('render');
    console.log(this.props)
    const {
      main: { params }
    } = this.props;
    return (
      <View
        className="index"
        onClick={() => router.redirect({ url: '/pages/index/index' })}
      >
        <Text>{JSON.stringify(params)}</Text>
        <EmptyList></EmptyList>
      </View>
    );
  }
}

期望行为
inject不应该丢失我的方法

系统信息
操作系统: Windows10
Taro 版本 1.3.22
Node.js 版本 10.15.3
报错平台 H5

[taro-bot]

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

[ben-lau]

@nanjingboy
还有个问题就是我在hoc里一个promise后setState 触发被包裹组件的自定义回调 回调中无法获取更新后的state 打印了一下生命周期顺序 render必定在onHbbLoaded之后才执行
加入util.wait后就成功 打印生命周期是onHbbLoaded在render后执行
（wait是setTimeout的Promisify封装）

[nanjingboy]

@ben-lau OK，今天抽空看下

[nanjingboy]

h5 的 inject 实现类似：

import { Component } from '@tarojs/taro-h5'

class Injector extends Component {
  //...
}

从上面的代码可以看出，Injector 并不是继承被包裹的组件，而是使用 @tarojs/taro-h5 中的组件，关于你的问题我个人赞同这里的讨论：reduxjs/react-redux#270，因此建议根据该 issue 的讨论调整你的写法。

[taro-bot]

Hello~

您的问题楼上已经有了确切的回答，如果没有更多的问题这个 issue 将在 15 天后被自动关闭。

如果您在这 15 天中更新更多信息自动关闭的流程会自动取消，如有其他问题也可以发起新的 Issue。

Good luck and happy coding~