写点什么

6个常用的React组件库

2020 年 9 月 07 日

6个常用的React组件库

本文最初发布于 maxrozen.com 网站,经原作者授权由 InfoQ 中文站翻译并分享。


Ant Design



  • 项目链接:Ant Design

  • 包大小(来自 BundlePhobia):缩小后 1.2mB,缩小 +gzip 压缩后 349.2kB,通过摇树减少体积。


优点:


  • AntDesign 随附了大量支持文档,有一个社区,包括一个带有预制模板的单独项目(AntDesignPro);

  • 可用来快速设计后台 / 内部应用的 UI 库。


缺点:


  • 缺乏可访问性;

  • 体积很大,预计会对性能产生较大影响;

  • 污染你的 CSS(期望添加!important 以防止它样式化你的非 Ant 组件)。


Bootstrap



其实我主要把 Bootstrap 看作是一个 UI 库。它不会帮你赢得任何设计奖项,但可以用来完成一些边缘项目和最小可行产品。


不过这取决于你要使用它的目的。如果你不熟悉 React,那么它是一个很好的入门库。对于经验更丰富的开发人员来说,他们可能会去研究 styled-components / Emotion。


有两个流行的库带有 Bootstrap 的 React 绑定,我个人仅使用 Reactstrap。


  • 项目链接:React Bootstrap

  • 包大小(来自 BundlePhobia):缩小后 111kB,缩小 +gzip 压缩后 34.4kB,通过摇树减少体积

  • 项目链接:Reactstrap

  • 包大小(来自 BundlePhobia):缩小后为 152.1kB,缩小 +gzip 压缩后 39.4kB,通过摇树减少体积


优点:


  • 带有 React 绑定的 Bootstrap 库,大家都喜欢;

  • 通过 CSS-in-JS 轻松自定义;

  • 它已经流行了足够长的时间了,因此不必担心错误 / 问题;

  • 快速上手;

  • 没有 jQuery 依赖,因为它已在 React 中完全重新实现。


缺点:


  • 这是 Bootstrap:如果你不做自定义,则你的网站将与其他网站没什么区别。


Bulma



Bulma 与本文介绍的其他库不太一样,因为 Bulma 是纯 CSS 框架,不需要 JS。你可以选择直接使用 Bulma 中的类,也可以使用包装库,例如 react-bulma-components。


  • 项目链接:Bulma

  • 项目链接:react-bulma-components

  • 包大小(来自 BundlePhobia):缩小后 179kB,缩小 +gzip 压缩 20.1kB


优点:


  • 不会让你的网站长一副 Bootstrap 的样子;

  • 适合快速启动和运行;

  • 现代化特性(底层是 Flexbox/ 网格)。


缺点:


  • 可访问性:虽然有一些,但没有像其他库那样严格遵守 WCAG 准则。


Chakra UI



  • 项目链接:ChakraUI

  • 包大小(来自 BundlePhobia):缩小后为 326.2kB,缩小 +gzip 压缩后为 101.2kB,通过摇树减少体积


优点:


  • 可访问性:遵循 WAI-ARIA 准则,组件使用 aria 标签;

  • Discord 服务器提供支持;

  • 易于定制(带有主题支持);

  • 高度模块化,因此摇树实际上会删除你不使用的代码。


缺点:


  • 相当新。


注意:


它非常接近 v1 版本,因此请注意 v0.8.0 之后的重大更改。


Material UI



MaterialUI 是我又爱又恨的库之一。过去,它帮助我扛过了一些非常紧张的项目死线,但到最后我总是尽快把它从所有角落赶走。


过去,你只能通过编写 JSS 来自定义 MaterialUI 的样式,但值得庆幸的是,现在可以使用 styled-components 和 Emotion 覆盖样式


  • 项目链接:Material UI

  • 包大小(来自 BundlePhobia):缩小后 325.7kB,缩小 +gizp 压缩 92kB,通过摇树减少体积


优点:


  • 完善的文档

  • 图标库很大

  • 简单易用(一开始的情况)


缺点:


  • 定制起来既困难又痛苦,但却很有必要(以改善视觉效果);

  • 性能:会渲染过多的 DOM 节点;

  • 你的应用看起来会像谷歌的产品(对于某些人来说,这可能代表一种专业风格)。


Semantic UI



  • 项目链接:Semantic UI

  • Semantic-UI-React

  • 包大小(来自 BundlePhobia):缩小后为 300.8kB,缩小 +gzip 压缩后为 80.9kB,通过摇树减少体积。


优点:


  • 可组合(使用 as prop 传递组件)

  • 易于定制

  • 好用的文档

  • 用户很知名(Netflix 内部使用,Amazon 发布的产品也在用)

  • TypeScript 支持


缺点:



荣誉奖


Reach UI


ReachUI 是一个底层组件库,允许开发人员在其设计系统中构建可访问的 React 组件。


没有可用的包大小,因为每个组件都单独导出为自己的 npm 包。


Reakit


Reakit 是另一个底层组件库。从技术上讲它是一个 UI 库,但不附带 CSS。因此你仍然需要找到一种样式解决方案。


  • 包大小(来自 BundlePhobia):缩小后为 119.9kB,缩小 +gzip 压缩后为 32.1kB,通过摇树减少体积。


Rebass



我关注 Rebass 已经有一段时间了。它是一个功能强大的组件库,没有自带主题,但可以轻松改变主题。关于它的实践示例,请参见其演示


  • 项目链接: Rebass

  • 包大小(来自 BundlePhobia):缩小后 43kB,缩小 +gizp 压缩 14.4kB,通过摇树减少体积。


提示


在编写这份列表时,我曾试着避免加入商业化的设计系统,但是有些系统(Material UI)已得到广泛采用,因此没有它们列表就不完整了。


我还特意省略了 CSS-in-JS(如 styled-components 和 Emotion)以及实用工具 CSS 系统(如 Tailwind),因为它们不是明确的“React 组件库”,而是用来制作组件的工具。


英文原文


A Guide to Commonly Used React Component Libraries


2020 年 9 月 07 日 11:051908
用户头像
小智 InfoQ 主编

发布了 396 篇内容, 共 308.2 次阅读, 收获喜欢 1717 次。

关注

评论 1 条评论

发布
用户头像
react大法好
2020 年 09 月 27 日 13:52
回复
没有更多了
发现更多内容

架构师训练营第 1 期 - 第七周作业

Todd-Lee

极客大学架构师训练营

第15周作业

Vincent

极客时间 极客大学

一站式接口测试服务体系建设

DrawDe朱

接口自动化 自动化测试平台

Netty源码解析 -- PoolChunk实现原理

binecy

源码 Netty 内存布局

第7周总结

alpha

极客大学架构师训练营

OTC支付系统开发,区块链支付系统方案

135深圳3055源中瑞8032

读完Java名著《Effective Java》: 我整理了这50条技巧

Java架构之路

Java 程序员 架构 面试 编程语言

数字货币交易所系统定制,场外币币撮合交易平台开发

135深圳3055源中瑞8032

Spring+多线程+集合+MVC+数据结构算法 +MyBatis源码学习笔记分享

Java架构之路

Java 程序员 架构 面试 编程语言

工作1-3年的程序员,应该具备怎么样的技术能力?该如何提升?

Java架构师迁哥

字节三面被挂后,狂刷算法,意外斩获阿里offer,定级P6+

互联网架构师小马

Java 编程 字节跳动 面试 算法

Spring Data Jpa deleteAll大概了解

ilovealt

Java jpa

架构师训练营第 1 期 - 第七周总结

Todd-Lee

极客大学架构师训练营

区块链USDT钱包开发方案,数字资产理财钱包开发

135深圳3055源中瑞8032

架构师训练营 1 期第 7 周:性能优化(一)- 总结

piercebn

极客大学架构师训练营

全链路压测在信用卡行业的实践

DrawDe朱

全链路压测

Java核心基础——反射

老农小江

Java 基础

目标检测之YOLOv2

Dreamer

爆火!阿里P9用500多页手册搞定双十一高并发秒杀系统,绝了

996小迁

Java 架构 面试 高并发 秒杀系统

蚂蚁金服面试3+2次,最终有惊无险通过!(已拿offer)

周老师

Java 编程 程序员 架构 面试

GitHub上最火的SpringCloud微服务商城系统项目,附全套教程

Java架构之路

Java 程序员 架构 面试 编程语言

「架构师训练营」第 3周作业

小黄鱼

极客大学架构师训练营

单例模式样例

jorden wang

交易所跟单系统开发,合约交易所搭建服务商

135深圳3055源中瑞8032

架构师训练营 1 期第 7 周:性能优化(一)- 作业

piercebn

极客大学架构师训练营

第二章学习笔记

博博

三、设计模式

Geek_28b526

Fedora32安装和卸载openjdk11

ilovealt

Linux Openjdk

Java键值对排序

ilovealt

Java

囚徒困境:跳脱思维的牢笼

多元思维力-晓陶

认知 思维 多元思维力

第二章课后习题

博博

2021年,算法还“香”吗?

2021年,算法还“香”吗?

6个常用的React组件库-InfoQ