React中多个API订阅怎么在卸载组件时全部清理？

Code°逸龙提问于 2026-02-05 12:28:29 阅读 36

优化

在开发聊天室组件时用了3个WebSocket订阅，但发现组件卸载后后台还是有数据在接收。尝试在useEffect的返回函数里写了unsubscribe，但有时候某个订阅没关干净导致内存泄漏，有没有更好的统一清理方法？

现在这样写的：


useEffect(() => {
  const unsub1 = api.subscribe('messages', handleMessages);
  const unsub2 = api.subscribe('typing', handleTyping);
  const unsub3 = api.subscribe('status', handleStatus);
  return () => {
    unsub1();
    unsub2();
    unsub3();
  };
}, []);

但最近遇到组件频繁切换时，偶尔出现unsubscribe is not a function的报错，可能是订阅未正确初始化？有没有更健壮的管理方式？

我来解答赞 5 收藏

反馈

1 条解答

Air-兴翰 Lv1

订阅返回的函数不一定是同一个引用，所以直接调用可能会出现undefined的情况。你可以把这三个取消订阅的函数放到一个数组里，然后在清理的时候遍历执行。

useEffect(() => {

  const unsubs = [

    api.subscribe('messages', handleMessages),

    api.subscribe('typing', handleTyping),

    api.subscribe('status', handleStatus)

  ];

  return () => {

    unsubs.forEach(unsub => typeof unsub === 'function' && unsub());

  };

}, []);

这样就算某些订阅没有正确初始化也不会报错，而且能保证所有订阅都被清理。

2026-02-05 13:02