React antd tabs切換造成子組件重復刷新

Posted on by

描述：

Tabs組件在來回切換的過程中，造成TabPane中包含的相同子組件重復渲染，例如：

<Tabs
 activeKey={tabActiveKey}
 onChange={(key: string) => this.changeTab(key)}
 type="card"
>
  <TabPane tab={"對外授權"} key="/authed-by-me">
    <AuthedCollections
        collectionType={this.collectionType}
     />
  </TabPane>
  <TabPane tab={"申請權限"} 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
 })
};

分析：

在Tabs的onChange監聽函數changeTab中調用setState，造成頁面重新render。antd 的策略是，隻渲染當前的。當用戶切換過後，不刪除之前渲染過的節點。所以點擊切換會逐漸增多。為的是防止用戶在 mount 階段調用異步請求導致切換時反復渲染。所以 render 數量隨著上層刷新而整體刷新並增加是預期行為。

解決方案：

運用react的條件渲染，在每一次tab切換的時候將上個頁面移出Dom樹

<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="/authed-to-me">
 {
 this.collectionType === CollectionEnums.AUTHED_TO_APPLY &&
 <AuthedCollections
 collectionType={this.collectionType}
 />
 }
 </TabPane>
</Tabs>

Antd Tabs 當前頁面來回切換 表單數據不清空（或者清空）

清空表單的辦法是this.props.form.resetFields();

但是本篇文章主要講解不清空

靈活使用 display:none 就可以避免切換的時候表單數據被setState重新渲染清空掉 （即切換tab項，不清空表單）

查詢區域

{/* 查詢區域 */}
    <div className="search-form-area">
     {
      <div style={{ display: activeKey === '1' ? 'block' : 'none' }}><SearchFieldForm // 項目角度
       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 // 產品角度
       ref={(form) => this.PrdSearchForm = form}
       submitFuc={this.getProjPage}
       fieldsData={prdSearchData}
       colNum={4}
       diyItemLayout={{ labelCol: { span: 4 }, wrapperCol: { span: 17 } }}
      /></div>
     }
    </div>

列表區域

 {/* 列表區域 */} 
        <div style={{ height: tableHeight + 100 }} className='myProjTable'> 
          <Tabs defaultActiveKey="1" onChange={this.handleTabsChange}> 
            <TabPane tab="項目角度" 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="產品角度" 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>

到此這篇關於React antd tabs切換造成子組件重復刷新的文章就介紹到這瞭,更多相關antd tabs重復刷新內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：

    None Found