RxJS

最近在研究RxJS的编程思想，与OOP不同，RxJS更像是事件驱动+观察者模式，前一篇文章有所介绍。有经验的读者想必会有个疑问：Observable与Promise模式，或者说OOP到底区别在哪里，能带来什么不同呢？
我的理解是(此处为个人理解)：Observable更好地实现了解耦。如同我们用消息队列在不同系统间传递信息一样，Observable在不同函数、模块间传递消息，并且消息的发布者(Producer)不需要知道消息的消费者(Consumer)是谁。

举个代码示例，以往用JQuery实现Click，我们通常会这么写(伪代码，看个意思)

$("#btnFoo").on("click", ()=>{
  fun01();
  fun02();
})

很明显这段代码是紧耦合的，消息的发布者btnFoo.click必须知道fun01、fun02的存在。利用RxJS则可以解决这个紧耦合的问题。
以下代码示例通过Subject(继承自Observable)实现消息的发布者与消费者的解耦。 执行：create-react-app [项目名称]，打开app.js，贴入以下代码：

import { useEffect, useState, useRef } from 'react';
import { fromEvent, interval, Subject } from 'rxjs';
import { scan, debounce } from 'rxjs/operators';

let seed = 0;
let subjectFoo = new Subject(seed);

function Producer() {
  useEffect(()=>{
    console.log('useEffect');
  }, []);

  onclick = (e) => {
    console.log('onclick');
    subjectFoo.next(seed++);
    e.stopPropagation();
  }
  return(
    <input type="button" id="divProducer" onClick={onclick} value="Produce"></input>
  )
}

function Consumer1() {
  const refData = useRef();

  useEffect(()=>{
    subjectFoo.subscribe(data=>{
      console.log(`Consumer1 receives: ${data}`);
      refData.current.innerHTML = data;
      //setFoo(data);
    });
  }, []);

  return(
    <div>Consumer1: <span ref={refData} /></div>
  )
}

function Consumer2() {
  const refData2 = useRef();

  useEffect(()=>{
    subjectFoo.subscribe(data=>{
      // console.log(`Consumer2 receives: ${data}`);
       refData2.current.innerHTML = data;
      //setFoo(data);
    });
  }, []);

  return(
    <div>Consumer2: <span ref={refData2} /></div>
  )
}

function App() {
  return (
    <div className="App">
      {
        Producer()

      }
      <hr />
      {
        Consumer1()
      }
      {
        Consumer2()
      }    
    </div>
  );
}

export default App;

上述代码有三个模块(函数)，1个producer与2个consumer，producer并不知道consumer的存在，通讯完全依靠Subject完成。