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

Question

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

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

function WhiteBoardArea(props) {
  // Declare useStates here

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

  //return something
};

如何正确设置此socket.on()方法，使其只运行一次？(第一次呈现组件时)。

Answer 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。