基于 Antd Table结合具体业务进行封装的最佳实践,同事在也不说我的 Table 是屎坑了

531 阅读2分钟

背景

由于公司业务经常需要展示金融数据,大量使用 Table 组件,而虽然 antd table 功能齐全,但配置项写起来实在令人痛苦——随随便便一个 Table 组件就需要写超过百行,偶尔写写还好说,但如果每次都要"万丈 table 平地起",的确是令人望而生畏。因此,为了降低公司内部使用 antd table 的门槛,便有了这篇文章

技术调研

我们要解决 Table 组件代码量过长的问题,那么首先我们要了解,具体是什么原因导致 Table 组件代码量特别长?我的总结如下

  • Columns 配置项过长:每次写 Table 第一件事就是配置 Columns,而 Columns 正是代码过长的核心原因,其代码量占总的 80%。

image.png

  • ConfigProvider 过长:这里的代码量不多,仅有 20 行,但仍会对页面的代码可读性造成影响,究其原因是因为他的层级很深,看着有一种"高楼"的感觉,令人不爽,所以也是我们铲除的目标之一。

image.png

  • Table props 过长:这里原因同上

    image.png

技术实现

以上三点,我们重点放在Columns的优化上,另外两点只要我们封装得当即可,按下不表。

我通过分析Columns数据结构发现,真正代码量多的主要是rendertitle一些自定义的内容,而事实上这些自定义的内容,都属于"公司业务普遍需求",例如"千分位分割","大数格式化展示","红涨绿跌"等等,既然如此我们就可以将这部分内容封装进去,作为配置项,以供同事做下一个类似需求时使用。

image.png

具体实现流程如下

image.png

核心代码逻辑如下 image.png @example

image.png

image.png

总结

antd 的泛用性和功能性是毋庸置疑的,而"基于第三方库做封装和使用"这件吃力不讨好的事,一不小心就会"过度封装",因此会让人十分怀疑其必要性——痛点是否真实?我能否解决痛点?解决痛点能否带来收益?

目前来看效果还是不错的,还有ConfigProvider没有封进去,还没想好怎么做

优化前: 292 行,优化后: 197 行

代码量减少 32.5%