基于antd Table封装表格性能优化

基于antd Table封装表格性能优化

原始需求

1、支持自定义封装的基础控件在表格中展示。
2、实现一个受控的表格组件
3、实现单元格层级的校验功能，包括必填和自定义规则的校验。
4、支持自定义事件。依据配置项为click、focus、blur、change等类型事件添加自定义事件触发钩子。
5、支持自定义属性。实现行、列、单元格层级的自定义属性配置。
6、支持500行*20列表格正常使用不卡顿

分析

  基于以上几点需求，无法利用现有的UI框架提供支持，同时为增加可扩展性，也只有自己封装一个表格了。

• 首先考虑的是antd 的 table，可以基于 components 实现自定义 header、row、cell，实现按列甚至单元格的控件展示逻辑。
• 通过结合 form 可以实现单元格层级的校验。
• 对于受控和自定义事件、属性，通过额外的代码逻辑也可以实现。
• 但当测试 500行*20列数据时，发现滚动和输入都存在明显卡顿问题。

问题处理

一、表格滑动卡顿问题

分析

  因 antd Table 底层采用 rc-table，会为 cell 注入 onMouseEnter/onMouseOut 事件，用于鼠标滑动时使所在行高亮，原理是操作 dom 添加/删除 classname。因此在表格上下滚动过程中会不断操作 dom 触发重绘影响性能

  去除自动注入的 onMouseEnter/onMouseOut 事件实现的行高亮样式后。滚动时卡顿明显改善。但是行 hover 高亮却没有了（通过 :hover 实现的背景色效果还在，如果需要行高亮可以通过覆盖该背景色的方式实现）。

<