React中RxJS调用一次next()后订阅者多次触发问题排查

问题原因 #

你的AssistantContainer组件每次渲染时，都会执行assistant.getTasksQuadrants().subscribe(...)代码，每次执行都会创建一个新的订阅。这些订阅不会自动销毁，随着组件渲染次数增加，订阅数量不断积累，导致每次调用next()时，所有已存在的订阅都会触发，所以出现多次打印且次数不稳定的情况。

解决方法 #

需要确保组件仅在挂载时订阅一次，并在卸载时取消订阅，避免重复订阅和内存泄漏。可以通过React的useEffect钩子实现：

修改后的订阅者组件代码

import { useEffect, useRef } from 'react';
import { assistant } from "../../services/assistant.service";
import { EMCategory, Task } from "../../types";

export function AssistantContainer() {
  // 用useRef保存订阅实例，避免每次渲染重新创建
  const subscriptionRef = useRef(null);

  useEffect(() => {
    // 组件挂载时执行订阅
    subscriptionRef.current = assistant.getTasksQuadrants().subscribe(
      (quadrants: EMCategory[]) => console.log(quadrants)
    );

    // 组件卸载时取消订阅
    return () => {
      subscriptionRef.current?.unsubscribe();
    };
  }, []); // 空依赖数组确保仅在组件挂载时执行一次

  return (
    <div>
    </div>
  )
}

另一种实现方式（使用RxJS的takeUntil操作符）

如果习惯用RxJS的操作符管理订阅生命周期，可以用takeUntil配合一个用于取消订阅的Subject：

import { useEffect, useRef } from 'react';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { assistant } from "../../services/assistant.service";
import { EMCategory, Task } from "../../types";

export function AssistantContainer() {
  const destroy$ = useRef(new Subject<void>());

  useEffect(() => {
    assistant.getTasksQuadrants()
      .pipe(takeUntil(destroy$.current))
      .subscribe(
        (quadrants: EMCategory[]) => console.log(quadrants)
      );

    return () => {
      destroy$.current.next();
      destroy$.current.complete();
    };
  }, []);

  return (
    <div>
    </div>
  )
}

核心要点 #

• 永远不要在组件函数体的顶层直接写订阅逻辑，因为组件每次渲染都会执行这段代码，导致重复订阅。
• 必须在组件卸载时取消订阅，否则会造成内存泄漏，同时引发重复触发的问题。

内容的提问来源于stack exchange，提问作者jazzgot