rxjs为什么用next（）触发管道时行为会受到影响答案

【问题标题】：rxjs why does behaviour subject when piped triggered with next()rxjs为什么用next（）触发管道时行为会受到影响
【发布时间】：2021-09-13 07:41:24
【问题描述】：

我已经从这个链接https://magarcia.io/2019/02/18/bloc-pattern-with-react-hooks阅读了教程我只是不明白当使用新的搜索词调用 _query.next 时如何触发对 API 的搜索查询

见下面的代码。

export class SearchBloc {
  private _results$: Observable<string[]>;
  private _query$ = new BehaviorSubject<string>('');

  constructor(private api: API) {
    **this._results$ = this._query$.pipe(
      switchMap((query) => {
        return observableFrom(this.api.search(query));
      })
    );**
  get results$(): Observable<string[]> {
    return this._results$;
  }
}

const SearchInput = () => {
  const searchBloc = useContext(SearchContext);
  const [query, setQuery] = useState('');

  useEffect(() => {
    searchBloc.query.next(query);
  }, [searchBloc, query]);

  return (
    <input
      type="text"
      name="Search"
      value={query}
      onChange={({ target }) => setQuery(target.value)}
    />
  );
};

假设 searchblock 被放置在上下文中，并且在输入更改期间，作为行为主题的查询被赋予一个新值 next(); api 查询如何或为什么执行？我想我不明白

this._results$ = this._query$.pipe( switchMap((查询) => {

所以也许问题是，管道是如何工作的？它是否创建了一个将在调用 next 时执行的方法回调？结果赋值是什么意思？

任何能帮助我理解它的人都非常感激。

【问题讨论】：

标签： rxjs

【解决方案1】：

考虑以下代码：

它创建一个由 5 个数字组成的流。然后它创建第二个流，该流被定义为与第一个具有所有相同数字的流，只是每个数字都递增。

const numberStream$ = of(1,2,3,4,5);

const numbersPlus1$ = numberStream$.pipe(
  map(v => v + 1)
);

numbersPlus1$.subscribe(console.log);

如果您订阅numberStream$，您应该期望获得 1,2,3,4,5。
如果您订阅numbersPlus1$，您应该期望获得 2,3,4,5,6。

在这里，我们对Subject 做同样的事情。当然，与of(1,2,3,4,5) 不同，主题允许您以命令的方式创建流。每当我在某个主题上调用 .next 时，我都会说“让这个值成为该主题流中的下一个发射。”

const numberSubject$ = new Subject<number>();

const numbersPlus1$ = numberSubject$.pipe(
  map(v => v + 1)
);

numbersPlus1$.subscribe(console.log);

numberSubject$.next(1);
numberSubject$.next(2);
numberSubject$.next(3);
numberSubject$.next(4);
numberSubject$.next(5);

【讨论】：