Javascript 在组件装载和卸载时，在react with socketio中更新组件

我在一个应用程序中工作，在这个应用程序中，我接收来自socketio的消息。我创建了一个组件，每次我从socketio收到一条消息时，我都会呈现一张带有该消息的卡片。这是可行的，问题是如果我卸载组件，一旦我再次装载它，我可以看到以前的组件和新组件，但我无法保留在卸载组件时排列的组件。实现这一目标的正确方法是什么

我想我需要从组件中取出套接字连接，因为我想保留会话期间接收到的所有消息

export default function MessagePage() {
  const [message, setMessage] = useState([]);
  useEffect(() => {
    socket.on("message", (messageSocket) => {
      let mess = JSON.parse(messageSocket);
      setMessage(mess);
    });
  }, [])

  return <Message message={message} />
}

导出默认函数MessagePage（）{
const[message，setMessage]=useState（[]）；
useffect（（）=>{
socket.on（“message”，（messageSocket）=>{
让mess=JSON.parse（messageSocket）；
设置消息（mess）；
});
}, [])
返回
}

let messageCollection=[]；
导出默认函数消息（{Message}）{
const[messageState，setMessageState]=useState（[]）；
messageCollection.unshift（消息）；
useffect（（）=>{
setMessageState（messageCollection）；
}，[信息]）
返回(
{messageState.map（mes=>(
))}
);
}

---

我想我需要做一些事情，比如在用户位于不同页面时将消息保存在数组中，但我认为我仍然存在渲染已保存的消息和每隔几秒钟从socketio到达的消息的问题。

我认为将消息保存在数组中是可行的，但如果用户刷新页面，这些消息将再次消失。因此，最好的方法是使用后端服务器并将消息保存在数据库中。这将帮助您在socket中呈现所有旧消息，并且新消息可以按您现在的方式显示。是的，这是一个想法，用户可以看到会话期间创建的消息。另一方面，我提供了请求服务器数据的选项。因此，我认为在客户端将它们保存在一个数组中是一种选择，但我仍然不确定如何管理是否使用组件装载保存所有它们，然后在我移动到该页面时显示所有到达的内容，以及旧消息、组件卸载时到达的消息和正在到达的新消息。

let messageCollection = [];

export default function Message({ message }) {
  const [messageState, setMessageState] = useState([]);

  messageCollection.unshift(message);
  useEffect(() => {
    setMessageState(messageCollection);
  }, [message])

  return (
    <>
      {messageState.map(mes => (
          <Message
            ...
          />
      ))}
    </>
  );
}