React-UI庫比較
阿新 • • 發佈：2019-01-02
迴歸部落格了。說明我變得不那麼忙了。最近幹了件有意思的事情，根據團隊需求選擇一個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 ）