Reactnative 带有 React Native 的 EventEmitter 和 Subscriber ES6 语法

发布于09月23日

我试图在react-native 类的两个组件之间实现EventEmitter/Subscriber关系.我看过以下material :

这些解决方案对于我试图实现的目标来说已经足够了，但是，它们需要在接收组件上使用mixins: [Subscribable.Mixin]才能与Subscriber正常工作.不幸的是，我正在使用ES6并从Component扩展我的类，所以我不能使用这种混合语法.

我的问题是:如果不使用mixin，如何在ES6中实现上述解决方案？

推荐答案

使用EventEmitter不需要mixin.

简单演示:

import EventEmitter from 'EventEmitter';

let x = new EventEmitter();

function handler(arg) {
    console.log(`event-name has occurred! here is the event data arg=${JSON.stringify(arg)}`);
}

x.addListener('event-name', handler);

x.emit('event-name', { es6rules: true, mixinsAreLame: true });

addListener的完整签名需要三个参数:

EventEmitter.addListener(eventName, handler, handlerContext)

在react组件中，您可能希望使用该上下文参数，以便处理程序可以是类方法而不是内联函数，并且仍然保留this == component instance.例如.:

componentDidMount() {
    someEmitter.addListener('awesome', this.handleAwesomeEvents, this);
    // the generalist suggests the alternative:
    someEmitter.addListener('awesome', this.handleAwesomeEvents.bind(this));
}

handleAwesomeEvents = (event) => {
    let awesomeness = event.awesomeRating;

    // if you don't provide context in didMount,
    // "this" will not refer to the component,
    // and this next line will throw
    this.setState({ awesomeness });
};

仅供参考:我之所以这么做，是因为我看到the infamous Subscribable mixin的实现毫无逻辑可言.谷歌的搜索结果基本上是拉姆齐基于mixin的单一演示的回声室.

另外，就将这个emits 器expose 给另一个组件而言，我可能会让拥有它的组件提供一个接收emits 器引用的函数，然后创建emits 器的组件将有条件地使用emits 器执行该props .

// owner's render method:
<ThingThatEmits
    onEmitterReady={(emitter) => this.thingEmitter = emitter}
/>

// inside ThingThatEmits:
componentDidMount() {
    this.emitter = new EventEmitter();

    if(typeof this.props.onEmitterReady === 'function') {
        this.props.onEmitterReady(this.emitter);
    }
}