react 如何判断组件离开，或者手动控制组件的离开

Question

场景如下：

现在用react实现了基于websocket的动态图形展示
一个TabPanel组件里里有三个子的Tab组件，每个子组件一张动态图
也就是每个组件一个websocket对应一张图

已经实现websocket和图标展现
但是当我切换tab，也就是切换图的时候，上一个tab所对应的websocket并没有关闭
导致websocket的连接数随tab的切换增加，直到每个tab都有一个连接，且页面不刷新，即TabPanel不重新渲染，连接始终存在，数据量一大很影响页面效率

我想做的是在每次切换tab的时候断开与前一个tab的websocket连接，每次切换都重新连接
这样的话就要捕捉到tab组件的离开状态，如何在切换子组件的时候去手动控制上一个子组件中的信息？

Answer 1

试试在组件销毁阶段，断开连接。componentWillUnmount() {     //   disconnect}