解决ant design Tabs组件使得同一个子组件多次挂载的bug

当项目中使用异步加载,ant design的Tabs组件处理ui时, 就会出现如题这种bug
例:

<Tabs
 tabs={tab1}
  initialPage={nav1}
  tabBarPosition="top"
  renderTab={tab => <span>{tab.title}</span>}
  swipeable={false}
  onChange={(tab, index) => {
    this.bigNavchange(tab, index);
  }}
 
>
  			<Fragment>
    				<Switch>
                      {routerlist.map((i, key) => {
                        return (
                          <Route
                            path={i.path}
                            component={i.component}
                            exact
                            key={key}
                          />
                        );
                      })}
                 	</Switch>
  			</Fragment>
</Tabs>

上面Tabs组件中的数据是由map遍历渲染, routerlist是子组件统一配置的路由列表,并且是使用了react-loadable异步加载组件,
这时同一个子组件componentDidMount中console.log(1)尽然触发了多次, 说明组件被挂载了多次,

• 原因:
  找遍了原因, 原来就是Tab组件这个坑, 它的子组件会根据tab数量来渲染,使得同一个子组件被多次挂载

• 解决:
  方法1. 里面只能写纯函数组件, 将每一个子组件中生命周期要执行的方法, 全部放在Tab组件的change回调中, 父传子属性来渲染
  方法2. 子组件放Tab组件外部来渲染, 子组件不再被挂载多次, Tab中的动画效果就不作用与子组件了, 可以自己写动画效果