React-UI库比较

回归博客了。说明我变得不那么忙了。最近干了件有意思的事情，根据团队需求选择一个React UI库，把结果和感受和大家分享一下。

待对比的库

国内使用React的小伙伴可能很多都用Antd，其实国外也有很多优秀的React UI库。本次选择的有：

• Ant Design
• Ant Design Mobile
• Elemental UI
• Material UI
• React-Bootstrap
• Reactstrap
• Semantic UI
• Onsen UI

我关注的点

首先，由于很多responsive的库，对mobile的支持并不好，我希望pc和mobile选择两个UI库。下面是我关注的一些方面：

• 社区活跃度
• 是否长期维护
• license
• components数量
• 国际化支持，主要是 locale (i18n) 和 RTL direction
• accessibility，主要针对残障人士
• 按需加载和包大小

结论

name	pc or mobile	dependencies	star	watch	license	whole size(gzipped)	load on demand	language	RTL
Material UI	both(response)	11	32.4k	1141	MIT		yes	doesn’t support	×
Antd	pc	42	23.4k	1036	MIT		yes	i18n	×
Antd-mobile	mobile	28	4k	202	MIT		yes	some of i18n, there is an api to extend other language	×
Elemental UI	both(response)	2(some peer modules must be installed manually, eg react-addons-css-transition-group and jquery)	3.9k	106	MIT	80kb(js) + 65.6kb(css)		couldn’t find any info about it	×
React-Bootstrap	both(response)	not stable, under development to v1.0.0, APIs will change	×
Reactstrap	both(response)	6	3.4k	113	MIT	77.3kb(js) + 142(css)		couldn’t find any info about it	×
Semantic UI React	both(response)	5	5.6k	194	MIT		yes	doesn’t support	×
Onsen UI	mobile	3	5.9k	323	Apache License 2.0		yes	doesn’t support	×

• RTL: 提了issue问各种UI库的作者，除了Bootstrap 3有补丁可以支持RTL外，其他全部不支持
• 多国语言：对多国语言的支持，目前Antd最好
• components数量和社区活跃度：Materail UI （PC）和 Onsen UI （Mobile）是比较好的选择
• accessibility：目前没有看到对残障人士的特殊支持
• 按需加载：Materail UI和Antd有特殊支持，其他依赖于打包工具（比如webpack的Tree Shaking，但是webpack的这个特性不完善 https://github.com/webpack/webpack/issues/2867 ）