关于react.js:6个常用的React组件库

51次阅读

共计 2178 个字符,预计需要花费 6 分钟才能阅读完成。

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-O…

https://github.com/Semantic-O…

社区运行的 fork:

https://github.com/fomantic/F…

荣誉奖

Reach UI

ReachUI 是一个底层组件库,容许开发人员在其设计零碎中构建可拜访的 React 组件。

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

Reakit

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

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

Rebass

我关注 Rebass 曾经有一段时间了。它是一个功能强大的组件库,没有自带主题,但能够轻松扭转主题。对于它的实际示例,请参见其演示。

我的项目链接:Rebass

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

正文完
 0