如何将 socket.on 方法绑定到 React 功能组件答案

【问题标题】：How to bind a socket.on method to a React functional component如何将 socket.on 方法绑定到 React 功能组件
【发布时间】：2020-11-17 05:34:29
【问题描述】：

我正在使用 react 功能组件来构建一个带有在线聊天的协作白板，但我收到了多个 console.log 消息，用于发送/接收一条消息。

经过一番搜索，我发现问题可能是因为我没有在componentDidMount() 或功能组件的等效项中声明我的套接字事件侦听器。我的白板代码是这样的：

function WhiteBoardArea(props) {
  // Declare useStates here

  socket.on("canvas-change", newCanvasData =>  {
    setCanvasData(newCanvasData)
  });

  //return something
};

如何正确设置此 socket.on() 方法，使其仅运行一次？（第一次渲染组件）。

【问题讨论】：

目前，您在每次重新渲染时都订阅了该事件。要仅在第一次渲染时执行此操作，您需要将其放入 useEffect 挂钩中。会是这样的：useEffect(() => { /* Your Code */ }, []).

标签： reactjs socket.io

【解决方案1】：

你可以使用useEffect钩子。

function WhiteBoardArea(props) {
  // Declare useStates here

  useEffect(() => {
    socket.on("canvas-change", newCanvasData =>  {
      setCanvasData(newCanvasData)
    });
    return () => {
      socket.off("canvas-change");
    }
  }, []);

  //return something
};

将空数组作为第二个参数传递给 useEffect 等效于 React 类组件中的 componentDidMount，其中返回的函数是 componentDidUnmount。

【讨论】：

感谢您的快速回复！我的代码现在运行更流畅了。但我有一个问题 - 如果 socket.on 方法只运行一次，我们为什么要关闭套接字连接？为什么我们不运行一次并保持打开状态？
我建议在组件销毁后取消订阅套接字事件。或者你迟早会面临多套接字事件绑定问题。
有时间可以看我的帖子：dev.to/bravemaster619/…
谢谢！很棒的帖子。但是什么时候可以销毁组件呢？是用户存在标签的时候吗？
另外，如果我们使用 useEffect 而不返回或传递空数组，那本质上是否等同于根本不使用它？