React antd tabs switching causes repeated refresh of subcomponents

describe:

When the Tabs component switches back and forth, the same subcomponents contained in the TabPane are rendered repeatedly, for example:

<Tabs
 activeKey={tabActiveKey}
 onChange={(key: string) => this.changeTab(key)}
 type="card"
>
  <TabPane tab={"External authorization"} key="/authed-by-me">
    <AuthedCollections
        collectionType={this.collectionType}
     />
  </TabPane>
  <TabPane tab={"Apply for permissions"} key="/authed-to-me">
    <AuthedCollections
      collectionType={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
 })
};

analyze:

Call setState in the onChange listener function changeTab of Tabs, causing the page to be re-rendered. Antd's strategy is to only render the current one. When the user switches, the previously rendered nodes are not deleted. So the number of clicks to switch will gradually increase. This is to prevent users from calling asynchronous requests during the mount phase, which causes repeated rendering when switching. Therefore, it is expected that the number of renders will be refreshed and increased as the upper layer is refreshed.

Solution:

Use react's conditional rendering to move the previous page out of the Dom tree every time the tab is switched

<Tabs
 activeKey={tabActiveKey}
 onChange={(key: string) => this.changeTab(key)}
 type="card"
>
 <TabPane tab={"External authorization"} key="">
 {
 this.collectionType === CollectionEnums.AUTHED_TO_GRANT &&
 <AuthedCollections
 collectionType={this.collectionType}
 />
 }
 </TabPane>
 <TabPane tab={"Apply for permissions"} key="/authed-to-me">
 {
 this.collectionType === CollectionEnums.AUTHED_TO_APPLY &&
 <AuthedCollections
 collectionType={this.collectionType}
 />
 }
 </TabPane>
</Tabs>

Antd Tabs current page switches back and forth, the form data is not cleared (or cleared)

The way to clear the form is this.props.form.resetFields();

However, this article mainly explains

Flexible use of display:none can avoid the form data being re-rendered and cleared by setState when switching (i.e. switching tab items without clearing the form)

Query area

{/* Query area*/}
    <div className="search-form-area">
     {
      <div style={{ display: activeKey === '1' ? 'block' : 'none' }}><SearchFieldForm // Project angle ref={(form) => this.ProjSearchForm = form}
       submitFuc={this.getProjPage}
       fieldsData={projSearchData}
       colNum={4}
       diyItemLayout={{ labelCol: { span: 4 }, wrapperCol: { span: 17 } }}
      // moreSearchData={moreSearchData}
      /></div>
     }
     {
      <div style={{ display: activeKey === '2' ? 'block' : 'none' }}>< SearchFieldForm // Product angle ref={(form) => this.PrdSearchForm = form}
       submitFuc={this.getProjPage}
       fieldsData={prdSearchData}
       colNum={4}
       diyItemLayout={{ labelCol: { span: 4 }, wrapperCol: { span: 17 } }}
      /></div>
     }
    </div>

List Area

 {/* List area */} 
        <div style={{ height: tableHeight + 100 }} className='myProjTable'> 
          <Tabs defaultActiveKey="1" onChange={this.handleTabsChange}> 
            <TabPane tab="Project Angle" key="1" style={{ backgroundColor: '#fff' }}> 
              <CustomTable 
                rowKey='projId'
                size="small"
                style={{ height: tableHeight }}
                columns={columns}
                tableData={projTableData}
                expandedRowRender={this.expandedRowRender}
                pagination={pagination}
                handleTableChange={this.handleTableChange}
                scroll={{ y: tableScrollHeight, x: 1660 }}
                tableRowSelection={this.tableRowSelection}
              />
            </TabPane>
            <TabPane tab="Product Angle" key="2" style={{ backgroundColor: '#fff' }}>
              <CustomTable
                rowKey="projId"
                size="small"
                style={{ height: tableHeight }}
                columns={columnsPrd}
                tableData={prdTableData}
                handleTableChange={this.handleTableChange}
                pagination={pagination}
                scroll={{ y: tableScrollHeight, x: 1800 }}
                tableRowSelection={this.tableRowSelection}
              />
            </TabPane>
          </Tabs>
        </div>

This is the end of this article about React antd tabs switching causing repeated refresh of subcomponents. For more related antd tabs repeated refresh content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:

React implements sample code similar to Taobao tab center switching effect
React-native method of dynamically switching tab components
Sample code for implementing tab switching via event parameter passing in React component
Use ReactJS to implement tab page switching, menu bar switching, accordion switching and progress bar effects
React handwriting tab switching problem

<<: Introduction to generating Kubernetes certificates using OpenSSL

>>: Nginx sample code for implementing dynamic and static separation