antd tabs切换造成子组件重复刷新

本文主要是介绍antd tabs切换造成子组件重复刷新，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

描述：
Tabs组件在来回切换的过程中，造成TabPane中包含的相同子组件重复渲染，例如：

<TabsactiveKey={tabActiveKey}onChange={(key: string) => this.changeTab(key)}type="card"
><TabPane tab={"对外授权"} key="/authed-by-me"><AuthedCollectionscollectionType={this.collectionType}/></TabPane><TabPane tab={"申请权限"} key="/authed-to-me"><AuthedCollectionscollectionType={this.collectionType}/></TabPane>
</Tabs>changeTab = (key: string) => {this.collectionType = key === '/authed-by-me' ? CollectionEnums.AUTHED_TO_GRANT : CollectionEnums.AUTHED_TO_APPLY;this.setState({tabActiveKey: key})
};

分析：
在Tabs的onChange监听函数changeTab中调用setState，造成页面重新render。antd 的策略是，只渲染当前的。当用户切换过后，不删除之前渲染过的节点。所以点击切换会逐渐增多。为的是防止用户在 mount 阶段调用异步请求导致切换时反复渲染。所以 render 数量随着上层刷新而整体刷新并增加是预期行为。

解决方案：
运用react的条件渲染，在每一次tab切换的时候将上个页面移出Dom树

<TabsactiveKey={tabActiveKey}onChange={(key: string) => this.changeTab(key)}type="card"
><TabPane tab={"对外授权"} key="">{this.collectionType === CollectionEnums.AUTHED_TO_GRANT &&<AuthedCollectionscollectionType={this.collectionType}/>}</TabPane><TabPane tab={"申请权限"} key="/authed-to-me">{this.collectionType === CollectionEnums.AUTHED_TO_APPLY &&<AuthedCollectionscollectionType={this.collectionType}/>}</TabPane>
</Tabs>