"React应用中使用Ant Design的Tabs组件时，遇到子组件在TabPane之间切换时重复渲染的问题。问题的根源在于onChange事件处理函数触发了状态更新，从而导致整个组件树重新渲染。"
在React应用开发中，Ant Design是一个常用的UI库，其中的Tabs组件用于实现选项卡式界面。在示例代码中，有两个`<TabPane>`，每个里面都包含了一个`<AuthedCollections>`子组件，这两个子组件具有相同的属性`collectionType`。当用户在不同Tab之间切换时，`onChange`事件被触发，进而调用`changeTab`函数，更新`collectionType`和`tabActiveKey`的状态。
`changeTab`函数内部根据`key`值改变了`collectionType`的值，并通过`setState`更新了状态。在React中，`setState`会导致组件重新渲染，以反映状态的改变。然而，antd的Tabs组件设计为不销毁先前渲染的TabPane，而是保留它们以优化用户体验，避免在切换时频繁地进行昂贵的挂载和卸载操作。因此，每次切换Tab时，即使子组件的`collectionType`没有改变，由于父组件的状态变化，所有TabPane都会重新渲染，这可能导致子组件不必要的重复渲染。
解决这个问题的一种方法是利用React的条件渲染，只在当前激活的TabPane中渲染对应的子组件。可以修改`<TabPane>`的代码，如下所示：
```jsx
<Tabs
activeKey={tabActiveKey}
onChange={(key: string) => this.changeTab(key)}
type="card"
>
<TabPane tab={"对外授权"} key="/">
{
this.collectionType === CollectionEnums.AUTHED_TO_GRANT && (
<AuthedCollections
collectionType={this.collectionType}
/>
)
}
</TabPane>
<TabPane tab={"申请权限"} key="/">
{
this.collectionType === CollectionEnums.AUTHED_TO_APPLY && (
<AuthedCollections
collectionType={this.collectionType}
/>
)
}
</TabPane>
</Tabs>
```
在这个解决方案中，我们添加了条件判断，只有当`collectionType`匹配当前Tab的预期值时，才会渲染`<AuthedCollections>`。这样，即使`setState`被调用，未激活的Tab中的子组件也不会被重新渲染，从而避免了不必要的性能开销。
总结来说，React应用中Ant Design的Tabs组件在切换时可能引起子组件重复渲染，主要是因为`onChange`触发了状态更新。通过合理利用React的条件渲染特性，可以在不破坏组件逻辑的情况下，有效地减少重复渲染，提高应用性能。
我的内容管理
展开
