react有元件庫嗎

react有组件库；组件库是通过多维度组合来构建，将组件整理在一起的设计方案；组件设计是通过对功能及视觉表达中元素的拆解、归纳、重组，并基于可被复用的目的，形成规范化的组件，react常用的组件库有Bulma、AntDesign、Bootstrap等等。

本教程操作环境：Windows10系统、react17.0.1版、Dell G3电脑。

react有组件库

 组件设计是通过对功能及视觉表达中元素的拆解、归纳、重组，并基于可被复用的目的，形成规范化的组件，通过多维度组合来构建整个设计方案，將这些组件整理在一起，便形成组件库。

常用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 節點；

• 你的應用程式看起來會像Google的產品（對某些人來說，這可能代表一種專業風格）。

Semantic UI

• #專案連結：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，透過搖樹減少體積。

【相關推薦：###javascript影片教學###、###web前端###】####

以上是react有元件庫嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章！