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" 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完成。

RxJS

原文：https://www.cnblogs.com/Andy1982/p/15269515.html