入坑React之七 前端库的使用

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增强，语法糖还是挺甜的。