异步复杂度要到什么程度才需要用到Rxjs？

异步复杂度要到什么程度才需要用到Rxjs？

 

如题，虽然大家一直都说rxjs是解决异步的利器，但一直以来无法判断怎么样的程度的异步复杂度才需要用到rxjs（或者需要数据流合并大于不合并的优势的例子）……求举点实际的复杂的例子…实在找不到这样的临界点……

 

114 人赞同了该回答

基于 RxJS 构建稳健前端应用

11 万播放 · 142 赞同

 

To B 业务的生命周期与迭代通常会持续多年，随着产品的迭代与演进，以接口调用为核心的前后端关系会变得非常复杂。在多年迭代后，接口的任何一处修改都可能给产品带来难以预计的问题。在这种情况下，构建更稳健的前端应用，保证前端在长期迭代下的稳健与可拓展性就变得非常重要。

RxJS 可以作为整个前端的防腐层的构建方案，用于屏蔽底层接口对于前端业务层的影响。

编辑于 2021-12-25 21:28· 9.1 万次播放

​赞同 114​​11 条评论

​分享

​收藏​喜欢

​

 

更多回答

 

Starkwang

​

前端开发话题下的优秀答主

 

726 人赞同了该回答

比如你写一个基于 websocket 的在线聊天室，不可能每次 ws 收到新消息，都立刻渲染出来，这样在很多人同时说话的时候，一般会有渲染性能问题。

所以你需要收集一段时间的消息，然后把它们一起渲染出来，例如每一秒批量渲染一次。

用原生 JS 写的话，你需要维护一个队列池，和一个定时器，收到消息，先放进队列池，然后定时器负责把消息渲染出来，类似：

let messagePool = []
ws.on('message', (message) => {
    messagePool.push(message)
})

setInterval(() => {
    render(messagePool)
    messagePool = []
}, 1000)

这里已经是最简化的代码了，但逻辑依然很破碎，并且还要考虑清理定时器的问题。

如果用 RxJS，代码就好看了很多：

Rx.Observable
    .fromEvent(ws, 'message')
    .bufferTime(1000)
    .subscribe(messages => render(messages))

---

另外一个例子，比如我们在写一个游戏，当用户连续输入"上上下下左右左右BABA"的时候，就弹出隐藏的彩蛋，用原生 JS 的话也是需要维护一个队列，队列中放入最近12次用户的输入。然后每次按键的时候，都识别是否触发了彩蛋。

RxJS 的话就简化了很多，主要是少了维护队列的逻辑：

const code = [
   "ArrowUp",
   "ArrowUp",
   "ArrowDown",
   "ArrowDown",
   "ArrowLeft",
   "ArrowRight",
   "ArrowLeft",
   "ArrowRight",
   "KeyB",
   "KeyA",
   "KeyB",
   "KeyA"
]

Rx.Observable.fromEvent(document, 'keyup')
    .map(e => e.code)
    .bufferCount(12, 1)
    .subscribe(last12key => {
        if (_.isEqual(last12key, code)) {
            console.log('隐藏的彩蛋 \(^o^)/~')
        }
    })

当然 RxJS 还可以复杂得多的逻辑，比如要求只有在两秒内连续输入秘籍，才能触发彩蛋，这里该怎么写，留作思考题 （如果你能写出来，说明你已经熟练掌握 RxJS 了）