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

Question

场景如下：

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

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

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

Answer 1

试试在组件销毁阶段，断开连接。

componentWillUnmount() {
    // disconnect
}

Answer 2

const son = React.createClass({
    render(){
        return (
            this.props.isRender? <div>123</div>:null
        )
    }
})
const father = React.createClass({
    getInitialState(){
      return {
         isRender: true, 
      }
    },
    onClick(){
        this.setState({isRender: !this.state.isRender});
    }
    render(){
        return (
            <button onClick={this.onClick}>点我</button>
            <son isRender={this.state.isRender} />
        )
    }
})