antd tabs切换非常慢如何优化？

Question

使用antd tabs组件，当我写官网那样的demo的时候切换tab几乎感受不到什么卡顿。但是真正再内部嵌套了table（antd的Table组件）时切换就非常慢了，tabs标签页面内部是一个10行的Table组件。每次切换差不多有1s的时间才会切换过去。 不知道有没有优化的方式，下面时在chrome中performance面板拿到的两次切换的数据

<!--  -->
<Tabs 
defaultActiveKey="1" 
onChange={this.callback} 
>
    <TabPane tab="全部提交" key="1">
      <SubmitTable dataSource={allMockData}/>
    </TabPane>
    <TabPane tab="我的提交" key="2">
      <SubmitTable dataSource={myMockData}/>
    </TabPane>
</Tabs>

// SubmitTable.jsx
import React, { Component } from 'react';
import { Button, Table, Input, Icon } from "antd";
import { Link } from "react-router-dom";


export default class SubmitTable extends Component {
  constructor (props) {
    super(props);
    this.props = props;
    this.state = {
      searchText: '',
      pagination: {
        total: 200,
        current: 0
      },
      data: props.dataSource,
      loading: false
    }
  }
  getColumnSearchProps = (dataIndex) => ({
    filterDropdown: ({
      setSelectedKeys, selectedKeys, confirm, clearFilters,
    }) => (
      <div style={{ padding: 8 }}>
        <Input
          ref={node => { this.searchInput = node; }}
          placeholder={`Search ${dataIndex}`}
          value={selectedKeys[0]}
          onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
          onPressEnter={() => this.handleSearch(selectedKeys, confirm)}
          style={{ width: 188, marginBottom: 8, display: 'block' }}
        />
        <Button
          type="primary"
          onClick={() => this.handleSearch(selectedKeys, confirm)}
          icon="search"
          size="small"
          style={{ width: 90, marginRight: 8 }}
        >
          搜索
        </Button>
        <Button
          onClick={() => this.handleReset(clearFilters)}
          size="small"
          style={{ width: 90 }}
        >
          重置
        </Button>
      </div>
    ),
    filterIcon: filtered => <Icon type="search" style={{ color: filtered ? '#1890ff' : undefined }} />,
    onFilterDropdownVisibleChange: (visible) => {
      if (visible) {
        setTimeout(() => this.searchInput.select());
      }
    }
  })
  handleSearch = (selectedKeys, confirm) => {
    console.log('reset');
    confirm();
    this.setState({ searchText: selectedKeys[0] });
  }

  handleReset = (clearFilters) => {
    console.log('reset');
    clearFilters();
    this.setState({ searchText: '' });
  }
  handleTableChange = (pagination, filters, sorter) => {
    this.setState({loading: true})
    setTimeout(() => {
      this.setState({
          data: [],
          loading: false
      })
    }, 1500)
    console.log(pagination, filters, sorter);
  }
  render () {
    const columns = [
      {
        title: '序号',
        dataIndex: 'id',
      },
      {
        title: '题目',
        dataIndex: 'problrmName',
        ...this.getColumnSearchProps('problrmName'),
        render: (text, record) => (
          <Link to={`/problem/${record.problemId}`}>{text}</Link>
        )
      },
      {
        title: '用户',
        dataIndex: 'userName',
        ...this.getColumnSearchProps('userName'),
        render: (text, record) => (
          <Link to={`/user/${record.userId}`}>{text}</Link>
        )
      },
      {
        title: '编译环境',
        dataIndex: 'language',
      },
      {
        title: '提交时间',
        dataIndex: 'createdAt',
      },
      {
        title: '用时',
        dataIndex: 'time',
      },
      {
        title: '结果',
        dataIndex: 'result',
      },
      {
        title: '',
        dataIndex: 'submitId',
        render: text => (
          <Button 
            type="primary" 
            shape="circle" 
            icon="search" 
            onClick={() => this.showSubmit(text)}
          />),
      },
    ]
    return (
      <Table 
        rowKey="id" 
        columns={columns}
        dataSource={this.state.data}
        pagination={this.state.pagination}
        loading={this.state.loading}
        onChange={this.handleTableChange}
      />
    );
  }
}

Answer 1

我也遇到了这个问题，楼主有解决方法了吗

Answer 2

尝试一下把tabs的动画效果关闭试下

Answer 3

给嵌套 Table 组件的 TabPane 添加 forceRender 属性试下

Answer 4

请问解决了嘛，我也遇到这个问题了，一直没解决