使用React Suspense时如何实现资源清理？是否需单独编写清理逻辑？

Suspense 本身核心是处理异步资源的悬挂加载，并不直接内置清理逻辑。要实现类似 useEffect 里的请求中止、连接断开等清理需求，核心是把清理逻辑和资源实例绑定，结合组件生命周期或资源缓存的失效时机来触发。下面分场景具体说明：

一、基于 AbortController 的请求中止 #

把请求控制器和资源实例绑定，当组件卸载、依赖变化（比如 id 变更）时，销毁旧资源并触发中止：

1. 封装带清理的资源管理器 #

// 封装异步资源，内置清理逻辑
function createAsyncResource(fetcher) {
  const cache = new Map();

  return function getResource(key, options = {}) {
    // 不存在则创建新资源
    if (!cache.has(key)) {
      const controller = new AbortController();
      const signal = controller.signal;

      // 绑定signal到请求
      const promise = fetcher(key, { ...options, signal })
        .catch(err => {
          // 中止错误不抛给Suspense
          if (err.name === 'AbortError') return null;
          throw err;
        });

      const resource = {
        promise,
        controller,
        cleanup() {
          controller.abort();
        }
      };

      cache.set(key, resource);
    }

    const resource = cache.get(key);
    // 给Suspense抛出pending状态的promise
    if (resource.promise.status === 'pending') throw resource.promise;
    if (resource.promise.status === 'rejected') throw resource.promise.reason;

    return resource.promise.value;
  };
}

2. 组件中使用并触发清理 #

// 定义具体的资源获取函数
const getResource = createAsyncResource((id, { signal }) => {
  return fetch(`/api/data/${id}`, { signal }).then(res => res.json());
});

function DataComponent({ id }) {
  // Suspense会自动处理加载状态
  const data = getResource(id);

  // 组件卸载/ID变更时清理旧资源
  useEffect(() => {
    const resource = getResource.cache.get(id);
    return () => {
      resource?.cleanup();
      getResource.cache.delete(id); // 移除缓存，避免内存泄漏
    };
  }, [id]);

  return <div>{data.content}</div>;
}

// 用Suspense包裹组件
<Suspense fallback={<div>加载中...</div>}>
  <DataComponent id={currentId} />
</Suspense>

二、Socket 连接/频道退出场景 #

同样把 Socket 实例封装到资源中，在资源失效时触发断开逻辑：

function createSocketResource() {
  const activeSockets = new Map();

  return function getSocketChannel(channelId) {
    if (!activeSockets.has(channelId)) {
      const socket = new WebSocket(`wss://server/channel/${channelId}`);
      // 监听初始消息，供Suspense等待
      const messagePromise = new Promise(resolve => {
        socket.onmessage = e => resolve(JSON.parse(e.data));
      });

      const resource = {
        socket,
        messagePromise,
        cleanup() {
          socket.close(); // 断开连接
        }
      };

      activeSockets.set(channelId, resource);
    }

    const resource = activeSockets.get(channelId);
    throw resource.messagePromise;
  };
}

function ChannelComponent({ channelId }) {
  const initialMessage = getSocketChannel(channelId);

  // 组件卸载/频道ID变更时清理
  useEffect(() => {
    const resource = getSocketChannel.activeSockets.get(channelId);
    return () => {
      resource?.cleanup();
      getSocketChannel.activeSockets.delete(channelId);
    };
  }, [channelId]);

  return <div>初始消息：{initialMessage.text}</div>;
}

三、关于是否需要独立清理 useEffect #

答案是通常需要，但取决于你的资源缓存策略：

• 如果资源是组件级的（仅当前组件使用，随组件卸载失效）：必须在 useEffect 的清理函数里触发资源的 cleanup 方法，并移除缓存，避免内存泄漏。
• 如果是全局共享的资源（比如多个组件复用同一份数据）：可以在资源的 promise 完成后自动清理，或者在全局时机（比如路由切换）统一清理，此时组件内的 useEffect 可能不是必须的。

核心逻辑始终是：让资源的创建和销毁绑定到组件的生命周期或依赖变化时机，Suspense 只负责处理加载状态，清理逻辑需要你在资源管理层手动实现。

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