javascript - RxJS 和 React 的 setState - 延迟函数执行直到订阅

Question

RxJS 有一个很棒的功能，fromCallback它接受一个函数，该函数的最后一个参数是回调并返回一个 Observable。我想将其与 React 的 setState 函数结合起来，这样我就可以做类似的事情:

const setState = Rx.Observable.fromCallback(this.setState);
setState({ myState: 'Hi there!' }).concat(....)

这样，任何链接到 setState 的操作都保证在状态设置后发生，最重要的是，在有事件订阅者之前不会调用 setState。

但我注意到，即使没有订阅，setState 也会在定义时被正确调用并设置组件的状态。所以如果我有:

networkSignal.flatMap((x) => {
    return setState({ myState: 'test' });
});

函数setState会立即被调用，但它的生产者的观察者不会发送下一个，直到有订阅者为止。我想要的是该函数仅在有订阅者时调用。

查看源代码，您可以看到 RxJS 返回一个函数，该函数在执行时创建一个可观察对象，但立即调用该函数 - 回调参数。

Answer 1

fromCallback 返回一个函数，该函数在执行时返回一个可观察值。该可观察对象是函数调用的异步结果将流动的地方。

要延迟函数的执行，可以使用.defer。例如:

const setState = Rx.Observable.fromCallback(this.setState);
const deferred$ = Rx.Observable.defer(function (){return setState({ myState: 'Hi there!' }).concat(....)});
// Later on
deferred$.subscribe(...)

问题的答案使用了相同的技术被问到here和 here