上一篇講到Subject既是Observable，又是observer,它擁有2種特質(zhì)所有的方法，所以我們可以將其作為事件總線，手動(dòng)的分發(fā)事件和接收事件

例如

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后發(fā)出事件
  subject.next(10)
}, 2000)

subject.next(1) // 作為observer 發(fā)出事件
subject.next(2)
subject.next(3)

打印結(jié)果

"觀察者A 1"
"觀察者A 2"
"觀察者A 3"
"觀察者A 10"
"觀察者B 10"

比如在react中的應(yīng)用

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 分發(fā)事件
         { `${this.state.count}} Hello ${this.props.name}` }
      </div>
    )
  }
}

ReactDOM.render(<Counter name="james" />, rootDom);