websocket导致的setState不更新页面(useState)

问题：
直播页面，使用websocket来接收服务端传过来的数据，然后根据该数据，调用useState的第二个参数，
来更新state。
正常的时候是可以的。state被更新，页面被刷新。
但是，当我们去另外一个页面，然后再返回该页面。页面不会动态刷新了。
原因：
问题的原因为，页面去另一个页面的时候，页面并没有彻底关闭websocket连接。再下一次返回该页面的时候，进行判断，导致没有重新初始化实例。

const A = () => {
  if(websocket.clientConn) {
  		return;
  }
  const wsConn = `${LIVE_BROADCAST_WS_URL}?username=${encodeURI(name)}&role=presenter&group=${experimentRoomId}`;
  websocket.initConnection(wsConn, async(res:any) => {
    switch (res.id) {
      case "get_all_viewers":
        B(res);
        break;
    }
  }
}

const B = (res:any)=> {
    let viewerList: Viewer[] = [];
  
    setViewers([...viewers, ...viewerList]);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

解决办法：
退出页面的时候，关闭websocket连接。

useEffect(() => {
    kmsGlobal?.dispose();

    return () => {
      destroy();
      // 关闭websocket连接
      websocket.destroyResources()
    };
  }, []);
1
2
3
4
5
6
7
8
9

其中，destroyResources方法为：

destroyResources: () => {
    // 关闭并销毁连接
    if (ws.clientConn) {
      ws.clientConn.close();
      // 赋值为空，否则即使close也有值
      ws.clientConn = undefined;
    }
    // 销毁心跳定时器
    if (ws.pongInterval) {
      clearInterval(ws.pongInterval);
    }
    // 销毁重连定时器
    if (ws.reconnectTimeout) {
      clearTimeout(ws.reconnectTimeout);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16