React useEffect异步资源订阅后，如何在清理函数中正确取消订阅？

这是React里处理异步订阅时非常典型的闭包陷阱——因为getSomeResource()是异步的，then回调里的resource只存在于那个回调的作用域内，清理函数根本访问不到它。而且你说得对，useEffect确实不能直接用async函数，因为它需要返回一个清理函数（而不是Promise）。下面是几种靠谱的解决方式，按推荐程度排序：

方法一：用useRef保存资源实例 + 挂载状态标志（最安全） #

我们可以用useRef来存储获取到的资源实例，因为ref的current属性是可变的，并且能在组件整个生命周期内保持引用，清理函数就能访问到它。另外，还要加一个挂载状态标志，防止组件卸载后异步操作才完成，导致不必要的订阅。

import { useEffect, useRef } from 'react';

function YourComponent() {
  // 保存资源实例
  const resourceRef = useRef(null);
  // 标记组件是否还挂载
  const isMounted = useRef(true);

  useEffect(() => {
    const onResourceChange = () => {
      console.log('resource changed');
    };

    getSomeResource().then(resource => {
      // 如果组件已经卸载，直接返回，避免无效订阅
      if (!isMounted.current) return;
      
      resourceRef.current = resource;
      resource.subscribe(onResourceChange);
    });

    // 清理函数
    return () => {
      // 标记组件已卸载
      isMounted.current = false;
      // 如果资源已经获取到，取消订阅
      if (resourceRef.current) {
        resourceRef.current.unsubscribe(onResourceChange);
      }
    };
  }, []);

  return <div>Your Component Content</div>;
}

为什么这样有效？ #

• useRef的current不会像state那样触发重渲染，而且能跨渲染周期保存值，完美适配异步场景。
• isMounted标志能避免组件卸载后，异步请求才完成的情况——这时候再去订阅已经没有意义，还可能导致内存泄漏。

方法二：如果资源支持取消请求，额外取消异步操作 #

如果getSomeResource()支持取消（比如用fetch的话可以配合AbortController），还可以在清理时直接取消未完成的请求，进一步优化：

import { useEffect, useRef } from 'react';

function YourComponent() {
  const resourceRef = useRef(null);
  const abortController = useRef(new AbortController());

  useEffect(() => {
    const onResourceChange = () => {
      console.log('resource changed');
    };

    getSomeResource({ signal: abortController.current.signal })
      .then(resource => {
        resourceRef.current = resource;
        resource.subscribe(onResourceChange);
      })
      .catch(err => {
        // 处理取消请求的错误（比如AbortError）
        if (err.name !== 'AbortError') {
          console.error('Failed to get resource:', err);
        }
      });

    return () => {
      abortController.current.abort();
      if (resourceRef.current) {
        resourceRef.current.unsubscribe(onResourceChange);
      }
    };
  }, []);

  return <div>Your Component Content</div>;
}

注意点 #

• 这种方式需要你的getSomeResource()支持接收signal参数并响应取消操作，不是所有异步API都支持，所以要看具体场景。

关键提醒：为什么不能用async/await直接写在useEffect里？ #

你提到的useEffect不允许用async函数是对的——因为async函数会返回一个Promise，而React期望useEffect的返回值要么是清理函数，要么是undefined。如果返回Promise，React会直接忽略它，导致清理逻辑完全失效，这是一定要避免的。

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