<分区>
我最近开始学习 React，很快就遇到了一个充满功能和状态的臃肿父组件的问题。起初我看了 Flux，然后又看了 Redux，但这两个解决方案看起来都很霸道。
我想知道为什么没有完成这样的事情:
//EventPropagator.js
let EventPropagator = {
registerListener(listenerObject){
if (this.listeners == null)
this.listeners = []
this.listeners.push(listenerObject)
},
fireEvent(eventObject){
let listenerList = this.listeners.filter(function(listener){
return listener.eventType === eventObject.eventType
})
listenerList.forEach((listener) => {
listener.callback(eventObject.payload)
})
}
}
export default EventPropagator
使用组件只需registerListener和fireEvent:
//main.js
import EventPropagator from './events/EventPropagator'
EventPropagator.registerListener({
"eventType": "carry_coconut",
"callback": (payload) => {
// actually carry coconut
this.setState({"swallow_type": payload.swallow})
console.log(payload)
}
})
EventPropagator.fireEvent({
"eventType": "carry_coconut",
"payload": { "swallow": "african" }
})
这将允许大量解耦，并且可以通过此类事件轻松传递状态。这种方法有什么缺点？