上一篇讲到Subject既是Observable，又是observer,它拥有2种特质所有的方法，所以我们可以将其作为事件总线，手动的分发事件和接收事件
例如
var subject = new Rx.Subject()
var observerA = {
next: function(x) { console.log('观察者A ' + x);},
error: function(err) { console.log(err); },
complete: function() { console.log('A完成'); }
}
subject.subscribe(observerA) // 作为observable 被其它observer订阅
var observerB = {
next: function(x) { console.log('观察者B ' + x);},
error: function(err) { console.log(err); },
complete: function() { console.log('B完成'); }
}
setTimeout(() => {
subject.subscribe(observerB) // 作为observable 被其它observer订阅
}, 2000)
setTimeout(() => { // 2s后发出事件
subject.next(10)
}, 2000)
subject.next(1) // 作为observer 发出事件
subject.next(2)
subject.next(3)
打印结果
"观察者A 1"
"观察者A 2"
"观察者A 3"
"观察者A 10"
"观察者B 10"
比如在react中的应用
class Counter extends React.Component {
state = {
count: 0
}
subject = new Rx.Subject()
subject.map(et => +1) // 拥有observable所有的方法
.scan((acc, x) => acc + x)
.delay(1000)
.subscribe(v => {
this.setState({
count: v
})
})
render() {
return (
<div onClick={ev => this.subject.next(ev)}> // 作为observer 分发事件
{ `${this.state.count}} Hello ${this.props.name}` }
</div>
)
}
}
ReactDOM.render(<Counter name="james" />, rootDom);
