React新手关于useEffect订阅清理官方示例的相关疑问

问题1解答 #

ChatAPI是业务侧自行封装的普通JS工具对象，和React组件没有关系，它的作用是统一封装和聊天服务后端交互的相关逻辑，形态类似下方代码：

// 示例实现，一般放在公共工具文件中
export const ChatAPI = {
  // 订阅指定好友的在线状态
  subscribeToFriendStatus(friendId, callback) {
    // 内部实现：和后端建立ws连接/轮询，监听对应friendId的状态变化
  },
  // 取消订阅指定好友的在线状态
  unsubscribeFromFriendStatus(friendId, callback) {
    // 内部实现：断开对应监听，移除回调函数
  }
}

问题2解答 #

• 这两个方法的第二个参数本身设计的就是状态变化回调函数，你传入的handleStatusChange会被ChatAPI内部缓存，当对应好友的状态发生变化时，ChatAPI会主动调用这个回调，把最新的状态数据作为参数传入。
• props.friend.id不会传递给handleStatusChange，它的作用是给ChatAPI做订阅标识，告诉ChatAPI你要监听的是哪个好友的状态，内部会根据这个id匹配对应的状态更新事件。

问题3解答 #

你的猜测方向是对的，准确来说ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange)这一行就是订阅类副作用：它是脱离React渲染流程的外部交互操作，会在ChatAPI中持续留存对回调函数的引用，如果不清理会导致内存泄露。return语句中返回的清理函数是用来清除这个副作用的配套逻辑，不属于订阅本身。

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