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完成。
标签:Observable,return,subjectFoo,RxJS,console,useEffect,data 来源: https://www.cnblogs.com/Andy1982/p/15269515.html