RXJS 在 React 中没有主题

Question

我正在慢慢学习 RXJS 并学习如何在 React 的上下文中使用它。

我发现的所有 Rxjs 教程都是从 observables 开始的。 这是有道理的。 当我尝试在反应中使用可观察对象时，它不起作用。 我必须创建一个主题并将值推送到主题中。

为什么会这样？ 为什么我不能在 React 中使用普通的旧 observables？ 难道我做错了什么？ 有人可以解释为什么 RXJS 在反应中需要使用主题。

我意识到这有点含糊，但我还不了解提出更好问题的概念。 这是一个例子来说明我正在努力理解的内容。

这是一个超级简单的组件，它在输入值中获取一个值并显示它。 常规反应，没有 RXJS。

const InputBox = () => {
  const [value, setValue] = React.useState('');
  return (
    <>
      <p>{value}</p>
      <input value={value} onChange={e => setValue(e.target.value)}></input>
    </>
  );
};

如果我想对 RXJS 做同样的事情，这行得通……

const inputStream$ = new Subject();

const InputBox = () => {
  const [value, setValue] = React.useState('');

  React.useEffect(() => {
    const subscription = inputStream$.subscribe(_value => setValue(_value));
    return () => subscription.unsubscribe();
  }, []);

  return (
    <>
      <p>{value}</p>
      <input
        value={value}
        onChange={e => inputStream$.next(e.target.value)}
      ></input>
    </>
  );
};

但是，如果我尝试使用常规的 observable，没有主题，那么它就行不通了。

const inputStream$ = new Observable();

const InputBox = () => {
  const [value, setValue] = React.useState('');

  React.useEffect(() => {
    const subscription = inputStream$.subscribe(_value => setValue(_value));
    return () => subscription.unsubscribe();
  }, []);

  return (
    <>
      <p>{value}</p>
      <input
        value={value}
        onChange={e => inputStream$.next(e.target.value)}
      ></input>
    </>
  );
};

Answer 1

下一个方法存在于观察者身上，而不是可观察者身上。 主体既是观察者又是可观察者，因此它有一个 next 方法。 如果你想使用一个普通的可观察对象，你需要将观察者传递给构造函数。 但是为什么不使用主题呢，这就是它们的用途。 主题也是多播的，因此不同的组件可以比普通的 observable 更有效地订阅相同的数据。

Answer 2

请参考这个答案。 您可以简单地使用Async组件并将其传递给您的 observables。

return (
    <Async select={[names$]}>
        {result => <div>{result}</div>}
    </Async>
);