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

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

实现方法：

引入antd的tab即可

render(){
    const {waitDealNum, activeKey} = this.state
    return (
      <ACard className='service-process-tab'>
        <Tabs defaultActiveKey="1" animated={false}>
          <TabPane tab="我的" key="1">
            <ServiceProcessCp {...this.props} />
          </TabPane>
          <TabPane tab="你的" key="2">
            <ClaimedServiceCp {...this.props} type='1' />
          </TabPane>
        </Tabs>
      </ACard>
    )
  }

存在问题：

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

解决方法：

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

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

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

<Tabs defaultActiveKey="1" animated={false} destroyInactiveTabPane={true}>

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

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

  render(){
    const {waitDealNum, activeKey} = this.state
    return (
      <ACard className='service-process-tab'>
        <Tabs defaultActiveKey="1" animated={false} onChange={this.handleTabChange}>
          <TabPane tab="我的" key="1">
            {activeKey == 1 ? <ServiceProcessCp {...this.props} /> : null}
          </TabPane>
          <TabPane tab="你的" key="2">
            {activeKey == 2 ? <ClaimedServiceCp {...this.props} type='1' /> : null}
          </TabPane>
        </Tabs>
      </ACard>
    )
  }