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>
);