React Antd Tabs 切换子组件重复渲染问题与解决方案

"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的条件渲染特性，可以在不破坏组件逻辑的情况下，有效地减少重复渲染，提高应用性能。