6个常用的React组件库
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,通过摇树减少体积。
6个常用的React组件库相关推荐
- mathcal 对应于什么库_如何快速构建React组件库
前言 俗话说:"麻雀虽小,五脏俱全",搭建一个组件库,知之非难,行之不易,涉及到的技术方方面面,犹如海面风平浪静,实则暗礁险滩,处处惊险- 目前团队内已经有较为成熟的 Vue 技术 ...
- 【Vue.js】Vue.js中常用的UI组件库和Vue Router
1.Vue生态中常用的UI组件库 1. vant 介绍 轻量级.可靠的移动端 Vue 组件库 有赞前端团队出品 GitHub地址:https://github.com/youzan/vant 特性 拥 ...
- react ui框架_顶级React组件库推荐
作者丨Max Rozen 译者丨王强 策划丨小智 转发链接:https://mp.weixin.qq.com/s/-vRr8Qd8DCNiza09eZjmbQ 本文最初发布于 maxrozen.com ...
- react打包后图片丢失_如何快速构建React组件库
俗话说:"麻雀虽小,五脏俱全",搭建一个组件库,知之非难,行之不易,涉及到的技术方方面面,犹如海面风平浪静,实则暗礁险滩,处处惊险〜 目前团队内已经有较为成熟的 Vue 技术栈的 ...
- 华为 P40 或首发鸿蒙系统;新 iPhone Logo 移至中间;React 组件库 uiw 3.4.0 发布 | 极客头条...
快来收听极客头条音频版吧,智能播报由标贝科技提供技术支持. 「CSDN 极客头条」,是从 CSDN 网站延伸至官方微信公众号的特别栏目,专注于一天业界事报道.风里雨里,我们将每天为朋友们,播报最新鲜有 ...
- 2020最流行的React组件库推荐
React Bootstrap React-Bootstrap 是一个可重复使用的 React 组件库,也是最受欢迎的前端框架之一.目前同样是在为1.0.0版本而积极开发中. Ant Design
- 十大常用前端UI组件库
Vant 一款有赞出品轻量.可靠的的移动UI组件库,目前支持 Vue2.Vue3.React,微信和支付宝小程序,并由社区团队维护 React 版本和支付宝小程序版本. 官网的文档清晰易懂,如果你熟悉 ...
- StoryBook 开发React组件库文档
StoryBook 开发 React 组件库文档 说明 StoryBook 是一个开源的 UI 组件库构建工具,支持 React.Vue.Angular 等主流开发框架,使用 StoryBook 将获 ...
- React组件库实践:React + Typescript + Less + Rollup + Storybook
背景 原先在做低代码平台的时候,刚好有搭载React组件库的需求,所以就搞了一套通用的React组件库模版.目前通过这套模板也搭建过好几个组件库. 为了让这个模板更干净和通用,我把所有和低代码相关的代 ...
最新文章
- Objective-C(十八、谓语使用及实例说明)——iOS开发基础
- RMAN-06026报错解决方法
- poj2182 Lost Cows-暴力
- 徐阿衡 | 知识抽取-实体及关系抽取(一)
- vim显示python嵌套级_在Vim中为Python突出显示语法
- 华硕 x86 android,【华硕X79评测】学不会不收费 几步教你安装Android x86-中关村在线...
- java中LinkedList类的操作
- gulimall(谷粒商城) 是一个综合性的B2C平台,包括前台商城系统以及后台管理系统
- SAPI使用总结——SpVoice的使用方法
- vmware workstation虚拟机安装Ubuntu server 18.04
- 天天生鲜页面设计——网站首页
- 无人便利店代理前景分析
- ERROR:此文件包含病毒,已删除
- 依赖注入:语法糖胜于功能组合
- 百万钱包借款时填资料一直显示服务器异常,百万钱包有连续放款失败,然后突然推过的吗?我已经失败四五...
- Linux之ssh免密登录
- 旁瓣对消原理_自适应旁瓣相消的原理
- [论文总结]:faster cnns with direct sparse convolutions and guided pruning 直接稀疏卷积和引导剪枝
- 计算机基础知识竞赛ppt,计算机基础知识竞赛.doc
- FlyAI小课堂:深度学习论文翻译解析(4):Support Vector Method for Novelty Detection
热门文章
- C# 国腾 二代身份证 扫描身份证信息
- linux 电子表小程序,微信小程序Taro开发(3):canvas制作钟表
- (C语言版)无迹卡尔曼滤波UKF和容积卡尔曼滤波CKF进行锂电池SOC估计的C语言版本实现
- android图标为什么是机器人,安卓图标为什么是个机器人?让鸿蒙来告诉你
- 2023知识追踪最新综述来自顶刊!!!——《Knowledge Tracing:A Survey》
- sudo和apt是什么的缩写
- steam创意工坊启动工具_如何在启动时阻止Steam启动
- jena+fuseki+python查询
- 用VMware导入.ova文件
- 作为短信运营商,我就根据客户的需求反馈提出以下几条短信平台的实质建议