为什么socket.io建议不要监听子组件内部的事件？

Question

我有一个包含很多页面的 React 应用程序。在其中一个页面内，我需要与服务器进行实时通信。所以，我们开始使用socket.io。但是，医生说如下

子组件中的监听器 我们强烈建议不要在子组件中注册事件监听器，因为它将 UI 的状态与事件接收时间联系起来：如果组件未安装，则可能会丢失一些消息。

当事件被发出时，我们正在更新仅在该特定页面/组件中使用的某些端点的数据。如果我要在根级别注册事件，则意味着该事件将始终被触发。所以，数据会一直更新。除非用户位于该特定页面上，否则我们不关心数据更新。

什么是好的做法以及应该做什么？

Answer 1

如果您只想接收一页上有更新的事件，则不必遵循 socket.io 文档的建议。但是您需要在页面安装时从 api 端点获取数据。 所以：

1. 安装页面后，从端点获取当前状态，
2. 订阅您需要实时接收更新的事件。

这是一个如何实现它的示例：

const client = io(SOCKET_IO_URL, {});

function YourPage() {
   const [data, setData] = useState([]);
   
   // fetch initial state
   useEffect(() => {
      async function fetchData() {
          const res = await fetch('https://api-url.com/endpint');
          const data = await res.json();
          setData(data);
      };
      fetchData();
   }, []);

   // subscribe for updates
   useEffect(() => {
      function onNewItem(value) {
         setData(data => [...data, value]);
      } 
      client.on('newItem', onNewItem);
      return () => {
         client.off('newItem', onNewItem);
      }
   }, []);
   return (
     <div>{JSON.stringify(data)}}</div>
   );
}