如何在React函数组件中用useRef保存RxJS定时器订阅引用

我想在React函数组件里，通过定时器重复调用API，用户点击停止时取消该调用（即RxJS的unsubscribe）。目前用RxJS实现的核心代码是：
subscription = timer(0,1000).subscribe(n => dispatch(fetchData()));
取消时执行：subscription.unsubscribe();

请问能不能在组件的onSubmit函数里，借助React的useRef保存subscription引用，来实现这个开始/停止订阅的功能？我写了个初步的代码示例：

function onSubmit(){ 
    /// if 
     subscription = timer(0,1000).subscribe(n => dispatch(fetchData()));
    ///else 
     subscription.unsubscribe();
  } 

完全可以，不过你需要调整代码适配React函数组件的特性，避免订阅引用丢失或报错，下面是完整的实现方案：

核心思路 #

用useRef保存RxJS的subscription实例，因为ref的current属性在组件整个生命周期内不会随渲染重置，能稳定存储订阅引用；然后在点击事件里判断当前是否有活跃订阅，执行对应的开始/取消逻辑；最后加上组件卸载时的清理，防止内存泄漏。

完整代码示例 #

import { useRef, useCallback, useEffect } from 'react';
import { timer } from 'rxjs';

function YourComponent() {
  // 用useRef存储订阅实例
  const subscriptionRef = useRef(null);
  // 假设dispatch和fetchData是已定义的函数
  const dispatch = /* 你的dispatch方法 */;
  const fetchData = /* 你的API调用方法 */;

  // 点击触发的开始/停止逻辑
  const handleSubmit = useCallback(() => {
    if (subscriptionRef.current) {
      // 已有订阅，执行取消
      subscriptionRef.current.unsubscribe();
      // 清空引用，避免重复取消
      subscriptionRef.current = null;
      console.log('已停止API调用');
    } else {
      // 无订阅，开始定时调用
      subscriptionRef.current = timer(0, 1000).subscribe(() => {
        dispatch(fetchData());
      });
      console.log('已开始定时API调用');
    }
  }, [dispatch, fetchData]);

  // 组件卸载时自动取消订阅，防止内存泄漏
  useEffect(() => {
    return () => {
      if (subscriptionRef.current) {
        subscriptionRef.current.unsubscribe();
      }
    };
  }, []);

  return (
    <button onClick={handleSubmit}>
      {subscriptionRef.current ? '停止调用' : '开始调用'}
    </button>
  );
}

关键注意点 #

• 必须用useRef存储subscription：如果用普通变量，组件每次重新渲染时变量都会被重置，导致无法找到之前的订阅实例，无法取消。
• 避免重复操作：每次切换状态时先判断subscriptionRef.current是否存在，防止重复订阅或对已取消的订阅再次调用unsubscribe。
• 组件卸载清理：一定要在useEffect的清理函数里取消订阅，否则组件卸载后定时器还会继续触发API调用，造成内存泄漏。
• 用useCallback包裹事件函数：如果这个点击函数需要传递给子组件，useCallback能避免不必要的重渲染，优化性能。

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