多次订阅同一个 Observable

Question

我在我的应用程序的一个组件中有多个订阅，我可以看到有几个实例我们重复订阅相同的 observable。

我最近遇到的一个问题是在一个订阅逻辑中为一个控件设置值与另一个发生冲突，并且两个订阅都在同一个 observable 上。我们已经通过添加更具体的条件来避免冲突来解决这个问题，但这让我想知道重复订阅相同的可观察组合真的是一个好习惯（我假设我们可以在单个订阅者中编写所有逻辑）？从长远来看，它会随着 App 的增长而导致任何性能问题吗？

    combinelatest(observable1, observable2).pipe(
    tap(() = > {
    // do some logic
    // update Property1 to foo
    })
    ).subscribe();

    combinelatest(observable1, observable2).pipe(
    tap(() = > {
    // do some logic
    })
    ).subscribe();

    combinelatest(observable1, observable2, observable3).pipe(
    tap(() = > {
    // do some logic
    // // update Property1 to foofoo
    })
    ).subscribe();

observable1.pipe(
    tap(() = > {
    // do some logic
    })
    ).subscribe()

非常感谢任何指导。

Answer 1

在一个可观察的共享上多次订阅并没有错。然而话虽如此，通常可观察对象可以被拆分为可重用的意义，并且对于每个可观察对象的粒度没有固定规则，应定义每个可观察对象以适合您的应用程序需求

例如，如果您希望多个组件监听该事件，我们有一个获取博客文章按钮，您可以这样做

const onGetPostClick=fromEvent(button,'click')

然后你想执行 get post http 调用并允许其他组件监听此类事件。

const onGetPost=onGetPostClick.pipe(mergeMap(e=>fetch()....),share())

如果您只对新闻类别的帖子感兴趣

const onGetNews=onGetPost.pipe(filter(post=>post.cat==='news'))

赋予每个 observable 意义，你会发现你的代码更加 DRY 和最小化

Answer 2

多次订阅一个 observable 是一种很好的做法。但是您必须记住取消订阅您所做的订阅。当您多次订阅一个 observable 而没有取消订阅您所做的订阅时，可能会导致内存泄漏。

Answer 3

combinelatest(observable1, observable2).pipe(
  tap(() = > {
  // do some logic
  // update Property1 to foo
  })
).subscribe();

这会改变流经流的数据。这是不好的做法，您不应该改变任何通过流的数据。您应该创建新对象而不是改变对象。正确的方法是使用 map 并返回一个对象的新实例，而不要理会原始实例。

combinelatest(observable1$, observable2$).pipe(
  map(([data1, data2]) = > {
    return [data1, { ...data2, prop1: 'foo' }];
  })
).subscribe();

在现代 JavaScript 应用程序中，我们不会改变对象，因为它会导致不可预测的副作用。

多个观察者订阅相同的可观察对象并没有错，但不应该改变流经它们的任何对象。