Charts图表
- 百度Echarts无疑是最主流、最强大的,而且经过了多年的发展与验证。截止到目前为止是3.6+版本,斩获星星近乎2万颗。但是它官方并没有提供React版本,不过在官方github的Readme中介绍了几个第三方的(个人出品)React包装实现(当然了,还有VUE的版本)。
- Recharts是ANTD admin作者推荐的图表库,它号称是将D3做了React整合。D3虽然是老外个人出品的开源项目,但却是一个60k+的star怪兽。而Recharts也有6k+颗星,但Recharts截止到目前仍是1.0的alpha版本。
- AntV阿里出品,由G2项目发展而来,目标应该是和百度Echarts刚正面。它其中的web端图表库仍然叫做G2,且官方封装了g2-react组件,看得出来阿里的前端团队是更亲React,不过不怎么亲VUE。截止到目前,我还没找到G2开源代码的github地址。
最后我们选择的是AntV,没有原因。因为常规功能任何一个都够用,而且我们对性能方面也没有苛刻的诉求。之前在其他项目中选用过Echarts,那这次就拿AntV尝尝鲜好了。
二维码生成
React的二维码生成库找到2个:
- react-qrcode
-
qrcode.react
第一个由于很久不更新了,因此选用了第二个。
使用过程中遇到了中文乱码的问题,解决方式是封了一个方法:方法对二维码字符串进行预处理,将字符串中的utf16编码转为utf8。将转码后的字符串生成二维码,用微信支付宝这种常规的扫码APP扫后解析就不是乱码了。
图标生成
在做完这个功能之后,antd很不合时宜地发布了新版本,支持了Avatar组件。自己实现类似功能的话,做到的只是能比官方组件灵活程度更高一点而已。
我的做法是引用了react-image-holder,它是将holder.js做了封装,开发时具体的参数配置还是要参考holder.js的。
工具方法库
最近才看到loadsh,恕我以前对前端不了解,这么强大的库居然最近才知道,而且在项目中并未使用它,以后一定在项目中多多使用。它涵盖了对多种数据类型的API增强,语法糖还是挺甜的。