6个常用的React组件库

2023-05-16

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 支持

缺点:

  • 开源项目的潜在不确定性。

  • 查看 issue:

    • https://github.com/Semantic-Org/Semantic-UI/issues/6109

    • https://github.com/Semantic-Org/Semantic-UI/issues/6413

  • 社区运行的 fork:

    • https://github.com/fomantic/Fomantic-UI

荣誉奖

Reach UI

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

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

Reakit

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

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

Rebass

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

  • 项目链接:Rebass

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

6个常用的React组件库 的相关文章

随机推荐

  • QML 地图修改插件源码(五),Map添加自定义地图类型,并动态修改地图类型

    QML的地图Map中提供了属性activeMapType MapType用于设置当前地图的类型 xff0c 以OSM地图插件为例 xff0c OSM地图提供了多种地图类型 xff0c 下面介绍如何修改OSM插件的源码添加需要的地图类型 xf
  • Qt使用QQuaternion对空间矢量QVector3D进行旋转

    空间中的QVector3D既可以代表空间中的点位置 xff0c 也可以表示空间矢量 为什么要对空间矢量进行旋转呢 xff0c 比如有一个空间矢量在空间中代表了镜头前进的方向 xff08 即第一人称模式 xff09 xff0c 初始时该矢量指
  • QML实现双屏显示

    QML程序中需要分别在主屏幕和分屏幕上显示不同的界面内容 xff0c 但又为了不同界面间能够进行数据交互 xff0c 因此使用如下方法实现双屏显示 xff0c 即由主窗口生成第二个窗口 xff0c 将该窗口移动到第二个屏幕上 xff0c 实
  • ubuntu设置默认内核启动的方法

    本文介绍ubuntu设置默认内核启动的方法 参考如下图 xff0c 修改grub文件 xff1a 修改后 xff0c 执行 xff1a sudo update grub amp amp reboot
  • QML自定义的日历控件

    QML中提供了日历的控件Calendar xff0c 但该控件为QtQuick Controls 1中提供的控件 xff0c 因此只能使用QtQuick Controls Styles的方式对该控件进行设置 xff0c 效果如图 xff1a
  • QML地图Map中使用QPainterPath,并显示任意点经纬度位置

    QML地图Map中提供了供绘制图形的组件 xff0c 例如MapPolyline xff0c MapCircle等 xff0c 但是这些组件在绘制复杂轨迹时就显得功能不够全面 xff0c 因此我将QPainterPath在Map中进行使用并
  • QML地图绘制虚线

    QML提供了MapPolyline用于在地图上绘制线段 xff0c 该线段是实线 xff0c 因此我使用Canvas自定义绘制的方式在地图上绘制线段 xff0c 如图 xff1a 鼠标在地图上点击后 xff0c 在点击位置添加图标 xff0
  • QML无边框最大化窗口时遮住了任务栏,程序默认置顶的问题

    在QML窗口使用无边框 xff0c 并且默认程序最大化显示后 xff0c 此时程序显示默认自动变成了全屏显示 xff0c 程序自动遮挡住了系统任务栏 当使用多屏幕显示时 xff0c 切换不同程序 xff0c 该QML程序的界面显示错误 使用
  • 用VScode写C/C++,从下载安装到配置使用

    介绍 编程的过程大致分为编写代码 代码编译 代码执行三步 xff0c vscode可以完成代码编写 xff0c 但是不能进行编译 也就是将代码翻译为计算机可以听懂的话 xff0c MinGW可以完成这个任务 xff0c 二者配合可以实现在v
  • 深度学习训练降低显存指南

    一 小模块API参数inplace设置为True xff08 省一点点 xff09 比如 xff1a Relu 有一个默认参数inplace xff0c 默认设置为False xff0c 当设置为True时 xff0c 计算时的得到的新值不
  • C++工程师学习内容

    C 43 43 是最贴近底层编程语言 在性能方面上 xff0c 有着无可替代的优势特别是对于很多游戏开发公司来说 xff0c C 43 43 尤其适合作为后端服务的开发语言 在一些对于并发性能要求较高的业务上 xff0c C 43 43 也
  • Ubuntu 更新apt出错

    输入sudo apt get update后出现 Err 1 http us archive ubuntu com ubuntu xenial InRelease Temporary failure resolving 39 us arch
  • 使用OpenWrt开发嵌入式Linux(二):先让系统跑起来(使用initramfs)

    安装相关工具 推荐使用ubuntu 16及以上版本 sudo apt install gcc binutils bzip2 flex python perl make diffutils unzip gawk subversion zlib
  • 使用kubeadm从0到1搭建kubernete集群

    目录 概述 安装前提示 安装docker 安装kubeadm 安装kubernete集群master节点 安装 kubeadm kubectl kubelet组件 安装kubernete master节点 安装CNI网络插件 部署集群wor
  • shell基础之变量(2):变量有哪些种类、怎么定义/赋值/取值、不同种类变量的作用域

    通过本文能对shell变量有一个系统性的了解 xff0c 具体的包括 xff1a 变量的种类 xff1a 局部 全局 环境变量变量的定义和操作 xff1a 赋值 取值 取消变量变量的作用域 文章目录 一 变量的种类1 全局变量2 局部变量
  • java 泛型全解 - 绝对最详细

    背景 对于java的泛型我一直属于一知半解的 xff0c 平常真心用的不多 直到阅读 Effect Java 看到很多平常不了解的用法 xff0c 才下定决心 xff0c 需要系统的学习 xff0c 并且记录下来 1 泛型的概述 xff1a
  • Zookeeper数据同步流程

    在服务器启动阶段 xff0c 会进行磁盘数据的恢复 xff0c 完成数据恢复后就会进行Leader选举 一旦选举产生Leader服务器后 xff0c 就立即开始进行集群间的数据同步 xff0c 在整个过程中 xff0c Zookeeper都
  • JS中Ajax的方法和应用

    XMLHttpRequest对象 Ajax技术的核心是XMLHttpRequest对象 xff08 简称XHR xff09 这是有微软率先引入的一个特性 xff0c 其他浏览器提供商后来都提供了相同的实现 但因为IE的兼容性问题 xff0c
  • node.js安装及环境配置

    一 下载nodejs的安装包 xff1a 下载地址 xff1a https nodejs org zh cn download 根据自己电脑系统及位数选择 xff0c 一般都选择windows64位 msi格式安装包 网站上提供的安装包版本
  • 6个常用的React组件库

    Ant Design 项目链接 xff1a Ant Design 包大小 xff08 来自 BundlePhobia xff09 xff1a 缩小后 1 2mB xff0c 缩小 43 gzip 压缩后 349 2kB xff0c 通过摇树