React函数组件中如何为监听Socket.io事件的useEffect设置清理函数

解决方案 #

你只需要给useEffect返回一个清理函数，在函数内调用socket.off解绑对应事件即可，注意要保证绑定和解绑用的是同一个事件回调函数引用，修改后的代码如下：

useEffect(() => {
    // 单独定义事件回调，保证绑定和解绑用同一个引用
    const handleNewChatMessage = (firstname, lastname, content, date) => {
      dispatch(
        addMessage({
          firstname: firstname,
          lastname: lastname,
          content: content,
          date: date,
        })
      );
    };

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

    // 返回清理函数
    return () => {
      socket.off("new-chat-message", handleNewChatMessage);
    };
  }, [dispatch, socket]);

注意事项 #

• 不要直接给socket.on传匿名函数，否则后续无法拿到完全相同的函数引用做解绑，会导致事件监听泄漏，出现重复触发回调的问题。
• 这个清理函数会在两个时机执行：组件卸载时、useEffect的依赖（dispatch、socket）发生变化重新执行effect前，确保不会产生重复监听。

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