其他分享
首页 > 其他分享> > RxJS

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