react中使用antd的tabs进行标签切换时，销毁dom

前言：最近接的一个需求，需要将之前通过点击按钮触发跳转到的另外一个页面，通过跟点击按钮的页面融合，通过tab的形式进行切换。【由于业务方面的需求，两个页面的逻辑代码部分存在一致性（经多年长期沿用下来的代码）】

实现方法：

引入antd的tab即可

render(){
    const {waitDealNum, activeKey} = this.state
    return (
      
        
          
            
          
          
            
          
        
      
    )
  }

存在问题：

单纯将页面2作为一个组件引入页面1的话，可能在一些触发操作中，会存在问题，比如说打开一个弹窗，两个组件都存在的话，就会弹出两次

解决方法：

最快的解决方法是，在切换tab时，销毁掉隐藏的dom，如果说tab切换频繁，会存在重复渲染跟销毁元素，对性能方面有一定影响

最好的解决方法是，重构一下页面，对相互影响的方法做区分处理，抽离公共部分

1、antd提供的tabs的 destroyInactiveTabPane属性可以解决上面的问题

2、给tabs绑定onchange事件，通过监听activeKey来控制dom展示

handleTabChange = (value) => {
    this.setState({
      activeKey: value
    })
  }

  render(){
    const {waitDealNum, activeKey} = this.state
    return (
      
        
          
            {activeKey == 1 ?  : null}
          
          
            {activeKey == 2 ?  : null}
          
        
      
    )
  }