背景
由于公司业务经常需要展示金融数据,大量使用 Table 组件,而虽然 antd table 功能齐全,但配置项写起来实在令人痛苦——随随便便一个 Table 组件就需要写超过百行,偶尔写写还好说,但如果每次都要"万丈 table 平地起",的确是令人望而生畏。因此,为了降低公司内部使用 antd table 的门槛,便有了这篇文章
技术调研
我们要解决 Table 组件代码量过长的问题,那么首先我们要了解,具体是什么原因导致 Table 组件代码量特别长?我的总结如下
- Columns 配置项过长:每次写 Table 第一件事就是配置 Columns,而 Columns 正是代码过长的核心原因,其代码量占总的 80%。
- ConfigProvider 过长:这里的代码量不多,仅有 20 行,但仍会对页面的代码可读性造成影响,究其原因是因为他的层级很深,看着有一种"高楼"的感觉,令人不爽,所以也是我们铲除的目标之一。
-
Table props 过长:这里原因同上

技术实现
以上三点,我们重点放在Columns的优化上,另外两点只要我们封装得当即可,按下不表。
我通过分析Columns数据结构发现,真正代码量多的主要是render和title一些自定义的内容,而事实上这些自定义的内容,都属于"公司业务普遍需求",例如"千分位分割","大数格式化展示","红涨绿跌"等等,既然如此我们就可以将这部分内容封装进去,作为配置项,以供同事做下一个类似需求时使用。
具体实现流程如下

核心代码逻辑如下
@example


总结
antd 的泛用性和功能性是毋庸置疑的,而"基于第三方库做封装和使用"这件吃力不讨好的事,一不小心就会"过度封装",因此会让人十分怀疑其必要性——痛点是否真实?我能否解决痛点?解决痛点能否带来收益?
目前来看效果还是不错的,还有ConfigProvider没有封进去,还没想好怎么做
优化前: 292 行,优化后: 197 行
代码量减少 32.5%