javascript - React 中的 RXJS 没有主题

Question

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

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

为什么会出现这样的情况呢？为什么我不能在 React 中使用普通的旧 observables？难道我做错了什么？有人可以解释一下为什么 React 中的 RXJS 需要使用主题吗？

我意识到这有点模糊，但我还不明白提出更好问题的概念。这是一个例子来说明我难以理解的内容。

这是一个 super 简单的组件，它获取输入值中的值并显示它。常规 react ，无 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>
    </>
  );
};

但是如果我尝试使用常规的可观察对象，没有主题，那么它就不起作用。

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 方法。如果你想使用普通的可观察者，你需要将观察者传递到构造函数中。但为什么不使用主题，这就是它们的用途。主题也是多播的，因此不同的组件可以比普通的可观察对象更有效地订阅相同的数据。