React Native 多继承(mix-in)实现

1). 创建登录监听

/**
 * 登录成功
 * @param SuperComponent 父类
 */
const LoginInSuccess = SuperComponent => class extends SuperComponent {
  /**
   * 登录成功监听
   */
  _loginInSuccessListener = null;

  componentWillMount(): void {
    super.componentWillMount && super.componentWillMount();
    this._loginInSuccessListener = RCTDeviceEventEmitter.addListener('DIDLOGINSUCCESS', (msg) => {
      if ('LOGIN_STR' === msg) {
        // 登录成功
        this.onLoginIn && this.onLoginIn();
      } else if ('GET_APP_USER' === msg) {
        // 获取账户信息
        this.onGetAppUser && this.onGetAppUser();
      }
    });
  }

  componentWillUnmount(): void {
    super.componentWillUnmount && super.componentWillUnmount();
    this._loginInSuccessListener && this._loginInSuccessListener.remove();
    this._loginInSuccessListener = null;
  }
};

其中第一个SuperComponent作为参数传递，第二个class extends SuperComponent作为父类继承，类中实现的componentWillMount()和componentWillUnmount()方法为 React Native 中的 Component 中的方法，因此此处不一定非要写这两个方法。_loginInSuccessListener为私有变量，是我们想要设置的监听对象。

2). componentWillMount()方法介绍

该方法第一行判断super.componentWillMount是否实现了该方法，如果实现了则调用该方法，即调用父类方法。RCTDeviceEventEmitter.addListener即为添加监听，第一个参数为添加监听的名字，第二个参数为监听到该事件后所要执行的方法，方法中的参数用于检测具体想要执行的动作。

3). componentWillUnmount()方法介绍

在该方法中判断是否有父类实现该方法，有则调用，接下来判断监听对象是否为空，如果为空则不移除监听，反之移除。最后将设置的监听设置为空。

4). 发送事件

/**
 * 发送登录成功事件--登录成功
 */
const sendLoginInStr = () => {
  RCTDeviceEventEmitter.emit('DIDLOGINSUCCESS','LOGIN_STR');
};

5). 使用

@ListenerComponent.LoginOutSuccess // 该实现未给出，此处意为多继承，即 mix in
@ListenerComponent.LoginInSuccess
@observer
export default class Login extends Component {
    // LoginInSuccess 中的监听方法，如果需要则实现，反之可不实现
    onLoginIn = () => {}
}

使用.png

6). 优势

多个Component或类具有相同的功能时，例如设置监听等方法，将其抽取，每次调用时只用在类名上使用@xxx 即可。