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

Z时代
2024-01-10
分类：技术分享

使用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}
/>
);
}}