Rx.js fromEvent + flatMapLatest坏了吗？

Question

嗯，问题本身很难简单地描述，所以这里有一个生动的例子来演示。 似乎我对Rx.js的工作方式有误解，否则这里的功能来自一个错误。

我试图做的是一个简单的反应式渲染设置，您在屏幕上看到的内容以及发生的事件均以Observables来描述。 问题在于，由于某种无法理解的原因，以一种方式编写代码时，事件将被完全丢弃，但在理论上应该等效的代码下仍能正常工作。

因此，让我们从上面的示例代码中的第一种情况开始：

var dom = makeBox('one');
var clicks = Rx.Observable.fromEvent(dom, 'click');

如果创建DOM片段，则可以简单地使用fromEvent来获取其发出的任何事件的Observable。 到现在为止还挺好。 您可以单击此框，然后看到写到日志中的许多行。

现在，下一步将是使DOM具有反应性，以表达其随时间的变化。

var domStream = Rx.Observable.return(makeBox('two'));
var clicks = domStream.flatMapLatest(function(dom) {
  return Rx.Observable.fromEvent(dom, 'click');
});

这将使其成为可观察的对象，并在此处使用return来产生最简单，恒定的情况。 您感兴趣的事件将是最新版本的dom发出的事件，而这正是flatMapLatest运算符的工作。 此变体仍然有效。

最终，目标是基于某个应用程序状态生成当前DOM状态。 也就是说，将其从一个Observable映射到另一个。 现在让我们使用最简单的版本，将一个常量值作为状态，然后将其映射到我们之前使用的相同固定输出：

var updates = Rx.Observable.return(1);
var domStream = updates.map(function (update) {
  return makeBox('three');
});
var clicks = domStream.flatMapLatest(function(dom) {
  return Rx.Observable.fromEvent(dom, 'click');
});

这与以前的版本没有什么不同。 但是，无论您做什么，都不会输出任何事件。

这到底是怎么回事？ 我是否误解了Rx的一些基本概念，还是什么？ 我已经遇到了热的和冷的Observable的一些问题，但是在这种最小的情况下，这似乎无关紧要。 所以，我有点想法不对。 谁能启发我？

Answer 1

不好意思告诉您，但这是一个Hot vs Cold问题。

这是一个微妙的问题，但两者之间的区别

Rx.Observable.return(makeBox('two'))

和

Rx.Observable.return(1).map(function() {return makeBox('three'); })

是第一个在您每次订阅它时返回一个常量，即您最初创建的一个框。 每次订阅Observable时，第二个都会返回一个新框，这会导致问题，因为您实际上两次订阅了domStream变量，正在创建Box 3的两个实例，一个实例具有事件处理程序，但未显示，而另一个没有，并显示。

解决方法是，你要么需要使用方法2 或需要第三转换成热气流或者通过使用：

domStream.replay(1).refCount()

或使用

domStream.publish()

然后在完成所有订阅后：

domStream.connect()