socket.io useEffect 清理函数 react

Posted

技术标签:

【中文标题】socket.io useEffect 清理函数 react【英文标题】:socket.io useEffect cleanup function react 【发布时间】:2022-01-07 11:37:24 【问题描述】:

我在组件内部调用 socket.on 函数,但我想在组件卸载时停止它, 我正在使用功能组件。

useEffect(() => 
    socket.on("new-chat-message", (firstname, lastname, content, date) => 
      dispatch(
        addMessage(
          firstname: firstname,
          lastname: lastname,
          content: content,
          date: date,
        )
      );
    );
  , [dispatch, socket]);

我需要知道如何为这个useEffect设置清理功能。

【问题讨论】:

【参考方案1】:

如文档here中所述

useEffect(() => 
    const callback = (firstname, lastname, content, date) => 
      dispatch(
        addMessage(
          firstname: firstname,
          lastname: lastname,
          content: content,
          date: date,
        )
      );
    

    socket.on("new-chat-message", callback);

    return () => 
       socket.off("new-chat-message", callback);
    
, [dispatch, socket]);

【讨论】:

以上是关于socket.io useEffect 清理函数 react的主要内容,如果未能解决你的问题,请参考以下文章

带有 socket.io 状态的 UseEffect 钩子在套接字处理程序中不持久

使用 socket.io 将新的数组更改应用到 useEffect 并更改流

删除组件后如何清理react js中的useEffect函数

React useEffect 清理函数中的依赖没有更新

在 Context.Consumer 创建的 useEffect 清理函数中取消所有订阅

如何取消 useEffect 清理函数中的所有订阅和异步任务?