Antd表格性能优化

今天来分享一个实际项目的性能优化的内容。

一、背景介绍

国内React项目大多数人选择配套的UI库的时候都会选择Antd。如果是非常简单的页面用Antd的话其实是完全没问题的，性能感觉不到什么瓶颈，样式也还是非常好看的。

但如果数据量大起来了的话，其实就会暴露出来问题了。
如下图一个实际项目，下面的可编辑表格里面的数据量大概在四千左右，这个时候就出现了比较严重的性能问题是需要解决的。
尤其是这个页面做了多人协同操作的功能，性能对于这个页面来讲是非常重要的，否则别人一个操作可能会导致我这边卡顿就是用户不可以接受的了

二、性能问题原因及解决方案

通过 控制台的 Performance 里面的内容得知到了：
发现Antd的table竟然给每一个单元格都设置了鼠标移入移出事件，那我们就去把他给干掉。

只写了关键代码

import React, { useMemo } from 'react';
import { Form, Table } from 'antd';
import { VList } from 'virtuallist-antd';

// 自定义td
const TdCell = (props) => {
  // onMouseEnter, onMouseLeave在数据量多的时候，会严重阻塞表格单元格渲染，严重影响性能
  const { onMouseEnter, onMouseLeave, ...restProps } = props;
  return <td key={restProps?.key} {...restProps} />;
};
function Index(props) {
  const components = useMemo(() => {
    // 如果你不用虚拟列表的话可以把这里删掉,直接return一个对象包含body.cell
    const vRes = VList({ height: 600 });
    vRes.body.cell = TdCell;
    return vRes;
  }, []);
  return (
	<Table
       rowKey="id"
       dataSource={[]}
       columns={[]}
       rowClassName="editable-row"
       pagination={false}
       scroll={{ x: '100%', y: 600 }}
       components={components}
       sticky
     />
  )
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

PS：数据量越大，这个代码收益越明显