Logo

菜单

发布于 2026-01-06 7 阅读
0

比较流行的 React 组件库 DEV 的全球展示与分享挑战赛，由 Mux 呈现：展示你的项目！

比较流行的 React 组件库

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

作者：易卜拉希马·恩多✏️

React 是一个用于构建用户界面的 JavaScript 库。它拥有一个活跃的社区，社区成员孜孜不倦地开发 UI 组件，帮助我们加快开发流程，简化工作。

在本文中，我们将比较流行的 React 组件库，并从流行度、开发者体验、可读性、文档和打包大小等方面对每个库进行评估，以帮助您为下一个 React 项目选择合适的库。

蚂蚁设计

Ant Design是一个完全用 TypeScript 构建的 UI 库。它非常适合快速构建 React 应用，因为它拥有一套高质量的 React 组件，并且对浏览器和服务端渲染提供了强大的支持。

要查看 Ant Design 的实际应用，请使用以下命令之一进行安装。

  yarn add antd
Enter fullscreen mode Exit fullscreen mode

或者：

 npm install antd
Enter fullscreen mode Exit fullscreen mode

接下来，添加以下代码块以创建卡片组件（我们将为每个库创建一个卡片，以便更轻松地比较它们）。

    import React from 'react';
    import { Card, CardActions, CardContent, makeStyles, Button, Typography } from '@material-ui/core';

    const MaterialUI = () => {
      const useStyles = makeStyles({
        root: {
          width: 300,
        },
        title: {
          paddingBottom: '1rem'
        }
      });

      const classes = useStyles();
      return (
    <Card className={classes.root}>
    <CardContent>
    <Typography className={classes.title} variant="h5" component="h1">
    Material UI card
    </Typography>
        <Typography variant="body2" component="p">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        </Typography>
      </CardContent>
      <CardActions>
      <Button variant="contained" color="primary">
      Read more
    </Button>
      </CardActions>
    </Card>
    ) };

    export default MaterialUI
Enter fullscreen mode Exit fullscreen mode

正如您所见，Ant Design 提供了一个强大的组件创建平台。组件命名清晰易懂，元素接收的属性也一目了然。此外，这些组件还可以根据我们的设计进行定制。

让我们来看看 Ant Design 与其他 React 组件库相比如何：

  • 人气爆棚——GitHub上拥有 56.4 万颗星， NPM上每周下载量超过 34.1 万次；阿里巴巴、百度等跨国公司都在使用。
  • 文档——编写精良，对初学者友好；您可以复制给定组件的源代码，以便在 CodePen、CodeSandbox 或 StackBlitz 上更好地预览。
  • 压缩包 大小— antd 2.2MB

如您所见，Ant Design 非常流行，尤其是在中国，而且它的文档也很全面。但是，与其他 React 组件库相比，它的软件包体积相当大。

LogRocket 免费试用横幅

Material-UI

Material-UI是最流行的 React UI 组件库。它基于 Google 的 Material Design 设计理念，并拥有大量预构建的 React 组件，可以帮助您快速创建 React 应用。更棒的是，它还提供了一些预构建的主题，可以进一步加快您的开发速度。

要安装 Material-UI，请在终端中运行以下两个命令之一。

  yarn add @material-ui/core
Enter fullscreen mode Exit fullscreen mode

或者：

    npm install @material-ui/core
Enter fullscreen mode Exit fullscreen mode

接下来，添加以下代码（黑色），使用 Material UI 创建一个卡片组件。

    import React from 'react';
    import { Card, CardActions, CardContent, makeStyles, Button, Typography } from '@material-ui/core';

    const MaterialUI = () => {
      const useStyles = makeStyles({
        root: {
          width: 300,
        },
        title: {
          paddingBottom: '1rem'
        }
      });

      const classes = useStyles();
      return (
    <Card className={classes.root}>
    <CardContent>
    <Typography className={classes.title} variant="h5" component="h1">
    Material UI card
    </Typography>
        <Typography variant="body2" component="p">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        </Typography>
      </CardContent>
      <CardActions>
      <Button variant="contained" color="primary">
      Read more
    </Button>
      </CardActions>
    </Card>
    ) };

    export default MaterialUI
Enter fullscreen mode Exit fullscreen mode

与 Ant Design 不同，Material-UI 提供了内置的组件样式设置方法。makeStyles()这在代码规模较大时尤为实用；它能帮助你更快地找到需要设置样式的元素，并提高代码的可读性。缺点是，随着组件规模的增长，代码的可读性可能会降低。但总的来说，Material-UI 是一个功能强大且高度可定制的库。

  • 人气——在GitHub上拥有 54.6k 个星标，在NPM上每周下载量超过 100 万次；被 NASA、Netflix、Amazon 等公司使用。
  • 文档——易于理解，对初学者友好；您可以在文档中找到特定组件的源代码，甚至可以在 CodeSandbox 中对其进行编辑。
  • 压缩包大小— @material-ui/core 314.5kB

与 Ant Design 相比，Material UI 的包体积非常小。它也广受欢迎，拥有完善的生态系统，值得您在下一个 React 项目中考虑使用。

React Bootstrap

React Bootstrap 对于偏爱 Bootstrap 的开发者来说简直是梦想成真，因为它将 Bootstrap 的强大功能和简洁性带到了 React 中。它包含大量预构建的纯 React 组件，无需任何第三方库。总的来说，React Bootstrap 提供了与 Bootstrap 几乎相同的功能。

在终端中运行以下命令之一来安装 React Bootstrap。

    yarn add react-bootstrap bootstrap
Enter fullscreen mode Exit fullscreen mode

或者：

    npm install react-bootstrap bootstrap
Enter fullscreen mode Exit fullscreen mode

接下来，像之前一样，添加以下代码块来创建卡片：

    import React from 'react';

    import 'bootstrap/dist/css/bootstrap.min.css';
    import { Button, Card } from 'react-bootstrap';

    const ReactBootstrap = () => (
    <Card style={{ width: 300 }}>
      <Card.Body>
        <Card.Title>React Bootstrap card</Card.Title>
        <Card.Text>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        </Card.Text>
        <Button variant="primary">Read more</Button>
      </Card.Body>
    </Card>
    )

    export default ReactBootstrap;
Enter fullscreen mode Exit fullscreen mode

React Bootstrap 将 Bootstrap 的样式扩展到了 React 组件。虽然有 Bootstrap 使用经验会有帮助，但并非必需。代码可读性很高，组件名称也易于记忆。

现在公布成绩单：

React Bootstrap 需要 Bootstrap 库作为依赖项。不过，它的打包体积很小。如果您喜欢 Bootstrap，那么 React Bootstrap 绝对值得您考虑用于 React 应用。

蓝图

Blueprint 是一个 UI 库，主要用于桌面应用程序，因为它针对数据密集型界面进行了优化和构建。虽然也可以用它来构建 Web 应用程序，但无法发挥 Blueprint 的全部功能。

安装 Blueprint，然后在终端运行以下命令之一来创建卡片。

    yarn add @blueprintjs/core
Enter fullscreen mode Exit fullscreen mode

或者：

    npm install @blueprintjs/core
Enter fullscreen mode Exit fullscreen mode

要创建卡片组件，请添加以下代码行。

    import React from 'react';
    import "@blueprintjs/core/lib/css/blueprint.css"
    import { Button, Card, Classes } from "@blueprintjs/core";


    const Blueprint = () => (
    <Card style={{width: 300}} className={Classes.CARD}>
        <h3>Blueprint card</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea</p>
        <Button intent="primary" text="Read more" className={Classes.BUTTON} />
    </Card>
      );

    export default Blueprint;
Enter fullscreen mode Exit fullscreen mode

您仍然可以在 Blueprint 中使用相同的组件命名约定。您还可以利用 CSS 工具来设置组件样式，这有助于提高代码的可读性。

现在让我们来分析一下 Blueprint 的受欢迎程度和代码质量。

  • 人气——GitHub上拥有 1.5 万颗星， NPM上下载量超过 10.7 万次。
  • 文档— 文档是交互式的，您可以从文档或 GitHub 复制给定组件的源代码。
  • 压缩包 大小— @blueprintjs/core 588.2kB

总的来说，Blueprint 是一个优秀的组件库，适合构建 React 应用，尤其是具有复杂、数据密集型界面的桌面应用。

语义用户界面

与 Blueprint 不同，Semantic UI 专为构建 React 应用而设计。它提供了一些预置主题，您可以通过安装它或使用Create React App来使用这些主题。Semantic UI 组件响应迅速，并且拥有相当不错的浏览器支持。

让我们通过在终端运行以下命令之一，使用 Semantic UI 创建一个卡片组件。

    yarn add semantic-ui-react semantic-ui-css
Enter fullscreen mode Exit fullscreen mode

或者：

  npm install semantic-ui-react semantic-ui-css
Enter fullscreen mode Exit fullscreen mode

接下来，添加以下代码块来创建卡片：

    import React from 'react'

    import 'semantic-ui-css/semantic.min.css';
    import { Card, Button } from 'semantic-ui-react'

    const SemanticUI = () => ( 
      <Card style={{width: 300}}>
        <Card.Content>
          <Card.Header>Semantic UI</Card.Header>
          <Card.Description>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
          </Card.Description>
          <Button primary>Read more</Button>
        </Card.Content>
      </Card>
    )

    export default SemanticUI
Enter fullscreen mode Exit fullscreen mode

使用 Semantic UI 创建组件与使用 React Bootstrap 创建组件非常相似，区别在于 props 的传递方式。此外，该组件也更易于阅读和理解。

让我们来看看语义化用户界面（Semantic UI）的各项功能表现如何。

Semantic UI React 库需要 Semantic UI CSS 包才能正确设置组件样式。虽然这会增加项目的一些文件大小，但打包后的大小仍然很小。

常绿

如果您正在寻找一款底层设计简洁的 React UI 组件库，Evergreen 将是您的理想之选。它包含多个实用组件，可用于构建完整的 React 组件，并且由于其灵活性和可定制性远超大多数库，因此非常适合企业级 Web 应用。

让我们通过在终端中运行以下两个命令之一来安装 Evergreen。

    yarn add evergreen-ui
Enter fullscreen mode Exit fullscreen mode

或者：

    npm install evergreen-ui
Enter fullscreen mode Exit fullscreen mode

接下来，创建卡片组件。

    import React from 'react';
    import { Pane, Text, Button, Heading } from 'evergreen-ui'


    const Evergreen = () => (
        <Pane
        display="flex"
        alignItems="center"
        padding={16}
        justifyContent="center"
        flexDirection="column"
        border="default"
        width={300}>
        <Heading is="h1">Evergreen Card</Heading>
        <Text marginY={10}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea</Text>
        <Button appearance="primary">Read more</Button>
      </Pane>

    );

    export default Evergreen;
Enter fullscreen mode Exit fullscreen mode

如您所见，卡片的创建方式和部分名称已有所更改。Evergreen 的工作方式正是如此；它提供极简的组件，可以扩展以适应您的设计系统。

至于规格方面：

  • 受欢迎程度——Evergreen 在GitHub上拥有 9.1k 个 star ，在NPM上的下载量也只有 4,000 多次，与其他组件库相比，它的使用范围并不广泛；它由Segment开发和使用。
  • 文档——文档解释得很清楚，而且很容易找到特定组件的源代码。
  • 压缩包大小 — evergreen-ui 751.2kB

总而言之，Evergreen 是一个优秀的 React 组件库，它拥有相对较小的打包体积、大量的预构建组件以及可以根据您的需求进行定制的底层设计。

Reactstrap

Reactstrap 与 React Bootstrap 类似，区别在于它并不依赖 Bootstrap 就能正常工作。不过，Reactstrap 也将 Bootstrap 的样式引入到了 React 组件中。

要查看 Reactstrap 的实际应用，请运行以下命令之一。

    yarn add reactstrap
Enter fullscreen mode Exit fullscreen mode

或者：

    npm install reactstrap
Enter fullscreen mode Exit fullscreen mode

创建卡片组件。

    import React from 'react';
    import {
      Card, CardText, CardBody,
      CardTitle, Button
    } from 'reactstrap';

    const Reactstrap = () => (
          <Card style={{width: 300}}>
            <CardBody>
              <CardTitle>Reactstrap Card</CardTitle>
              <CardText>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea</CardText>
              <Button color="primary">Read more</Button>
            </CardBody>
          </Card>
      );

    export default Reactstrap;
Enter fullscreen mode Exit fullscreen mode

语法与 React Bootstrap 类似，但 React Bootstrap 使用驼峰命名法来命名组件，而不是使用点号。代码易于理解和阅读。

Reactstrap本质上是React Bootstrap的替代方案。它们用途相同，打包后的大小也相近。

温泉用户界面

Onsen UI 与我们之前介绍过的库略有不同。由于它采用移动优先的设计理念，Onsen UI 主要用于构建跨平台移动 Web 应用。

运行以下两个命令之一即可安装 Onsen UI。

    yarn add onsenui react-onsenui
Enter fullscreen mode Exit fullscreen mode

或者：

    npm install onsenui react-onsenui
Enter fullscreen mode Exit fullscreen mode

现在使用以下代码创建一个卡片组件。

    import React from 'react';
    import 'onsenui/css/onsenui.css';
    import 'onsenui/css/onsen-css-components.css';
    import { Card, Button } from 'react-onsenui';


    const OnsenUI = () => (
      <Card style={{width: 300}}> 
      <h3>Onsen UI card</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea</p>
        <Button modifier="cta">Read more</Button>
      </Card>
    );

    export default OnsenUI;
Enter fullscreen mode Exit fullscreen mode

尽管它是移动端设计的，但其代码与我们比较过的大多数组件库都有些类似。组件和属性都易于理解，命名也很规范。

Onsen UI 在受欢迎程度、文档质量和软件包大小方面与同类产品相比如何？

  • 受欢迎程度——Onsen UI 在GitHub上拥有 7.8k 个星标，在NPM上拥有 2,000 次下载，使用率并不高。
  • 文档——与其他库相比相对薄弱。虽然提供了一个类似 Playground 的环境，但没有提供代码，而且由于缺少示例，组件很难理解。文档对初学者来说绝对不友好。
  • 压缩包大小— react-onsenui 48kB；onsenui 319.3kB

Onsen UI 可以用于各种 React 应用，但在采用移动优先方法开发 React 应用时，它尤其出色。

结论

无论你正在开发什么类型的项目，都有大量的 UI 组件库可以帮助你快速轻松地构建实用且功能丰富的 React 应用。大多数组件库都支持自定义，并包含许多实用的预构建组件。更棒的是，一些 UI 库还提供预构建主题，让你能够迅速搭建网站。希望这份对比能够帮助你为下一个 React 项目选择合适的组件库。

全面了解生产环境中的 React 应用

调试 React 应用可能很困难，尤其是在用户遇到难以重现的问题时。如果您有兴趣监控和跟踪 Redux 状态、自动发现 JavaScript 错误以及跟踪缓慢的网络请求和组件加载时间，不妨试试 LogRocket。

替代文字

LogRocket就像 Web 应用的 DVR，它会记录 React 应用中发生的一切。你无需猜测问题原因，即可汇总并报告问题发生时应用的状态。LogRocket 还会监控应用的性能，并提供客户端 CPU 负载、客户端内存使用情况等指标的报告。

LogRocket Redux 中间件包为用户会话增加了一层额外的可见性。LogRocket 会记录 Redux store 中的所有操作和状态。

革新 React 应用的调试方式——立即开始免费监控。

这篇文章《比较流行的 React 组件库》最初发表在LogRocket 博客上。

文章来源：https://dev.to/bnevilleoneill/comparing-popular-react-component-libraries-3160
10 个超酷的 CodePen 演...
⚛️ JavaScript 更新、...