这是基于事件的简单组件实现。
import { EventEmitter } from 'events';
const appEvents = new EventEmitter();
appEvents.setMaxListeners(0);
export default class AppEvents {
static removeEvent(subscribe) {
subscribe.remove();
}
static registerLoginEvent(method) {
return appEvents.addListener('Login-Required-Event', method);
}
static emitLoginEvent(data) {
appEvents.emit('Login-Required-Event', data);
}
static removeLoginEvent(method) {
appEvents.removeListener('Login-Required-Event', method);
}
}
实施:
import React from 'react';
import AppEvents from './AppEvents';
import AppSwitchNavi from './Navigations';
export default class AppSwitchNaviWrapper extends React.Component {
componentDidMount() {
AppEvents.registerLoginEvent(this.loginEvent);
}
componentWillUnmount() {
AppEvents.removeLoginEvent(this.loginEvent);
}
loginEvent = () => {
// do something
};
render() {
return <AppSwitchNavi />;
}
}
从某种情况发出事件为AppEvents.emitLoginEvent(UserData);
但是 IMO 你应该在这种情况下处理 redux,从长远来看,Redux 会帮助你。基于事件的实现会给您带来问题,您必须非常小心地执行和删除事件以防止内存泄漏和应用程序的意外行为。